SeaJS入门教程系列第一篇：基础知识与全面介绍

前言
SeaJS是一个遵循CommonJS规范的Ja vaScript模块加载框架，它的核心使命是让Ja vaScript开发变得模块化，并实现按模块加载。和jQuery这类框架不同，SeaJS不会去扩展语言本身的特性，它只专注于一件事：模块化与按需加载。说白了，就是帮前端工程师从繁琐的文件依赖管理里解脱出来，让你能把精力集中在代码逻辑本身。而且它和jQuery可以无缝集成，用起来很顺手。用了SeaJS，代码的可读性和清晰度会明显提升，那些让人头疼的依赖混乱和代码纠缠问题，也能迎刃而解。
SeaJS的作者是淘宝前端工程师玉伯。
它本身就是按照KISS（Keep It Simple, Stupid）理念设计的，API一只手就能数过来，学起来毫无压力。在学习和使用过程中，你随处都能感受到KISS的精髓——只做一件事，并且把它做好。
这篇文章先通过一个具体例子，直观对比传统Ja vaScript开发方式和SeaJS的模块化方式，然后详细讨论SeaJS的使用方法，最后会附上一些相关的参考资料。

传统模式 vs SeaJS模块化
假设我们正在开发一个叫TinyApp的Web应用，并且决定用jQuery框架。TinyApp首页会用到module1.js，它依赖module2.js和module3.js，而module3.js又依赖module4.js。
传统开发
如果用传统方式，各个js文件大概会写成这样：

复制代码 代码如下:

//module1.js
var module1 = {
run: function() {
return $.merge(['module1'], $.merge(module2.run(), module3.run()));
}
}

//module2.js
var module2 = {
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及其所有下层依赖，而且顺序还不能乱：

复制代码 代码如下:

随着项目越来越大，js文件越来越多，依赖关系越来越复杂，这种手动维护script标签列表的方式，简直让人崩溃。
SeaJS模块化开发
那如果用SeaJS，同样的事情怎么做呢？先看index.html：

复制代码 代码如下:

看到了吧，html里只需要引入一个sea.js，所有依赖都由它来管理。至于加载策略，可以是一次性全部加载，也可以按需加载（用到某个模块时才加载对应的js），具体怎么配后面再聊。
index.html加载了一个叫init的模块，用它的initPage方法来初始化页面数据。这里的代码细节先不展开。
接下来看看模块化之后Ja vaScript的写法：

复制代码 代码如下:

//jquery.js
define(function(require, exports, module) = {

//原jquery.js代码...

module.exports = $.noConflict(true);
});

//init.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m1 = require('module1');

exports.initPage = function() {
$('.content').html(m1.run());
}
});

//module1.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m2 = require('module2');
var m3 = require('module3');

exports.run = function() {
return $.merge(['module1'], $.merge(m2.run(), m3.run()));
}
});

//module2.js
define(function(require, exports, module) = {
exports.run = function() {
return ['module2'];
}
});

//module3.js
define(function(require, exports, module) = {
var $ = require('jquery');
var m4 = require('module4');

exports.run = function() {
return $.merge(['module3'], m4.run());
}
});

//module4.js
define(function(require, exports, module) = {
exports.run = function() {
return ['module4'];
}
});

乍一看，代码好像变多了，也变复杂了。但别着急，这个例子太简单，体现不出SeaJS的优势。在大型项目中，这种模块化的组织方式的好处就会真正显现出来。不过从这个简单的对比里，我们至少能看到两点：
一是html页面不用再维护一堆script标签了，只需要引入一个sea.js。
二是Ja vaScript代码按照模块来组织，每个模块通过require来声明依赖，依赖关系一目了然。
通过这个例子，相信大家对SeaJS已经有了直观的印象。接下来就详细聊聊SeaJS的具体使用方法。