seajs 模塊化編程js代碼

seajs是我剛入門前端就接觸到的一個javaScript模塊加載框架。使用seajs後javaScript代碼的可讀性和清晰度有了很大的提高,插件的使用和組裝變的很方便。更加方便代碼的升級和維護。推薦使用插件比較多的項目使用。或者使用requirejs也比較流行。javascript

ps:若是想知道RequireJS、SeaJS哪一個好用的能夠自行對比,或者查看html

seajs 的簡單上手

首先先去官網下載最新版本。
下載後,假定把它放在js子目錄下面,就能夠加載了。前端

<script type="text/javascript" src="js/sea.js"></script>

加載seajs後咱們還須要加載本身的js配置文件java

<script type="text/javascript" src="js/sea-config.js"></script>

seajs 的簡單配置jquery

//.sea-config.js 
      seajs.config({
          base: "../plug-js/",
          alias: {
            "jquery": "jquery/1.10.1/jquery.js"
          }
      })

簡單使用api

// 全部模塊都經過define來定義
  define(function(require,exports,module){
        // 經過require來引入jquery
        var $ = require('jquery');
        
        console.log($);
  })

seajs參數

define

使用全局函數define來定義函數數組

define(id?,dependencies?,factory);

id: 當前模塊的惟一標識。該參數可選。若是沒有指定,默認爲模塊所在文件的訪問路徑。若是指定的話,必須是頂級或絕對標識。
dependencies: 當前模塊所依賴的模塊,是一個由模塊標識組成的數組。
factory: 模塊的工做函數。模塊初始化時,會調用且僅調用一次該工廠函數。框架

define(function(require,exports,module){
    //The module code goes here
})

**注意:不推薦不要設定id和dependencies參數。異步

exports

exports 用來向外提供模塊的APIasync

define(function(require,exports){
    // snip 
    exports.foo = 'bar';
    exports.doSomething = function(){};
})

除了給exports對象增長成員,還能夠使用return直接向外提供API

define(function(require,exports){
    // snip...
    return {
      foo : 'bar',
      doSomething : function(){}
    }
})
可簡化爲:
define({
   foo : 'bar',
   doSomething : function(){} 
})

require

require函數用來訪問其餘模塊提供的API

define(function(require){
   var a = require('./a');
   a.doSomething();
})

require.async: 異步加載模塊,並在加載完成後執行回調函數
require.resolv: 使用require()的內部機制來解析並返回模塊路徑。該函數不會加載模塊,只返回解析後的路徑。
require.load: 該方法可用異步加載腳本,並在加載完成後,執行指定的回調函數。
require.constructor: 給全部require參數對象添加一些公用屬性或方法。

module

modeule 參數存儲模塊的元信息

module.id: 當前模塊的惟一標識。
module.dependencies: 表示當前模塊的依賴列表
module.exports: exports是某個類的實例

define(function(require,exports,module){
         console.log(module.exports === exports); // true
         module.exports = new SomeClass();
         console.log(module.exports === exports); // false
   })

module.constructor: 給module參數對象添加一些公用屬性或方法。

api手冊

seajs的模塊化插件

相關文章
相關標籤/搜索