완전한 예
나는 위에 너무 많이 말했다. 그리고 지식 포인트는 비교적 흩어져 있으므로 결국에는 완전한 Seajs 예제를 사용하여 친구들이 요약하고 검토 할 수 있도록 이러한 지식 포인트를 함께 묶을 계획이다. 이 예제는 다음 파일을 포함합니다.
1. index.html- 메인 페이지.
2.sea.js-seajs 스크립트.
3. init.js-init 모듈, 입력 모듈, 데이터, jQuery 및 스타일에 의존합니다. 메인 페이지에서로드 됨.
4.data.js-data 모듈, initl에 의해로드 된 순수한 JSON 데이터 모듈.
5. jQuery.js- jQuery 모듈, jQuery 라이브러리의 모듈 식 캡슐화, init에 의해로드.
6. 스타일.
7. Sea.js 및 jQuery.js의 코드는 라이브러리 코드에 속하므로 세부 사항을 사용하지 않을 것입니다.
HTML :
다음과 같이 코드를 복사하십시오. <! doctype html>
<html lang = "zh-cn">
<헤드>
<meta charset = "utf-8">
<제목> </title>
</head>
<body>
<div id = "content">
<p> </p>
<p> <a href = "#"> blog </a> </p>
</div>
<script src = "./ sea.js"data-main = "./ init"> </script>
</body>
</html>
자바 스크립트 :
코드 사본은 다음과 같습니다.
//init.js
정의 (함수 (요구, 내보내기, 모듈) {
var $ = 요구 사항 ( './ jQuery');
var data = require ( './ data');
var css = require ( './ style.css');
$ ( '. author'). html (data.author);
$ ( '. blog'). attr ( 'href', data.blog);
});
//data.js
정의하다({
저자 : '장용',
블로그 : 'http://blog.codinglabs.org'
});
CSS :
코드 사본은 다음과 같습니다.
.author {색상 : 빨간색; font-size : 10pt;}
.Blog {font-size : 10pt;}
작동 효과는 다음과 같습니다.