首頁  >  文章  >  web前端  >  CommonJS的實例詳解

CommonJS的實例詳解

零下一度
零下一度原創
2017-07-21 09:16:361966瀏覽

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就近依賴,需要使用把模組變成字串解析一遍才知道依賴了那些模組

  • #

以上是CommonJS的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn