了解后端語言的童鞋一定聽過模塊化開發的概念，比如java、python等后端語言都有自己的模塊化特性，然而和后端語言相比，javascript還尚未實現模塊化的功能，雖然之后的更高版本可能引入模塊化開發的概念，但是現階段我們可以通過第三方控件來實現。
今天我就來給大家介紹下可以幫助我們實現前端模塊化的工具——seaJs。如果對seaJs已經有實際使用經驗的小伙伴可以直接忽略這篇文章。
如果有小伙伴了解requireJs，那么學習seaJs會相當的容易，因為requireJs也是前端模塊化的構建工具之一，兩者的主要區別就是requireJs是基於AMD規范的，而seaJs是基於CMD規范的。
至於什么是AMD和CMD，在這里不做詳細介紹啦，想要了解的童鞋可以查看seaJs作者玉伯的回答：http://www.zhihu.com/question/20351507/answer/14859415
好了，我們切入正題，首先先介紹下seaJs的下載及配置。
一、seaJs的下載及配置
下載：http://seajs.org/docs/#downloads （當前最新版本為3.0.0，還可以使用smp下載）
配置：（1）將下載后的sea.js文件挪到自己的網站目錄下（sea.js位於sea-modules\seajs\seajs中）；
我的網站目錄如下：
（2）在templates下的demo.html中進行載入，如下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 7 <link href="" rel="stylesheet"> 8 </head> 9 <body> 10 <p class="text">111</p> 11 <script type="text/javascript" src="../static/seajs_module/jquery/2.1.4/jquery-2.1.4.min.js"></script> 12 <script type="text/javascript" src="../static/seajs_module/seajs/2.2.0/sea.js"></script> 13 <script> 14 seajs.config({ 15 base:"../static/seajs_module" //基准文件目錄 16 }); 17 seajs.use("../static/app/src/demo.js")</script> //入口模塊 18 </body> 19 </html>
配置主要包括：載入sea.js文件、seajs.config配置及使用入口模塊這三塊，在這里我就不做詳細介紹了，官方文檔介紹的非常詳細 http://seajs.org/docs/#quick-start
其中seajs.config的配置項主要有如下幾個：
1 seajs.config({ 2 // 別名配置 alias: { 3 'jquery' : '/static/lib/jquery/2.1.4/jquery', 4 }, 5 map: [ 6 [ /^(.*\.(?:css|js|tpl))(.*)$/i, '$1?'+seajsTimestamp ] 7 ], 8 9 // 路徑配置 paths: { 10 'lib': '/static/lib', 11 'util': '/static/component/base/util' 12 }, 13 14 // 變量配置//vars: {// 'locale': 'zh-cn'//},// 映射配置//map: [// ['http://example.com/js/app/', 'http://localhost/js/app/']//],// 預加載項 15 preload: ['jquery', 'seajs-text','common'], 16 //preload: ['jquery', 'seajs-text', 'seajs-combo'],// 調試模式 17 debug: true, 18 19 // Sea.js 的基礎路徑//base: 'http://example.com/path/to/base/',// 文件編碼 20 charset: 'utf-8' 21 });
二、seaJs模塊的編寫
seaJs遵循一個文件即一個模塊的規則，模塊與模塊之間可以存在依賴關系。
模塊編寫方法如下：
demo.js文件
1 define(function(require, exports, module) { 2 var until=require('../src/untils'); //引入需要的模塊（即相應js文件） 3 //你的代碼 4 $(".text").css("color","red"); 5 until.rule(); //調用until中的方法 6 });
以上代碼說明，demo.js中的代碼依賴於until.js中的代碼
untils.js文件
1 define(function(require, exports, module) { 2 exports.rule=function(){ 3 console.log('111'); 4 } 5 });
untils.js中通過exports將rule方法暴露到全局。
這樣我們就實現了js模塊與模塊之間的編寫與功能實現，效果如下：
雖然我們再頁面中沒有引入untils.js，但是通過模塊之間的依賴關系，seaJs也會自動幫我們加載進來，而demo.js是作為入口模塊載入。
這里需要注意的是jquery模塊如果以require方式在demo.js中引入的話會報 Uncaught TypeError: $ is not a function 的錯誤。具體原因是jquery是非CMD標准的，如果需要調用可以通過如下解決方案：
（1）直接在頁面中引入jquery文件，就像本文上方的demo.html中一樣
（2）刪除jquery中的相應代碼，2.14版本中刪除源碼底部的 && define.amd 即可 （親測可行）。
（3）官方解決方案請查看 https://github.com/seajs/seajs/issues/286
總之這也是使用seaJs比較深的坑了。
三、使用spm壓縮合並模塊
剛剛上面演示的模塊加載例子，我們可以看到瀏覽器運行的時候自動會把我們的模塊加載進去，那么如果我們構建一個稍微復雜的功能后，我們使用的模塊也會越來越多，如果這樣一下子加載很多js文件顯然是非常影響性能的，那么怎么解決呢，這里就需要用到seaJs的包管理工具spm。
用過npm的童鞋肯定知道它是node.js的包管理工具，這里我們需要下載node 和 npm來安裝spm。
至於如何下載安裝node.js就不做介紹了，可以訪問 https://nodejs.org/en/ 進行下載。
下載安裝完成后，打開命令行(cmd)，輸入 npm install -g spm開始下載spm
等待一段時間下載完成后我們就可以使用spm命令了。
進入我們所要壓縮合並的項目js目錄，輸入spm build demo.js --combine 就可以壓縮我們的demo模塊文件了：
壓縮成功后會在demo.js的同級目錄下新建一個dist文件夾存放壓縮后的js文件。
接下來我們再來打開網頁看一下加載的文件就會發現只加載了demo.js了：
ok，大功告成，我們的前端模塊化之路就邁進了一小步了，至於詳細的spm命令請查看 http://spmjs.io/documentation/develop-a-package#build
后續還會介紹前端自動化開發，雖然都不是什么新鮮玩意了，但是自己探索的過程才是最重要的，值得記錄分享。
歡迎關注、分享、評論。