js兼容多種模塊規範，使用require加載JSLite方法

時間 2020-01-06

標籤兼容多種模塊規範使用 require 加載 jslite 方法欄目 JavaScript 简体版

原文原文鏈接

使用require加載JSLite、zepto、jQuery方法，它們是同類型的庫因此加載方式同樣，下面是一個實例。javascript

requirejs 引用實例方法

RequireJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統<script>標籤的腳本加載步驟。能夠用它來加速、優化代碼，但其主要目的仍是爲了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。html

目錄結構

去RequireJS官網下載，將require.js 放入到lib目錄；下載JSLite 1.1.5 放到lib目錄中。github

├── app.js
├── index.html
└── lib
    ├── JSLite.js
    ├── extend-jslite.js
    └── require.js

文件內容

app.jsweb

requirejs.config({
  paths: {
      jslite:'lib/extend-jslite',
      // zepto:'lib/zepto'
  }
});
require(['jslite'], function(j) {
    console.log("z,$:",j('body'))
});

index.html編程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" data-main="app.js" src="lib/require.js"></script>
</head>
<body>
</body>
</html>

extend-jslite.jsapi

define([
    'lib/JSLite'
], function(a) {
    "use strict";
    window.JSLite = JSLite
    // If `$` or `jQuery` is not yet defined, point them to `JSLite`
    '$' in window || (window.$ = JSLite)
    'jQuery' in window || (window.jQuery = JSLite)
    return JSLite;
});

競爭者

systemjs數組
browserify
webpack | github 我更喜歡這個玩意兒

webpack

AMD 或者 CommonJS – 兩個它都支持。構建配置比 RequireJS 更加易於理解，也更具訪問性。經過它的熱插拔特性和內置的本地靜態服務器可讓發佈更加便捷。

名詞解釋

CommonJS

CommonJs 是服務器端模塊的規範，Node.js採用了這個規範。

根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。

模塊文件foobar.js

//私有變量
var test = 123;
//公有方法
function foobar () {
    this.foo = function () {
        // do someing ...
    }
    this.bar = function () {
        //do someing ...
    }
}
 
//exports對象上的方法和變量是公有的
var foobar = new foobar();
exports.foobar = foobar;

require方法默認讀取foobar.js文件，能夠省略js後綴

var test = require('./foobar').foobar;
test.bar();

CommonJS 加載模塊是同步的，因此只有加載完成才能執行後面的操做。像Node.js主要用於服務器的編程，加載的模塊文件通常都已經存在本地硬盤，因此加載起來比較快，不用考慮異步加載的方式，因此CommonJS規範比較適用。但若是是瀏覽器環境，要從服務器加載模塊，這是就必須採用異步模式。因此就有了 AMD CMD 解決方案。
A Gentle Browserify Walkthrough

AMD

AMD(Asynchromous Module Definition)是 RequireJS 在推廣過程當中對模塊定義的規範化產出
AMD異步加載模塊。它的模塊支持對象函數構造器字符串 JSON等各類類型的模塊。
適用AMD規範適用define方法定義模塊。

//經過數組引入依賴 ，回調函數經過形參傳入依賴
define(['someModule1', 'someModule2'], function (someModule1, someModule2) {
 
    function foo () {
        /// someing
        someModule1.test();
    }
 
    return {foo: foo}
});

AMD規範容許輸出模塊兼容CommonJS規範，這時define方法以下：

define(function (require, exports, module) {
     
    var reqModule = require("./someModule");
    requModule.test();
     
    exports.asplode = function () {
        //someing
    }
    return exports;
});

CMD

CMD是SeaJS 在推廣過程當中對模塊定義的規範化產出

CMD和AMD的區別有如下幾點：

1.對於依賴的模塊AMD是提早執行，CMD是延遲執行。不過RequireJS從2.0開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不經過）。

2.CMD推崇依賴就近，AMD推崇依賴前置。

//AMD
define(['./a','./b'], function (a, b) {
 
    //依賴一開始就寫好
    a.test();
    b.test();
});
 
//CMD
define(function (requie, exports, module) {
     
    //依賴能夠就近書寫
    var a = require('./a');
    a.test();
     
    ...
    //軟依賴
    if (status) {
     
        var b = requie('./b');
        b.test();
    }
});

雖然 AMD也支持CMD寫法，但依賴前置是官方文檔的默認模塊定義寫法。

3.AMD的api默認是一個當多個用，CMD嚴格的區分推崇職責單一。例如：AMD裏require分全局的和局部的。CMD裏面沒有全局的 require,提供 seajs.use()來實現模塊系統的加載啓動。CMD裏每一個API都簡單純粹。
區別的詳細解釋

UMD兼容多種模塊規範

umd是AMD和CommonJS的糅合
AMD 瀏覽器第一的原則發展異步加載模塊。
CommonJS 模塊以服務器第一原則發展，選擇同步加載，它的模塊無需包裝(unwrapped modules)。
這迫令人們又想出另外一個更通用的模式UMD （Universal Module Definition）。但願解決跨平臺的解決方案。

UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式。
在判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。

兼容多種模塊規範

(function (root, factory) {
    var JSLite = factory(root);
    if (typeof define === 'function' && define.amd) {
        // AMD
        // define([], factory);
        define('JSLite', function() { return JSLite; });
    } else if (typeof exports === 'object') {
        // Node.js
        module.exports = JSLite;
    } else {
        // Browser globals
        root.JSLite = JSLite;
    }
})(this, function () {
    //module ...
});

兼容多種模塊規範

;(function(name,definition){
    //檢測上下文環境是否爲AMD或CMD
    var hasDefine = typeof define === 'function',
        // 檢測上下文環境是否爲Node
        hasExports = typeof module !== 'function' && module.exports;
    if(hasDefine){
        //AMD環境或CMD環境
        define(definition);
    }else if(hasExports){
        //定義爲普通Node模塊
        module.exports = definition();
    }else{
        //將模塊的執行結果掛在window變量中，在瀏覽器中this指向window對象
        this[name] = definition();
    }

})('hello',function(){
    var hello = function(){}
    return hello
})

關注公衆號