這篇文章給大家分享的是有關(guān)js中常用模塊化方案有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司長(zhǎng)期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為淳安企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)，淳安網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

                                                           本篇文章給大家?guī)淼膬?nèi)容是關(guān)于為什么需要模塊化？js中常用模塊化方案介紹，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

為什么需要模塊化

在ES6出現(xiàn)之前，JS語言本身并沒有提供模塊化能力，這為開發(fā)帶來了一些問題，其中最重要的兩個(gè)問題應(yīng)當(dāng)是全局污染和依賴管理混亂。

// file a.js
var name = 'aaa';
var sayName = function() {
    console.log(name);
};

上面的代碼中，我們兩次調(diào)用a.js所提供的sayName函數(shù)輸出了不同結(jié)果，很明顯這是因?yàn)閮蓚€(gè)文件都對(duì)變量name進(jìn)行了賦值，因此相互之間造成了影響。當(dāng)然我們可以在編寫代碼時(shí)注意不要定義已存在的變量名，但是當(dāng)一個(gè)頁(yè)面引用了10幾個(gè)幾百行的文件時(shí)，記住所有已經(jīng)定義過的變量顯然不太現(xiàn)實(shí)。

// file a.js
var name = getName();
var sayName = function() {
    console.log(name)
};

// file b.js
var getName = function() {
    return 'timo';
};

// Uncaught ReferenceError: getName is not defined

上面的代碼說明，多個(gè)文件有依賴關(guān)系時(shí)，我們需要確保其引入的順序，從而保證運(yùn)行某個(gè)文件時(shí)，其依賴已經(jīng)提前加載，可以想象，面對(duì)越大型的項(xiàng)目，我們需要處理的依賴關(guān)系也就越多，這既麻煩又容易出錯(cuò)。

而為了解決這些，社區(qū)中出現(xiàn)了許多為JS語言提供模塊化能力的規(guī)范，借助這些規(guī)范，能讓我們的開發(fā)更加方便安全。

常見模塊化方案

CommonJS

CommonJS是由社區(qū)提出的模塊化方案中的一種，Node.js遵循了這套方案。

基本寫法

// file a.js
var obj = {
    sayHi: function() {
        console.log('I am timo');
    };
};

module.exports obj;

// file b.js
var Obj = require('xxx/xxx/a.js');

Obj.sayHi(); // 'I am timo'

上面的代碼中，文件a.js是模塊的提供方，文件b.js是模塊調(diào)用方。

規(guī)范

1. 每個(gè)文件都是一個(gè)模塊;

2. 在模塊內(nèi)提供module對(duì)象，表示當(dāng)前模塊；

3. 模塊使用exports對(duì)外暴露自身的函數(shù)/對(duì)象/變量等；

4. 模塊內(nèi)通過require()方法導(dǎo)入其他模塊；

CommonJS的規(guī)范，簡(jiǎn)單來說就是上面4條，可以對(duì)照基本寫法中的例子理解一下，在實(shí)際實(shí)現(xiàn)中，Node.js雖然遵循CommonJS規(guī)范，但是仍然對(duì)其進(jìn)行了一些調(diào)整。

AMD

AMD是模塊化規(guī)范中的一種，RequireJS遵循了這套規(guī)范。

基本用法

 // file a.js
 define('module', ['m', './xxx/n.js'], function() {
    // code...
 })

上面的代碼中，文件a.js向外導(dǎo)出了模塊；

規(guī)范

AMD中，暴露模塊使用define函數(shù)

define(moduleName, [], callback);

如上面代碼，define函數(shù)共有三個(gè)參數(shù)

• moduleName該參數(shù)可以省略，表示該模塊的名字，一般作用不大

• ['name1', 'name2']，第二個(gè)參數(shù)是一個(gè)數(shù)組，表示當(dāng)前模塊依賴的其他模塊，如果沒有依賴模塊，該參數(shù)可以省略

• callback，第三個(gè)參數(shù)是必傳參數(shù)，是一個(gè)回調(diào)函數(shù)，內(nèi)部是當(dāng)前模塊的相關(guān)代碼

其他

ADM的特點(diǎn)是依賴前置，這是ADM規(guī)范與接下來要介紹的CMD規(guī)范最大的不同，依賴前置是指：在運(yùn)行當(dāng)前加載模塊回調(diào)前，會(huì)首先將所有依賴包加載完畢，也是就是define函數(shù)的第二個(gè)參數(shù)中指定的依賴包。

CDM

基本寫法

 define(function(require, exports, module) {   
    var a = require('./a')  
    a.doSomething();
    // code... 
    var b = require('./b') 
    // code...
})

上面代碼是CMD規(guī)范導(dǎo)出模塊的基本寫法；

規(guī)范

從寫法可以看出，CMD的寫法和AMD非常像，其主要區(qū)別是對(duì)于依賴加載時(shí)機(jī)的不同，上面已經(jīng)說過，AMD是依賴前置，而CMD規(guī)范推崇就近原則，簡(jiǎn)單說就是在模塊運(yùn)行前并不加載依賴，模塊運(yùn)行過程中，當(dāng)需要某個(gè)依賴時(shí)，再去進(jìn)行加載。

UMD

CommonJS、AMD、CMD并行的狀態(tài)下，就需要一種方案能夠兼容他們，這樣我們?cè)陂_發(fā)時(shí)，就不需要再去考慮依賴模塊所遵循的規(guī)范了，而UMD的出現(xiàn)就是為了解決這個(gè)問題。

基本寫法

(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;
}));

上面的代碼是UMD的基本寫法，從代碼就可以看出，其能夠同時(shí)支持CommonJS規(guī)范和AMD規(guī)范。

ES6 module

上面分別介紹了CommonJS、AMD、CMD和UMD，他們都是社區(qū)對(duì)于JS實(shí)現(xiàn)模塊化的貢獻(xiàn)，這個(gè)規(guī)范其產(chǎn)生的根本原因，都是JS語言自身沒有模塊化能力，而目前，在JS最新的語言規(guī)范ES6中，已經(jīng)為JS增加了模塊化能力，而JS自身的模塊化方案，完全能夠替代目前社區(qū)提出的各類規(guī)范，且能夠做到瀏覽器端和Node端通用。

ES6中的模塊化能力由兩個(gè)命令構(gòu)成：export和import，export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能。

export命令

ES6中一個(gè)文件就是一個(gè)模塊，模塊內(nèi)部的變量/函數(shù)等外部是無法訪問的，如果希望將內(nèi)部的函數(shù)/變量等對(duì)外暴露，供其他模塊進(jìn)行使用，就需要通過export命令進(jìn)行導(dǎo)出

// file a.js
export let a = 1;
export let b = 2;
export let c = 3;

// file b.js
let a = 1;
let b = 2;
let c = 3;

export {a, b, c}

// file c.js
export let add = (a, b) => {
    return a + b;
};

上面三個(gè)文件的代碼，都是通過export命令導(dǎo)出模塊內(nèi)容的示例，其中a.js文件和b.js文件都是導(dǎo)出模塊中的變量，作用完全一致但寫法不同，一般我們更推薦b.js文件中的寫法，原因是這種寫法能夠在文件最底部清楚地知道當(dāng)前模塊都導(dǎo)出了哪些變量。

import命令

模塊通過export命令導(dǎo)出變量/函數(shù)等，是為了讓其他模塊能夠?qū)肴ナ褂?，在ES6中，文件導(dǎo)入其他模塊是通過import命令進(jìn)行的

// file d.js
import {a, b, c} from './a.js';

上面的代碼中，我們引入了a.js文件中的變量a、b、c，import在引入其他模塊內(nèi)的函數(shù)/變量時(shí)，必須與原模塊所暴露出來的函數(shù)名/變量名一一對(duì)應(yīng)。
同時(shí)，import命令引入的值是只讀的，如果嘗試對(duì)其進(jìn)行修改，則會(huì)報(bào)錯(cuò)

import {a} d from './a.js';
a = 2; // Syntax Error : 'a' is read-only;

export default命令

從上面import的介紹可以看到，當(dāng)需要引入其他模塊時(shí)，需要知道此模塊暴露出的變量名/函數(shù)名才可以，這顯然有些麻煩，因此ES6還提供了一個(gè)import default命令

// file a.js

let add = (a, b) => {
    return a+b
};
export default add;

// file b.js
import Add from './a.js';

Add(1, 2); // 3

上面的代碼中，a.js通過export default命令導(dǎo)出了add函數(shù)，在b.js文件中引入時(shí)，可以隨意指定其名稱

export default命令是默認(rèn)導(dǎo)出的意思，既然是默認(rèn)導(dǎo)出，顯然只能有一個(gè)，因此每個(gè)模塊只能執(zhí)行一次export default命令，其本質(zhì)是導(dǎo)出了一個(gè)名為default的變量或函數(shù)。

感謝各位的閱讀！關(guān)于js中常用模塊化方案有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！