JS模塊化規範CMD之SeaJS

1. 在接觸規範以前，咱們用模塊化來封裝代碼大多爲以下：

;(function (形參模塊名, 依賴項, 依賴項) {
  // 經過 形參模塊名 修改模塊

  window.模塊名 = 形參模塊名
 })(window.模塊名 || {}, 依賴項, 依賴項)

1. 分號是什麼做用？

   答：爲了防止前面的代碼沒有添加分號形成語法解析錯誤，也可能會是 "!"， "+" 等

2. 爲何要將代碼放入一個自執行函數中

   答：爲了不全局命名空間污染，核心就是利用函數的私有做用域

3. 爲何將依賴項做爲參數傳進來

   答：爲了減小做用域查找機制

2. 常見的 JavaScript 模塊化規範

規範其實就是這些庫在推廣的過程當中逐漸造成的一套規則。

所謂的規範也就是：

定義了模塊的書寫格式

以及模塊之間的交互規則

Node 環境

CommonJS

瀏覽器環境

AMD

    RequireJS
CMD Common Module Definition

    CMD 就是 SeaJS 這個模塊加載器在推廣的過程當中定義的一個模塊規範
ECMAScript

    ECMAScript 6

CMD、AMD、CommonJS 都是社區制定出來的模塊規範，他們的目的都是爲了解決 JavaScript 沒有模塊化系統的問題。 他們都有如何定義模塊成員，以及模塊成員之間如何進行通訊交互的規則。

1.SeaJS基本介紹

1. 在SeaJS中，一個js腳本文件就是一個模塊

   模塊具備兩個特性：

   1. 模塊要有一個私有做用域：避免全局命名空間污染
   2. 模塊能夠向外導出內部成員，供別的模塊加載和使用

   因此：只要使用了SeaJS，那全部的js文件都經過define函數去定義該模塊,而且將全部的模塊代碼寫到 define 定義的回調函數中

   define 方法的回調函數中分別傳遞三個固定參數：

   1. require：
   2. exports
   3. module

2. 每個模塊中有一個require函數能夠用來加載指定模塊，須要接收一個模塊路徑

   1. 加載指定模塊而且執行該模塊中的代碼
   2. 獲得該模塊中的暴露的接口對象：module.exports

3. 模塊的做用域和導出

   模塊天生就是一個私有做用域，在該模塊內部定義的全部成員

   若是模塊內部的成員想要被外部所訪問:

   必須經過使用 module.exports(exports) 對象向外暴露

   require 函數加載模塊的時候，會自動拿到模塊內部的 module.exports 對象

2.SeaJS詳細介紹

1. 使用

index.html

    <script src="./js/sea.js"></script>
    <script>

      seajs.use('./js/main');
    </script>

main.js

    define(function (require, exports, module) {

      var moduleA = require('add.js')

      console.log(moduleA.add(10,20))
    })

add.js

    define(function (require, exports, module) {

      //隱性:var exports = module.exports  

      function add(a, b){
        return +a + +b;
      }

      module.exports.add = add;

      //隱性:return module.exports  
    })

exports 和 module.exports 的區別：如下事例只能用module.exports

    define(function (require, exports, module) {

      //隱性:var exports = module.exports  

      module.exports= function(){

      }

      //隱性:return module.exports  
    })

2. 配置（多放在入口文件中）

seajs.config({

      // 別名配置
      alias: {
        'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
        'json': 'gallery/json/1.0.2/json',
        'jquery': 'jquery/jquery/1.10.1/jquery'
      },

      // 路徑配置
      paths: {
        'gallery': 'https://a.alipayobjects.com/gallery'
      },

      // Sea.js 的基礎路徑
      base: 'http://example.com/path/to/base/',

    });

3. API 詳解

1. seajs.use

   加載模塊，啓動模塊系統。

   加載一個模塊 seajs.use('id')
   
       加載一個模塊，在加載完成時，執行回調 seajs.use('id', callback)
   
       加載多個模塊，加載完成時，執行回調 seajs.use(['id1','id2',...],callback)
   
   **注意**：
   
       在調用 seajs.use 以前，須要先引入 sea.js 文件
   
       seajs.use 與 DOM ready 事件沒有任何關係。若是某些操做要確保在 DOM ready 後執行，須要使用 jquery 等類庫來保證
   
       seajs.use 理論上只用於加載啓動，不該該出如今 define 中的模塊代碼裏

2. define(factory)

   define 是一個全局函數，用來定義模塊。

   define 接受 factory 參數，factory 能夠是一個函數，也能夠是一個對象或字符串。
   
       factory 爲對象、字符串時，表示模塊的接口就是該對象、字符串。
   
       factory 是一個對象時
   
       define({})
       factory 是一個字符串時
   
       define('hello')
       factory 是一個函數時
   
       define(function(require, exports, module){})

3. require

   require 用來加載一個 js 文件模塊， require 用來獲取指定模塊的接口對象 module.exports。

   require 在加載和執行的時候，js 會按照同步的方式和執行。

   使用注意：

   正確拼寫
   
       模塊 factory 構造方法的第一個參數 必須 命名爲 require
   
   不要修改
   
       不要重命名 require 函數，或在任何做用域中給 require 從新賦值
   
   使用字符串直接量
   
       require 的參數值 必須 是字符串直接量

   Tips: 把 require 看作是語法關鍵字就好啦

4. 模塊標識

   模塊標識是一個字符串，用來標識模塊。

   模塊標識能夠不包含文件後綴名，好比 .js
   
   seajs 推薦不加 .js 文件模塊後綴
   
   模塊標識能夠是 相對 或 頂級 標識

   相對標識

   相對標識以 . 開頭，永遠相對於當前模塊所處的路徑來解析。

   頂級標識

   頂級標識不以 . 或 / 開始，會相對模塊系統的基礎路徑（base路徑，默認是 sea.js 文件所屬的路徑）。 能夠手動配置 base 路徑。
   
   seajs.config({
     base: './js'
   })

   普通路徑

   除了相對和頂級標識以外的標識都是普通路徑。 普通路徑的解析規則，會相對當前頁面解析。

   // 假設當前頁面是 http://example.com/path/to/page/index.html
   
   // 絕對路徑是普通路徑：
   require.resolve('http://cdn.com/js/a');
   // => http://cdn.com/js/a.js
   
   // 根路徑是普通路徑：
   require.resolve('/js/b');
   // => http://example.com/js/b.js
   
   // use 中的相對路徑始終是普通路徑：
   seajs.use('./c');
     // => 加載的是 http://example.com/path/to/page/c.js
   
   seajs.use('../d');
     // => 加載的是 http://example.com/path/to/d.js

   Tips:

   頂級標識始終相對 base 基礎路徑解析。

   若是不設置，base 路徑默認就是 sea.js 庫文件所屬的路徑
   
       能夠經過 seajs.config({ base: '基礎路徑' }) 來配置基礎路徑
   
       絕對路徑和根路徑始終相對當前頁面解析。
   
       相對標識永遠相對於當前文件
   
       seajs.use 中的相對路徑始終相對當前頁面來解析。

5. module

   module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。

   module.id
   模塊的惟一標識，能夠經過 define 方法的第一個參數來指定，默認爲該模塊文件的絕對路徑
   
   module.uri
   模塊的絕對路徑
   
   module.dependencies
   dependencies 是一個數組，表示當前模塊的依賴
   
   module.exports
   當前模塊對外提供的接口對象
   
   至關於每一個模塊內部最終都執行了這麼一句話：return module.exports

   模塊與模塊之間的通訊接口

6. exports

   exports 僅僅是 module.exports 的一個引用。 也就是說修改了 exports 就至關於修改了 module.exports。

   可是一旦在 factory 內部給 exports 從新賦值，並不會改變 module.exports 的值。 所以給 exports 賦值是無效的。

   exports 和 module.exports 的區別：

   每一個模塊內部對外處處的接口對象始終都是 module.exports
   
   能夠經過修改 module.exports 或給它賦值改變模塊接口對象
   
   exports 是 module.exports 的一個引用，就比如在每個模塊定義最開始的地方寫了這麼一句代碼：var exports = module.exports
   
   關於這倆哥們兒的區別請分析一下代碼：
   
   var module = {
     exports: {}
   }
   
   function changeExports (exports, module) {
     // var exports = module.exports
        exports.foo = 'bar'
   
        // 這裏賦值拿不到，不要使用使用
        // exports = function () {}
        return module.exports
   }
   
   changeExports(module.exports, module)

   那爲啥要有 exports ？

   爲了開發體驗，API更友好，使用 exports 的時候，能夠少寫一個點兒。

   若是你實在分不清楚 exports 和 module.exports 之間的區別，就只記得 module.exports 就能夠了。

4. 如何將一個普通的模塊文件改造爲兼容 CMD 規範的模塊

if (typeof define === "function" && define.cmd) {

         // 有 Sea.js 等 CMD 模塊加載器存在
         define(function (require, exports, module) {
           // 使用 module.exports 向外暴露接口對象
      })
    }

 

 

分類:  javaScript