非模塊開發

常用的模塊化開發

CommonJS

AMD

CMD

UMD

ESmodule

非模塊開發

index.html引入1.js檔案和2.js檔案

1.js

const moduleA = (function(){

    //這里定義變數和函式

    return obj = {
        //后續還要使用的變數和函式
    }
})()

2.js

可以使用1.js的變數和函式

常用的模塊化開發

不再需要依賴同一個html檔案

優點:

避免變數重名,也避免污染全域變數
提高代碼復用性
更利于維護
更方便使用別人的代碼,依賴關系明確

CommonJS

js原生不支持此規范,在未被webpack等工具打包的情況下,只能在node.js環境運行

模塊只有一個出口，module.exports物件，我們需要把模塊希望輸出的內容放入該物件

//0.js

let a = 10;
let b = 'string';
let c = true;
let d = function(){return 1};

exports.a = a;
exports.b = b;
exports.c = c;
exports.d = d;

匯出的永遠是module.exports物件

exports和module.exports是關系是二者指向同一個物件

加載模塊用require方法，讀取一個檔案并且執行，回傳檔案內部的module.exports物件

const obj = require('./0.js');

console.log(obj);

require匯入陳述句執行時會將參考的檔案先執行再引入,

1.js引入0.js 2.js引入1.js

如果2.js再引入0.js 0.js不會重復執行

AMD

Asynchronous Module Definition 受CommonJS啟發,為了滿足web開發的需要,異步的模塊化規范誕生.

特點和CommonJS相似:

多次參考不會重復執行
原生JS不支持,不能在node.js環境中運行,運行在瀏覽器端

CMD

Common Module Definition

AMD和CMD都是異步加載模塊,最大的區別是對依賴模塊的執行時機處理不同:

AMD在加載模塊完成后就會執行該模塊，所有模塊都加載執行完后會進入require的回呼函式

這樣的效果就是依賴模塊的執行順序和書寫順序不一定一致，看網路速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴加載完成后才執行，

CMD加載完某個依賴模塊后并不執行，只是下載而已，在所有依賴模塊加載完成后進入主邏輯，遇到require陳述句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是完全一致的，

AMD和CMD詳細了解

UMD

Universal Module Definition

嚴格上說，umd不能算是一種模塊規范，因為它沒有模塊定義和呼叫，這是AMD和CommonJS（服務端模塊化規范)的結合體，保證模塊可以被amd和commonjs呼叫，

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // 使用AMD規范
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node環境,使用CommonJS規范
        module.exports = factory(require('jquery'));
    } else {
        // 瀏覽器全域變數(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    方法
    function myFunc(){};

    //    暴露公共方法
    return myFunc;
});

整合了commonJS和AMD,也使得寫法更為復雜.

ESmodule

特點:

匯入陳述句會提升至頂部最先執行
多次匯入,不會重復執行
采用ES Module將自動采用嚴格模式：use strict

匯出關鍵字export

//方式一
    //在宣告陳述句前加exports關鍵字
export const a = 10;

//方式二
    //將所有要匯出的放入export后的{}中
const b = 10;
const c = {name:'zs'};

export {b,c}

//方式三
    //匯出時取別名
const name = 'zhang';

export {
    name as firstName
}

一個js檔案中只能有一個默認匯出

//方式四
    //默認匯出

export default function(a,b){
    return a+b;
}

匯入關鍵字import

非默認匯出的匯入

import {a,b,c} form './0.js';

//全部匯出
import * as obj form './0.js';

默認匯出的匯入

//默認匯出不需要使用{},且需要自己起名
import obj form './0.js';

和commonJS比較

CommonJS模塊加載js是運行時加載,是同步的,
ESModule模塊加載js是編譯時加載,是異步的
CommonJS通過module.exports匯出的是一個物件
ESModule通過export匯出的是變數本身的參考

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305995.html

標籤：其他

上一篇：模塊化筆記

下一篇：前端模塊化CommonJS