JS模組化程式設計總結

阿新 • • 發佈：2019-01-12

一、背景

隨著的網際網路技術的不斷髮展，瀏覽器逐漸成了集大成的CS客戶端，頁面功能在向系統級、軟體級靠攏的趨勢下，開發團隊也需要一些軟體工程的方法來開發WEB專案，如測試驅動、面向物件，而模組化程式設計更是成為一種急需應用的技術。

二、原因

為方便檔案管理、增加複用，我們需要細化JS檔案，每個檔案負責單一職能，稱之為模組，明確每個檔案的職能，當互動功能較複雜時，引用的檔案也越加龐大，此時我們就需要模組化管理。

如我們編寫一個模組元件Dialog.js，其依賴event.js / bootstrap.js / component.js，而event.js又依賴 base.js / core.js / el.js，bootstrap.js依賴 boot.js / under.js / almond.js，同理可能依賴更多的js，傳統方法我們用到Dialog.js時實際上需要引用9個js，如下

<html>
<body>
...
 <script src="/public/base.js"></script>
 <script src="/public/core.js"></script>
 <script src="/public/el.js"></script>
 <script src="/public/boot.js"></script>
 <script src="/public/under.js"></script>
 <script src="/public/almond.js" 
></script>
 <script src="/module/event.js"></script>
 <script src="/module/bootstrap.js"></script>
 <script src="/module/component.js"></script>
 <script src="/widget/dialog.js"></script>
</body>
</html>

我們將其細分，Dialog所依賴的每個js都負責了某一獨立功能，分開便於其它元件複用，也利於學習理解。

但將這9個js都到html裡顯示引用，工作量卻非常可觀，且不能弄錯路徑及載入順序，若後續Dialog.js又需要多引用一個js，所有的專案都要手動增加，且這樣依次同步載入下來會導致會佔用瀏覽器執行緒，可能導致假死。

三、作用

模組化的作用就是解決上面提到的兩點問題。

1、實現js檔案的非同步載入，避免瀏覽器假死。
2、管理模組之間的依賴，便於模組的維護

四、實現

模組化，就是把一個相對獨立的功能，單獨成一個檔案，可輸入指定依賴、輸出指定的函式，供外界呼叫，其它都是內部的。這樣即可方便不同的專案重複使用，也不會對其造成額外的影響。而既然要給不同的專案應用，特別像git上的模組是面向全球範圍的，必然要形成可遵循的規範，開發者和使用者都有據可尋。

目前通用javascript規範分為服務端（CommonJS），客戶端（AMD / CMD）。

CommonJS是針對javascript的服務端，一切模組都是通過require來同步載入呼叫， Nodejs採用的就是這個規範。

var module1 = require( 'module1'),
      module2 = require( 'module2' );

function module3(){
     ...
 }
exports.module3 = module3;

注：通過require載入module1、2，操作後通過exports導致module3。

這裡我們主要講客戶端模組

客戶端與服務端的不同在於非同步載入，之所以非同步是因為CommonJS規則應用在服務端時，檔案都是本地硬碟讀取，不受限於網路，等待硬碟讀取時間很短。而瀏覽器要考慮網速，若長時間等待會導致瀏覽器假死。

引用形式如下圖

五、AMD

是"Asynchronous Module Definition"的縮寫，意思就是"非同步模組定義"，

=============main.js===================
 <script src="js/require.js" data-main="js/Dialog"></script>

==============Dialog.js=======================
 define( ['event', 'bootstrap', 'component' ], function( event, bootstrap, component ){
      event.doSomthing();
      bootstrap.doSomthing();
       component.doSomthing();
      var Dialog = function(){
          ...
      }
      return {
          Dialog: Dialog
     }
 });

注：require接收兩個引數，第一個引數是陣列，含需載入的模組，第二個引數是回撥，在模組載入成功後執行，且回撥中的引數對應模組的載入順序，這樣主程式只需要載入一個JS檔案，Dialog.js即可，其自會去載入event.js等檔案，event.js再用同樣的方式去載入base.js等，使用者無需考慮Dialog載入了多少引用，也無法擔心其使用後會增減依賴。

六、CMD

 =============main.js===================
 <script src="js/sea.js"></script>    
<script>seajs.use("../static/hello/src/main")</script>

==============Dialog.js=======================
define( function( require, exports, module ){
    var event = require( 'event' );
    event.doSomthing();
    var bootstrap = require( 'bootstrap' );
    bootstrap.doSomthing();
    var component = require( 'component' );
    component.doSomthing();
    var Dialog = function(){
         ...
    }                    
     exports.Dialog = Dialog;
})

注：模組引用本身就在回撥裡，並且在使用前引用即可，所以sea.js強調的是懶載入，這也就是AMD和CMD之間唯一的區別。實際上，require.js也支援CMD的寫法，不過依賴前置是其官方推薦。我最初因為對國產和玉伯的支援敬佩，使用了seajs，近來為了弄清楚AMD，專案全部用了requirejs，雖然網上及seajs官方對兩種邏列了一些分別，但使用下來，感覺並無優劣。

七、UMD

因服務端與客戶端對模組化載入方式的不同，就會人想做一個相容的模組UMD（Universal Module Definition），來解決跨平臺的問題。但對於我們開發者來講實則沒有什麼意義，也不深入了。

八、require.js 使用

require.config({
      baseUrl: 'module/js',     //配置path下的統一目的，以便path中不會分別配置
      path: {                              //配置module路徑，以便引用時不用寫全路徑
          module1: 'module1',
          module2: 'module2',
          module3: 'http://www.site.com/module3'     //若引用的是第三方，可以全部全路徑
     },
      shim: {     //對不符合AMD規則的模組引用
          'underscore': {
               exports: '_'          //配置其原對外介面
          },
          'backbone': {
               deps: ['underscore', 'jquery'],     //配置其依賴項
               exports: 'Backbone'
         }
     }
 });

define( ['module1', 'module2' ], function( module1, module2 ){
      module1.doSomthing();
      module2.doSomthing();
      function module3(){
          ...
     }
      return {
          module3: module3
     }
 })

九、require.js 時間戳

require.js沒有找到可配置時間戳，可修改require.js原始檔中的load方法

 load: function (id, url) {
    url += '?' + timestamp;     
    req.load(context, id, url);     
},

新增 url += '?' + timestamp; 這一處語句，即為url新增timestamp，timestamp可以另外通過配置檔案配置。我使用nodejs開發，在服務端的config檔案配置 timestamp: '2015091112'，將其插入到客戶端 ejs檔案內

 <script>
     var timestamp = '<%= timestamp %>';
 </script>

這樣即可在 require.js 檔案內呼叫。

十、require.js 合併

官網提供了r.js用於該模組化的打包 https://github.com/jrburke/r.js
r.js是將通過require.js引用的模組化檔案都合併到一個檔案裡，以減少檔案載入數量。
專案參考 https://github.com/xiaolulu/mynodejs.git| d7a0f54705a10ac329dd2f62a7d569da2 |
首先下載r.js，可以到靜態檔案根目錄，新建build.js用於配置r.js，常見的配置如下


build.js

({ 
    appDir: './', //專案根目錄，給後面的baseUrl做參考;非必要項;預設為與r.js平級目錄
    dir: './min', //壓縮後的檔案的輸出目錄 
    baseUrl: './', //模組相對目錄，與後面的paths配置使用
    modules: [ 
            { name:'login'},
            { name: 'register' },
            { name: 'center' }
    ], 
    fileExclusionRegExp: /^(r|build)\.js|.*\.scss$/, //過濾檔案不壓縮
    optimizeCss: 'standard', //css的標準方式
    optimize: 'uglify', //設定是否壓縮;uglify(壓縮格式)|none(只合並不壓縮)
    removeCombined: true, //設定移除壓縮後的檔案
    paths: { //設定模組別名，方便引用，壓縮後require.js引用的模組路徑就在這裡定義的，不是require.config裡的
            md5: 'core/js/md5',
            validate: 'widget/validate/validate',
            all: 'public/js/all',
            login: 'module/issue/login/login',
            register: 'module/issue/register/register',
            center: 'module/user/center/center'
    }
})

shell執行 node r.js -o build.js

十一、almond

合併後所有原通過模組化載入的檔案都已經在一個檔案裡了，已經不需要require.js的大部分功能，但因合併後代碼裡還是有require / define的函式定義，這裡命令解析還是要有的，所以就有了almond.js（約15KB），其保留了require.js（約80KB）的子集，但不支援模組化載入，即對已經合併後的模組解析可以使用，減少程式碼量。

不過，其理念是好的，但實現方案還待改進，其執行後就會almond.js與前面合併後過的業務JS合併成一個檔案，直接用 src來引用，意味著每個頁面都需要的 almond.js將無法快取，所以當業務JS超過五個時，這個方案將沒有意義，有興趣可以自行到git上學習，這裡不在講述 https://github.com/jrburke/almond

轉載：https://segmentfault.com/a/1190000003780523

JS模組化程式設計總結

一、背景

二、原因

三、作用

四、實現

五、AMD

六、CMD

七、UMD

八、require.js 使用

九、require.js 時間戳

十、require.js 合併

十一、almond

JS模組化程式設計總結

js-模組化開發總結

JS模組化程式設計之AMD模型實現原理（Requirejs瀏覽器模型，nodejs伺服器模型）

JS模組化程式設計之AMD規範（一）

js模組化的總結

js模組化程式設計之徹底弄懂CommonJS和AMD/CMD！

點選按鈕刪除bootstrapTable選中行，js模組化及一些問題的總結

Javascript模組化程式設計之路——(require.js)

prism模組化問題總結(1)

prism模組化問題總結(2)

JS模組化(Module模式模組化,SeaJS工具模組化)

JavaScript模組化程式設計之AMD

require-js-模組化 CMD AMD

node,npm,webpack,vue-cli模組化程式設計安裝流程

JS模組化(一):CommonJS

模組化程式設計——小甲魚

C程式設計｜用函式實現模組化程式設計詳解（一）

node.js模組化思想初探

【requirejs】JS模組化工具requirejs教程

JS模組化開發規範

JS模組化程式設計總結

一、背景

二、原因

三、作用

四、實現

五、AMD

六、CMD

七、UMD

八、require.js 使用

九、require.js 時間戳

十、require.js 合併

十一、almond

相關推薦