1. 程式人生 > >js模塊化規範

js模塊化規範

commonj class nod amd 加載 定義 同步 固定 module

1. CommonJS

  • 用於服務端模塊化編程,比如nodejs就采用此規範;
  • 一個文件就是一個模塊,require方法用來加載模塊,該方法讀取一個文件並執行,最後返回文件內部的module.exports對象;
  • require是默認讀取.js文件的,所以require(模塊名)可以不寫後綴;
  • 同步加載,由於服務端加載的模塊一般在本地,所以可以這樣;但是在客戶器端如果一個模塊過大就會導致頁面“假死”;
  • module.exports屬性表示當前模塊對外輸出的接口,其他文件加載該模塊,實際上就是讀取module.exports變量;為了方便也可以用exports,exports指向module.exports;即exports = module.exports = {}
  • exports.xxx相當於在導出的對象上添加屬性,該屬性對調用模塊可見;
  • exports = 相當於給exports重新賦值,這樣就切斷了和module.exports的關聯,調用模塊就不能訪問exports的對象及其屬性;

2. AMD

  • 加載模塊:require([module], function(module){});
  • 定義模塊:define([module], function(module){});module為依賴模塊;
  • require.js(前端模塊化管理的工具庫)實現js文件的異步加載,避免網頁失去響應;管理模塊之間的依賴性,便於代碼的編寫和維護。
  • 依賴前置,盡早的執行模依賴塊,執行順序不一定是先1後2;
  • 加載非規範的模塊
    require.config({
        baseUrl: "js/lib",
        paths: {
            "jquery": "jquery.min",
        "underscore": "underscore.min",
        "backbone": "backbone.min"
      },
        shim: {
            ‘underscore‘:{
                exports: ‘_‘
       },
       ‘backbone‘: {
        deps: [‘underscore‘, ‘jquery‘],
        exports: ‘Backbone‘
       }
     }
    });
    
    // exports值(輸出的變量名),表明這個模塊外部調用時的名稱;deps數組,表明該模塊的依賴性

3. CMD

  • define(function(require, exports, module){
    var a = require(‘a‘);
    a.foo();
    };
  • Sea.js
  • 依賴就近,且在真正需要使用依賴模塊時才執行該模塊,順序固定;
  • AMD和CMD最大的區別是對依賴模塊的執行時機處理不同,而不是加載的時機或者方式不同,二者皆為異步加載模塊;
  • AMD依賴前置,js可以方便知道依賴模塊是誰,立即加載;而CMD就近依賴,需要使用把模塊變為字符串解析一遍才知道依賴了那些模塊

js模塊化規範