這篇文章主要幫助大家深入理解javascript模塊化，感興趣的小伙伴們可以參考一下

模塊化是一個(gè)通用的編程最佳實(shí)踐。程序的模塊化使我們可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊，從而提高代碼的利用效率，增加開發(fā)速度。

模塊就像積木，有了它，我們可以搭出各種各種功能樣式的程序。積木有什么特點(diǎn)？小而簡(jiǎn)單。同樣的，我們程序中的模塊也要做到這一點(diǎn)，確保自己創(chuàng)建的函數(shù)一次只完成一個(gè)工作，這樣其他開發(fā)者可以簡(jiǎn)單地調(diào)試與修改你的代碼，而不需瀏覽所有代碼才能弄清每一個(gè)代碼塊執(zhí)行了什么功能。只有做到像這樣地小而簡(jiǎn)單，才能實(shí)現(xiàn)其通用功能。

一、javascript模塊化的方法

1、函數(shù)封裝

JavaScript的作用域就是基于函數(shù)的，所以我們可以把函數(shù)作為模塊。

function fn1(){

  //code

}

function fn2(){

  //code

}

缺點(diǎn)："污染"了全局變量，無(wú)法保證不與其他模塊發(fā)生變量名沖突

2、對(duì)象

var myModule1 = {

  fn1: function(){

    //code

  },

  fn2: function(){

    //code

  }

}

缺點(diǎn)：會(huì)暴露所有模塊成員，內(nèi)部狀態(tài)可以被外部改寫

立即自執(zhí)行函數(shù)——推薦

var myModule = (function(){

  function fn1(){

    //code

  },

  function fn2(){

    //code

  },

  return {

    fn1: fn1,

    fn2: fn2

  };

})();

二、小而簡(jiǎn)單

關(guān)于小而簡(jiǎn)單，我們看一個(gè)例子，比如我們現(xiàn)在想編寫一個(gè)創(chuàng)建新鏈接的函數(shù)，并且為類型是"mailto"超鏈接添加一個(gè)class?？梢赃@樣做：

function addLink(text, url, parentElement) {

  var newLink = document.createElement('a');//創(chuàng)建a標(biāo)簽

  newLink.setAttribute('href', url);//為a標(biāo)簽設(shè)置href屬性

  newLink.appendChild(document.createTextNode(text));//為a標(biāo)簽添加文本

  if(url.indexOf("mailto:")==-1){

    newLink.className = 'mail';

  }

  parentElement.appendChild(newLink);//將a標(biāo)簽添加到頁(yè)面

}

這樣寫能夠工作，但你或許會(huì)發(fā)現(xiàn)自己又不得進(jìn)行其他的功能添加，于是，這個(gè)函數(shù)又不適用了。所以，函數(shù)越特殊，越難以適用于不同情形。

這里的函數(shù)寫法沒(méi)有達(dá)到模塊化的要求——一個(gè)函數(shù)只干一件事。我們將函數(shù)改編下：

function createLink(text,url) {

  var newLink = document.createElement('a');

  newLink.setAttribute('href', url);

  newLink.appendChild(document.createTextNode(text));

  return newLink;

}

這里createLink函數(shù)只做一件事——?jiǎng)?chuàng)建并返回要添加到頁(yè)面中的a標(biāo)簽（小而簡(jiǎn)單），這樣我們就可以在任何需要?jiǎng)?chuàng)建超鏈接的情況下調(diào)用這樣函數(shù)。

三、CommonJS

在瀏覽器環(huán)境下，沒(méi)有模塊也不是特別大的問(wèn)題，畢竟網(wǎng)頁(yè)程序的復(fù)雜性有限；但是在服務(wù)器端，一定要有模塊與操作系統(tǒng)和其他應(yīng)用程序互動(dòng)，否則根本沒(méi)法編程。雖然JavaScript在web端發(fā)展這么多年，但是第一個(gè)流行的模塊化規(guī)范卻由服務(wù)器端的JavaScript應(yīng)用帶來(lái)，CommonJS規(guī)范是由NodeJS發(fā)揚(yáng)光大，這標(biāo)志著JavaScript模塊化編程正式登上舞臺(tái)。

node.js的模塊系統(tǒng)，就是依據(jù)CommonJS規(guī)范實(shí)現(xiàn)的。在CommonJS中，有一個(gè)全局性方法require()，用于加載模塊。

加載模塊：

var math = require('math');

調(diào)用模塊：

math.add(2,3)

CommonJS規(guī)范不適用于瀏覽器環(huán)境，因?yàn)樗嬖谝粋€(gè)重大的局限，上例中第二行math.add(2, 3)必須要在math.js加載完成后才能運(yùn)行，而模塊都放在服務(wù)器端，所以可能要等很長(zhǎng)時(shí)間，等待時(shí)間取決于網(wǎng)速的快慢。

CommonJS規(guī)范適用于服務(wù)器端，因?yàn)閷?duì)于服務(wù)端來(lái)說(shuō)，所有的模塊都存放在本地硬盤，可以同步加載完成，等待時(shí)間就是硬盤的讀取時(shí)間

四、模塊應(yīng)該怎么定義和怎么加載?

AMD

Asynchronous Module Definition異步模塊定義,主要代表：require.js

目的：

（1）實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁(yè)失去響應(yīng)；

（2）管理模塊之間的依賴性，便于代碼的編寫和維護(hù)。

1、定義模塊

define(["./cart", "./inventory"], function(cart, inventory) {

  //通過(guò)[]引入依賴

  return {

    color: "blue",

    size: "large",

    addToCart: function() {

      inventory.decrement(this);

      cart.add(this);

    }

  }

}

);

2、加載模塊

require( ["some/module", "my/module", "a.js", "b.js"],

function(someModule,  myModule) {

  //This function will be called when all the dependencies

  //listed above are loaded. Note that this function could

  //be called before the page is loaded.

  //This callback is optional.

}

 );

CMD

Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的。主要代表：sea.js

1、定義模塊

define(function(require, exports, module) {

 // 通過(guò) require 引入依賴

 var $ = require('jquery');

 var Spinning = require('./spinning');

 // 通過(guò) exports 對(duì)外提供接口

 exports.doSomething = ...

 // 或者通過(guò) module.exports 提供整個(gè)接口

 module.exports = ...

});

2、加載模塊

seajs.use("../static/hello/src/main")

區(qū)別：

對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過(guò) RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。