前言
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文件代码如下：
//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'];
}
}
此时需要引用module1.js及其所有下层依赖（注意顺序）：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>tinyapp</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实现相同的功能。
首先是：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>tinyapp</title>
</head>
<body>
<p class="content"></p>
<script src="./sea.js"></script>
<script>
seajs.use('./init', function(init) {
init.initpage();
});
</script>
</body>
</html>
可以看到html页面不再需要引入所有依赖的js文件，而只是引入一个sea.js，sea.js会处理所有依赖，加载相应的js文件，加载策略可以选择在渲染页面时一次性加载所有js文件，也可以按需加载（用到时才加载响应js），具体加载策略使用方法下文讨论。
加载了init模块，并使用此模块的initpage方法初始化页面数据，这里先不讨论代码细节。
下面看一下模块化后javascript的写法：
//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代码的优势就会显现出来。不过从这里我们还是能窥探到一些seajs的特性：
一是html页面不用再维护冗长的script标签列表，只要引入一个sea.js即可。
二是js代码以模块进行组织，各个模块通过require引入自己依赖的模块，代码清晰明了。
通过这个例子朋友们应该对seajs有了一个直观的印象，下面本文具体讨论seajs的使用。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
点击进行留言回复
我要评论
网友评论