原创力文档- 1、本文档共14页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
使用SeaJS实现模块化JavaScript开发
使用SeaJS实现模块化JavaScript开发前言
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等 JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令 JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的 逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript 编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。
SeaJS的作者是淘宝前端工程师玉伯。
SeaJS本身遵循KISS（Keep It Simple, Stupid）理念进行开发，其本身仅有个位数的API，因此学习起来毫无压力。在学习SeaJS的过程中，处处能感受到KISS原则的精髓——仅做一件事，做好一件事。
本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程，然后详细讨论SeaJS的使用方法，最后给出一些与SeaJS相关的资料。传统模式 vs SeaJS模块化
假设我们现在正在开发一个Web应用TinyApp，我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到 module1.js，module1.js依赖module2.js和module3.js，同时module3.js依赖module4.js。传统开发
使用传统的开发方法，各个js文件代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 //module1.js
var module1 = {
????run: function() {
????????return $.merge([module1], $.merge(module2.run(), module3.run()));
????}
}
?
//module2.js
var module1 = {
????run: function() {
????????return [module2];
????}
}
?
//module3.js
var module3 = {
????run: function() {
????????return $.merge([module3], module4.run());
????}
}
?
//module4.js
var module4 = {
????run: function() {
????????return [module4];
????}
} 此时index.html需要引用module1.js及其所有下层依赖（注意顺序）：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 !DOCTYPE HTML
html lang=zh-CN
head
????meta charset=UTF-8
????titleTinyApp/title
????script src=./jquery-min.js/script
????script src=./module4.js/script
????script src=./module2.js/script
????script src=./module3.js/script
????script src=./module1.js/script
/head
body
????p class=content/p
????script
????????$(.content).html(module1.run());
????/script
/body
/html 随着项目的进行，js文件会越来越多，依赖关系也会越来越复杂，使得js代码和html里的script列表往往变得难以维护。
SeaJS模块化开发
下面看看如何使用SeaJS实现相同的功能。
首先是index.html：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 !DOCTYPE HTML
html lang=zh-CN
head
????meta charset=UTF-8
????titleTinyApp/title
/head
body
????p class=content/p
????script src=./sea.js/script
????scr
文档评论（0）