js模塊加載框架 sea.js學習筆記


seajs實現了JavaScript 的 模塊開發及按模塊加載。用來解決繁瑣的js命名沖突,文件依賴等問題,其主要目的是令JavaScript開發模塊化並可以輕松愉悅進行加載。

  官方文檔:http://seajs.org/docs/#docs

  首先看看seajs是怎么進行模塊開發的。使用seajs基本上只有一個函數“define”

 

fn.define
 = function(id,
 deps, factory) {

    //code  of function…

}

     使用define函數來進行定義一個模塊,根據 CMD (Common Module Definition)模塊定義規范。一個文件就是一個模塊。所以一個js文件中只有一個define,即一個文件是一個模塊,SeaJS中模塊的概念有點類似於面向對象中的類——模塊可以擁有數據和方法,數據和方法可以定義為公共或私有,公共數據和方法可以供別的模塊調用。

  官方實例中,define只傳入一個參數: 一個工廠函數

define(function(require,
 exports, module) {

    //code  of the module...

});

    在看參數之前,我們先看看define是如何處理參數的:

  fn.define = function(id, deps, factory)

   define可以接收的參數分別是模塊ID,依賴模塊數組及工廠函數;

    如果只有一個參數,則賦值給factory。

    如果有兩個參數,第二個賦值給factory;第一個如果是array則賦值給deps,否則賦值給id。

    如果有三個參數,則分別賦值給id,deps和factory。

  根據官方實例,建議還是根據官方的來就傳遞一個參數,即只有factory參數,這樣的話模塊id默認為js文件路徑。

  在來看看工廠函數的參數:

require,  exports, module

  require——模塊加載函數,用於記載依賴模塊。通過這個參數來進行對其他模塊的加載。

  exports——接口點,將數據或方法定義在其上則將其暴露給外部調用。通過這個參數,來將這個模塊的方法進行暴露

  module——模塊的元數據。其是一個對象,有屬性:

        module.id——模塊的ID。

        module.dependencies——一個數組,存儲了此模塊依賴的所有模塊的ID列表。

        module.exports——與exports指向同一個對象。

    使用factory的參數的使用:

define(function(require,
 exports, module) {

    var a  = require('./a');//引入a模塊    
   
    exports.fun2= function(){
            alert("fun2");
            a.dosomething();
   }    

}

   使用require對象來進行加載模塊,其實使用正則表達式進行驗證加載的,所以其參數必須是特定的字符串,不能是表達式。

  seajs會自動在require的參數中加入".js"來進行加載,即不需要寫上后綴名,但是在某些情況下,seajs不會為其添加“.js”:

  1.載入css:    

require("./module1-style.css");

  2.路徑中含有“?”: 

require(<a  href="http://example/js/a.json?b=func">http://example/js/a.json?cb=func</a>);

  3.路徑以“#”結尾:

require("http://example/js/a.json#");

 

使用exports來向外部暴露方法,或者屬性。暴露屬性有幾種方式,如上面中的例子是一種方式,另外還有:

使用return:

define(function(require)
 {
    var data1 = 1; //私有數據
    var func1  = function() { //私有方法
        returna.run(data1);
    }

    //暴露
    return{
        data2: 2,
        func2:function() {
            return'hello';
        }
    }; 
});

直接返回json對象:

define({
    data: 1,
    func:function() {
        return'hello';
    }
});

 

頁面中調用seajs

前面說了seajs用來解決模塊開發,和繁瑣的文件依賴問題,所以所有的文件依賴都是通過require對象進行加載,或者可以使用require.async(“./a”)來進行異步加載,即當使用到的時候才進行加載,

  注:無論是require()還是require.async()都可以有第二個參數為回調函數,當文件加載成功時調用:

require.async('/path/to/module/file',function(m) {

     //code of callback...
});
 
有了這個加載依賴的方式,我們無需再頁面上書寫大量的<script ></script>標簽,而僅僅使用一個
  
 <script src="./sea.js" data-main="./init"></script>

即可,其中data-main="./init" 為入口模塊,表示加載這個模塊,在進行迭代加載其所依賴的模塊,使用這個屬性可以省略seajs.use。這個后面說。

使用seajs.config進行全局配置:

seajs.config({

    base:'path/to/jslib/',

    alias: {
      'app':'path/to/app/'
    },

    charset:'utf-8',

    timeout: 20000,

    debug:false

});

這是對seajs進行全局配置,

base表示基址尋址時的基址路徑

alias可以對較長的常用路徑設置縮寫。

charset表示下載js時script標簽的charset屬性。

timeout表示下載文件的最大時長,以毫秒為單位。

debug表示是否工作在調試模式下。

 

使用seajs.use 載入入口模塊,相當於java的main函數,

//單模塊模式
seajs.use('./a');
 

//回調模式

seajs.use('./a',function(a)
 {

  a.dosomething();

});
 

//多模塊模式

seajs.use(['./a','./b'],function(a,
 b) {

  a.dosomething();

  b.dosomething();

});

 

下面可以看其官方給的simple例子中的頁面怎么寫的,基本上就明白了sea.js 是怎么用的了:

<script src="../sea-modules/seajs/seajs/2.2.0/sea.js"></script>
<script>

  // Set configuration
  seajs.config({
    base: "../sea-modules/",
    alias: {
      "jquery": "jquery/jquery/1.10.1/jquery.js"
    }
  });

  // For development
  if (location.href.indexOf("?dev") > 0) {
    seajs.use("../static/hello/src/main");
  }
  // For production
  else {
    seajs.use("examples/hello/1.0.0/main");
  }
</script>

//mian.js

//hello/mian.js
define(function(require) {

  var Spinning = require('./spinning');

  var s = new Spinning('#container');
  s.render();

});

 

 

 

    參考資料:seajs使用教程指南

        API快速參考

        前端模塊化開發的價值

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM