A complete example
I have said so much above, and the knowledge points are relatively scattered, so in the end I plan to use a complete SeaJS example to string these knowledge points together for your friends to summarize and review. This example contains the following files:
1.index.html - main page.
2.sea.js-SeaJS script.
3.init.js--init module, entry module, relying on data, jquery, and style. Loaded from the main 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.
6.style.css--CSS style sheet, loaded by init as a style module.
7. The codes of sea.js and jquery.js belong to the library code, so I won't go into details. I will only give the code of the files I wrote.
html:
Copy the code as follows: <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></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>
javascript:
The code copy is 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:
The code copy is as follows:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}
The operation effect is as follows: