使用seajs進行模塊管理

前端模塊化開發的價值

解決命名衝突

咱們作項目是經常會作一些通用功能的封裝,封裝成一個個的函數,而後保存在一個名叫util.js的文件中.這種狀況就頗有可能在另外一個開發人員開發時發生命名衝突.

解決繁瑣的文件依賴

基於util.js，咱們開始開發UI層通用組件dialog.js,那麼咱們如今的引用狀況應該這樣:

<script src='util.js'></script>
<script src='dialog.js'></script>

假若有更多的依賴關係引用起來就很是的繁瑣.

使用Sea.js來解決

seajs是一個模塊管理框架,使用seajs須要遵照CMD(Common Module Definition)模塊定義規範.一個文件就是一個模塊.

經過define函數進行模塊定義.

util.js文件的代碼以下:

define(function(require,exports){
    exports.each = function(){
        //實現代碼
    };
    esxports.log = function(str){
        //實現代碼
    }
});

這裏的exports向外提供了each和log方法,當這個模塊被引用時,能夠調用這兩個方法.

經過require函數進行模塊調用.

dialog.js文件的代碼以下:

define(function(require,exports){
    var util = require('./util.js');
    exports.init = function(){
        util.each();
        util.log();
    }
});

這裏經過require('./util.js')來調用到util模塊.

Sea.js 帶來的好處

1. 經過exports暴露接口.這意味着不須要命名空間,也不須要全局變量,解決了命名衝突的問題.

2. 經過require引入依賴.這是一種很好的關注分離，解決了繁瑣的文件依賴.

3. 模塊的版本管理.經過別名等配置,配合構建工具,能夠比較輕鬆的實現模塊的版本管理.

4. 提高可維護性. 模塊化可讓每一個文件的職責單一,很是利於代碼維護.seajs提供nocahce debug等插件,擁有在線調試等功能,能比較明顯的提高效率.

5. 前端性惡能優化.seajs經過異步加載模塊對頁面性能很是有益.seajs提供了combo flush插件，配合服務端,能夠很好對頁面性能進行調優.

6. 跨環境共享模塊.CMD模塊定義規範與NOdejs的模塊規範很是相近.經過seajs的Nodejs版本,能夠很方便實現模塊的跨服務器和瀏覽器共享.

前端的模塊化構建可分爲兩大類。一類是以 Dojo、YUI3、國內的 KISSY 等類庫爲表明的大教堂模式。在大教堂模式下，全部組件都是顆粒化、模塊化的，各組件之間層層分級、環環相扣。另外一類是以 jQuery、RequireJS、國內的 Sea.js、OzJS 等類庫爲基礎的集市模式。在集市模式下，全部組件彼此獨立、職責單一，各組件經過組合鬆耦合在一塊兒，協同完成開發.

seajs兼容性

• Chorme 3+

• Firfox 2+

• Safari 3.2+

• Opera 10+

• IE 5.5+

持續更新中。。。