前端AMD、CMD和commonJs-前端知識

本文轉載自查看原文 2018-04-16 16:59 1723 前端開發/ 小白必看/ AMD/ CMD

前端AMD和CMD是在模塊化的基礎上產生並且得到大幅度的引用的。

AMD 即Asynchronous Module Definition（點擊鏈接可以查看AMD面試題），中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規范；

CMD 即Common Module Definition ，中文名是同步模塊定義的意思，是SeaJs在推廣過程中對模塊規范化的定義的產出。該規范明確了模塊的基本書寫格式和基本交互規則

CommonJs:官方網址：http://www.commonjs.org/ CommonJs用在服務器端，AMD和CMD用在瀏覽器環境

這三者的主要作用是：

1.javaScript模塊化加載而生的

2.便於團隊的人員的協作，代碼不至於很亂

3.在網絡請求中的記載時間的優化

AMD使用方法：

AMDjavaScript不支持，所以出現我們經常用的requireJs,實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規范化的產出

requireJS主要解決兩個問題

多個js文件可能有依賴關系，被依賴的文件需要早於依賴它的文件加載到瀏覽器
js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應時間越長

具體寫法如下：

1.在文件中首先要引入require.js,

2.定義一個模塊

3.加載模塊

1 define(function(){
2     var keyboard = { 3 'init':function(){ 4 console.log(2); 5  } 6  } 7 return keyboard; 8 })

這是我們創建的一個文件keyboard.js;

<html>
    <head>
        <meta charset="utf-8">
        <title>requireJs</title>
        <script src="./require.js"></script>
    </head>
    <body>
        <div>代碼測試</div>
        <script>
          require(['./keyboard'],function(keyboard){ keyboard.init(); }) </script> </body> </html>

注意require的語法，這里引入是可以省略文件后綴.js的，后面function參數定義了這個模塊的名稱，函數內部直接調用就可以了。下面是編譯后的代碼，這里我們會看到我們引用的keyboard.js多了一個async屬性，這里實現了異步加載。

View Code

語法如下：

requireJS定義了一個函數 define，它是全局變量，用來定義模塊

define(id?, dependencies?, factory);

id：可選參數，用來定義模塊的標識，如果沒有提供該參數，腳本文件名（去掉拓展名）
dependencies：是一個當前模塊依賴的模塊名稱數組
factory：工廠方法，模塊初始化要執行的函數或對象。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模塊的輸出值

在頁面上使用require函數加載模塊

require([dependencies], function(){});

require()函數接受兩個參數

第一個參數是一個數組，表示所依賴的模塊
第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊

require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題

CMD使用方法：

1.引入seajs

2.定義模塊文件

3.引入模塊

4.seajsAPI：http://yslove.net/seajs/

代碼示例如下：

<html>
    <head>
        <meta charset="utf-8">
        <title>requireJs</title>
        <script src="./seajs.js"></script>
    </head>
    <body>
        <div>代碼測試</div>
        <script>
          seajs.use('./keyboard',function(keyboard){ keyboard.init(); }) </script> </body> </html>

/*define(function(){
    var keyboard = {
        'init':function(){
            console.log(2);
        }
    }
    return keyboard;
})*/
//seajs
define(function(require, exports, module) {
    
  // 模塊代碼
 console.log(require,exports,module); module.exports ={ 'init':function(){ console.log(2); } } });

/*define(function(){
    var keyboard = {
        'init':function(){
            console.log(2);
        }
    }
    return keyboard;
})*/
//seajs
/*define(function(require, exports, module) {
    
  // 模塊代碼
  console.log(require,exports,module);
  module.exports ={
     'init':function(){
            console.log(2);
        } 
  }

});*/
//seajs第二種定義
define(function(require, exports, module) {
    
  // 模塊代碼
 console.log(require,exports,module); return { 'init':function(){ console.log(2); } } });

從上面可以看出，通過seajs定義模塊時，需要注意寫法，一種是直接return一個對象，另一種是module.exports,再看一下瀏覽器解析的效果

<html><head>
        <meta charset="utf-8">
        <title>requireJs</title>
        <script src="./seajs.js"></script>
    </head>
    <body style="">
        <div>代碼測試</div>
        <script>
          seajs.use('./keyboard',function(keyboard){ keyboard.init(); }) </script> </body></html>

使用時，需要使用seajs.use(),更多用法，可以參考前面的api

CMD異步用法：

define(function(require, exports, module) {
    
  // 模塊代碼
 console.log(require,exports,module); return { 'init':function(){ var $body = document.getElementsByTagName('body')[0]; var html = '<div>這是一個提示樣式</div>'; $body.append(html); } } });

/*define(function(){
    var keyboard = {
        'init':function(){
            console.log(2);
        }
    }
    return keyboard;
})*/
//seajs
/*define(function(require, exports, module) {
    
  // 模塊代碼
  console.log(require,exports,module);
  module.exports ={
     'init':function(){
            console.log(2);
        } 
  }

});*/
//seajs第二種定義
define(function(require, exports, module) {
    var loading = ''; // 模塊代碼 require.async('./loading',function(loading){ loading = loading.init(); }); return { 'init':function(){ console.log(2); }, 'loadingInit':function(){ console.log(loading); } } });

<html>
    <head>
        <meta charset="utf-8">
        <title>requireJs</title>
        <script src="./seajs.js"></script>
    </head>
    <body>
        <div>代碼測試</div>
        <script>
          seajs.use('./keyboard',function(keyboard){ keyboard.init(); keyboard.loadingInit(); }) </script> </body> </html>

在編譯后的html中沒有加載loading.js,keyboard.js,但是在network中會有顯示，

<html><head>
        <meta charset="utf-8">
        <title>requireJs</title>
        <script src="./seajs.js"></script>
    </head>
    <body style="">
        <div>代碼測試</div>
        <script>
          seajs.use('./keyboard',function(keyboard){ keyboard.init(); keyboard.loadingInit(); }) </script> &lt;div&gt;這是一個提示樣式&lt;/div&gt;</body></html>

CommonJs：是主要為了JS在后端的表現制定的，他是不適合前端的，為什么這么說呢？前端主要的問題是1.帶寬，2.加載時需要通過網絡加載3.代碼需要從一個服務器端分發到多個客戶端執行

CommonJS定義的模塊分為:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}

require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，唯一的導出口；module對象就代表模塊本身。

區別：

1、AMD推崇依賴前置，在定義模塊的時候就要聲明其依賴的模塊
2、CMD推崇就近依賴，只有在用到某個模塊的時候再去require

本文參考：

前端模塊化

SeaJs

require.js

免責聲明！

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

猜您在找 AMD、CMD 和 CommonJS 的區別前端模塊化小總結—commonJs,AMD,CMD, ES6 的Module AMD、CMD、CommonJs和ES6的區別 JavaScript模塊化 --- Commonjs、AMD、CMD、es6 modules AMD、CMD、CommonJS、UMD、ESM（ JS模塊化規范） CommonJS, AMD, CMD是什么及區別--簡單易懂有實例前端模塊化，AMD與CMD的區別 js模塊化編程之徹底弄懂CommonJS和AMD/CMD！該如何理解AMD ，CMD，CommonJS規范--javascript模塊化加載學習總結 js模塊化編程之徹底弄懂CommonJS和AMD/CMD！