前言
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相關的資料。
SeaJS模塊化開發
下面看看如何使用SeaJS實現相同的功能。
首先是index.html：
複製代碼代碼如下:
<!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），具體加載策略使用方法下文討論。
index.html加載了init模塊，並使用此模塊的initPage方法初始化頁面數據，這裏先不討論代碼細節。
下面看一下模塊化後JavaScript的寫法：
複製代碼代碼如下:
//jquery.js
define(function(require, exports, module) = {
//原jquery.js代碼...
});
//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'];
}
});