SeaJS 입문 튜토리얼 시리즈의 전체 예(3)_Seajs

완전한 예제
위에서 너무 많이 말했지만 지식 포인트는 상대적으로 분산되어 있으므로 결국 완전한 SeaJS 예제를 사용하여 이러한 지식 포인트를 하나로 묶을 계획입니다. 요약하고 검토할 수 있습니다. 이 예에는 다음 파일이 포함되어 있습니다.

1.index.html - 메인 페이지.
2.sea.js——SeaJS 스크립트.
3.init.js——init 모듈, 입력 모듈은 데이터, jquery 및 스타일의 세 가지 모듈을 사용합니다. 메인 페이지에서 로드됩니다.
4.data.js——데이터 모듈, 순수 json 데이터 모듈, init에 의해 로드됨.
5.jquery.js - jquery 모듈은 init에 의해 로드되는 jQuery 라이브러리의 모듈식 캡슐화입니다.
6.style.css - init에 의해 스타일 모듈로 로드되는 CSS 스타일 시트입니다.
7. sea.js와 jquery.js의 코드는 라이브러리 코드에 속하므로 여기서는 제가 작성한 파일의 코드만 기재하겠습니다.
html:

코드 복사 코드는 다음과 같습니다.

< ;html lang="zh-CN">

 

 

블로그

javascript:

코드 복사 코드는 다음과 같습니다.

//init.js
define(function(require,exports, 모듈) {
var $ = require('./jquery');
var data = require('./data');
var css = require('./style.css');

$('.author').html(data.author);
$('.blog').attr('href', data.blog);
});

/ /data.js
define({
작성자: 'ZhangYang',
블로그: 'http://blog.codinglabs.org'
});

CSS:

코드 복사 코드는

입니다. 작성자{color:red;font-size :10pt;}
.blog{font-size:10pt;}

작동 효과는 다음과 같습니다.