A complete example
Above said so many, the knowledge point is more dispersed, therefore finally I intend to use a complete seajs example to put these knowledge points together, facilitates the friend to generalize the review. This example contains the following files:
1.index.html--the main face.
2.sea.js--seajs script.
3.init.js--init module, Portal module, relies on data, jquery, style three modules. Loaded by the master page.
4.data.js--data module, pure JSON data module, loaded by init.
5.jquery.js--jquery module, modular encapsulation of the jquery library, loaded by init.
The 6.STYLE.CSS--CSS style sheet, which is loaded as a style module by init.
7.sea.js and Jquery.js code belong to the library code, do not repeat, here only give the code of the file you write.
Html:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<body>
<div id= "Content" >
<p class= "Author" ></p>
<p class= "blog" ><a href= "#" >Blog</a></p>
</div>
<script src= "./sea.js" data-main= "./init" ></script>
</body>
Javascript:
Copy Code code as follows:
Init.js
Define (function (Require, exports, module) {
var $ = require ('./jquery ');
var data = require ('./data ');
var css = require ('./style.css ');
$ ('. Author '). html (Data.author);
$ ('. Blog '). attr (' href ', data.blog);
});
Data.js
Define ({
Author: ' Zhangyang ',
Blog: ' http://blog.codinglabs.org '
});
Css:
Copy Code code as follows:
. author{color:red;font-size:10pt;}
. blog{font-size:10pt;}
The operation effect is as follows: