關於javascript模塊化簡史的信息

本文目錄一覽：

• 1、javascript模塊化是什麼及其優缺點介紹
• 2、javascript最新的版本是什麼？引入了一些什麼新的特性
• 3、如何正確理解javascript的模塊化
• 4、JS技術是什麼技術？
• 5、JavaScript腳本是什麼？
• 6、如何理解前端模塊化

javascript模塊化是什麼及其優缺點介紹

如今backbone、emberjs、spinejs、batmanjs

等MVC框架侵襲而來。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模塊化的JavaScript撲面而

來。web前端已經演變成大前端，web前端的發展速度之快。

1)我們來看看什麼是模塊化？

模塊化是一種將系統分離成獨立功能部分的方法，可將系統分割成獨立的功能部分，嚴格定義模塊介面、模塊間具有透明性。javascript中的模塊在一些C、PHP、java中比較常見:

c中使用include 包含.h文件;php中使用require_once包含.php文件

java使用import導入包

此中都有模塊化的思想。

2)模塊化的優缺點：

a優點：

可維護性

1.靈活架構，焦點分離

2.方便模塊間組合、分解

3.方便單個模塊功能調試、升級

4.多人協作互不干擾

可測試性

1.可分單元測試

b缺點：

性能損耗

1.系統分層，調用鏈會很長

2.模塊間通信,模塊間發送消息會很耗性能

3)最近的項目中也有用到模塊化，

使用的是seajs,但是當引用到jquery,jquery easyui/或者jquery

UI組件時,有可能會用到很多jquery插件，那這樣要是實現一個很複雜的交互時，模塊間的依賴會很多，使用define（）方法引入模塊會很多，不知

有么有什麼好的方法？

4)附：

內聚度

內聚度指模塊內部實現，它是信息隱藏和局部化概念的自然擴展，它標誌著一個模塊內部各成分彼此結合的緊密程度。好處也很明顯，當把相關的任務分組後去閱讀就容易多了。 設計時應該儘可能的提高模塊內聚度，從而獲得較高的模塊獨立性。

耦合度

耦合度則是指模塊之間的關聯程度的度量。耦合度取決於模塊之間介面的複雜性，進入或調用模塊的位置等。與內聚度相反，在設計時應盡量追求鬆散耦合的系統。

javascript最新的版本是什麼？引入了一些什麼新的特性

EMCAScript6（ES6）是最新的Javascript，它包含了一些很棒的新特性。這些特性擁有不同程度的複雜性，對於簡單的腳本和複雜的應用程序都非常的有用。

增加的新特性：

1.箭頭操作符

如果你會C#或者Java，你肯定知道lambda表達式，ES6中新增的箭頭操作符=便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=outputs。

我們知道在JS中回調是經常的事，而一般回調又以匿名函數的形式出現，每次都需要寫一個function，甚是繁瑣。當引入箭頭操作符後可以方便地寫回調了。

2.類的支持

ES6中添加了對類的支持，引入了class關鍵字（其實class在JavaScript中一直是保留字，目的就是考慮到可能在以後的新版本中會用到，現在終於派上用場了）。JS本身就是面向對象的，ES6中提供的類實際上只是JS原型模式的包裝。現在提供原生的class支持後，對象的創建，繼承更加直觀了，並且父類方法的調用，實例化，靜態方法和構造函數等概念都更加形象化。

3.增強的對象字面量

對象字面量被增強了，寫法更加簡潔與靈活，同時在定義對象的時候能夠做的事情更多了。具體表現在：

(1).可以在對象字面量裡面定義原型

(2).定義方法可以不用function關鍵字

(3).直接調用父類方法

4.字元串模板

字元串模板相對簡單易懂些。ES6中允許使用反引號 ` 來創建字元串，此種方法創建的字元串裡面可以包含由美元符號加花括弧包裹的變數${vraible}。如果你使用過像C#等後端強類型語言的話，對此功能應該不會陌生。

5.解構

自動解析數組或對象中的值。比如若一個函數要返回多個值，常規的做法是返回一個對象，將每個值做為這個對象的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然後數組中的值會自動被解析到對應接收該值的變數中。

6.參數默認值，不定參數，拓展參數

(1).默認參數值

現在可以在定義函數的時候指定參數的默認值了，而不用像以前那樣通過邏輯或操作符來達到目的了。

(2).不定參數

不定參數是在函數中使用命名參數同時接收不定數量的未命名參數。這只是一種語法糖，在以前的JavaScript代碼中我們可以通過arguments變數來達到這一目的。不定參數的格式是三個句點後跟代表所有不定參數的變數名。比如下面這個例子中，…x代表了所有傳入add函數的參數.

(3).拓展參數

拓展參數則是另一種形式的語法糖，它允許傳遞數組或者類數組直接做為函數的參數而不用通過apply。

6.let與const 關鍵字

可以把let看成var，只是它定義的變數被限定在了特定範圍內才能使用，而離開這個範圍則無效。const則很直觀，用來定義常量，即無法被更改值的變數。

7.for of 值遍歷

我們都知道for in 循環用於遍曆數組，類數組或對象，ES6中新引入的for of循環功能相似，不同的是每次循環它提供的不是序號而是值。

8.模塊

在ES6標準中，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進行模塊化的概念是在一些三方規範中流行起來的，比如CommonJS和AMD模式。

9.Map，Set 和 WeakMap，WeakSet

這些是新加的集合類型，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來檢查某個屬性是屬於原型鏈上的呢還是當前對象的。同時，在進行屬性值添加與獲取時有專門的get，set方法。

10.Proxies

Proxy可以監聽對象身上發生了什麼事情，並在這些事情發生後執行一些相應的操作。一下子讓我們對一個對象有了很強的追蹤能力，同時在數據綁定方面也很有用處。

11.Symbols

我們知道對象其實是鍵值對的集合，而鍵通常來說是字元串。而現在除了字元串外，我們還可以用symbol這種值來做為對象的鍵。Symbol是一種基本類型，像數字，字元串還有布爾一樣，它不是一個對象。Symbol 通過調用symbol函數產生，它接收一個可選的名字參數，該函數返回的symbol是唯一的。之後就可以用這個返回值做為對象的鍵了。Symbol還可以用來創建私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。

12.Math，Number，String，Object 的新API

對Math,Number,String還有Object等添加了許多新的API。下面代碼同樣來自es6features，對這些新API進行了簡單展示。

13.Promises

Promises是處理非同步操作的一種模式，之前在很多三方庫中有實現，比如jQuery的deferred 對象。當你發起一個非同步請求，並綁定了.when(), .done()等事件處理程序時，其實就是在應用promise模式。

如何正確理解javascript的模塊化

模塊化在項目中十分的重要，一個複雜的項目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費時又耗力。但是引用別人編寫模塊的前提是要有統一的「打開姿勢」，如果每個人有各自的寫法，那麼肯定會亂套，下面介紹幾種JS的模塊化的規範。

一:模塊化進程一：script標籤

這是最原始的 JavaScript 文件載入方式，如果把每一個文件看做是一個模塊，那麼他們的介面通常是暴露在全局作用域下，也就是定義在 window 對象中，不同模塊的介面調用都是一個作用域中，一些複雜的框架，會使用命名空間的概念來組織這些模塊的介面。

缺點:

1、污染全局作用域

2、開發人員必須主觀解決模塊和代碼庫的依賴關係

3、文件只能按照script標籤的書寫順序進行載入

4、在大型項目中各種資源難以管理，長期積累的問題導致代碼庫混亂不堪

二:模塊化進程二：CommonJS規範

該規範的核心思想是允許模塊通過require方法來同步載入所要依賴的其他模塊，然後通過 exports 或 module.exports 來導出需要暴露的介面。

require(“module”);

require(“../file.js”);

exports.doStuff = function(){};

module.exports = someValue;

優點：

1、簡單並容易使用

2、伺服器端模塊便於重用

缺點:

1、同步的模塊載入方式不適合在瀏覽器環境中，同步意味著阻塞載入，瀏覽器資源是非同步載入的

2、不能非阻塞的並行載入多個模塊

module.exports與exports的區別

1、exports 是指向的 module.exports 的引用

2、module.exports 初始值為一個空對象 {}，所以 exports 初始值也是 {}

3、require() 返回的是 module.exports 而不是 exports

exports示例：

// app.js

var circle = require(‘./circle’);

console.log(circle.area(4));

// circle.js

exports.area = function(r){

return r * r * Math.PI;

}

module.exports示例：

// app.js

var area = require(‘./area’);

console.log(area(4));

// area.js

module.exports = function(r){

return r * r * Math.PI;

}

錯誤的情況：

// app.js

var area = require(‘./area’);

console.log(area(4));

// area.js

exports = function(r){

return r * r * Math.PI;

}

其實是對 exports 進行了覆蓋，也就是說 exports 指向了一塊新的內存（內容為一個計算圓面積的函數），也就是說 exports 和 module.exports 不再指向同一塊內存，也就是說此時 exports 和 module.exports 毫無聯繫，也就是說 module.exports 指向的那塊內存並沒有做任何改變，仍然為一個空對象{}，也就是說area.js導出了一個空對象，所以我們在 app.js 中調用 area(4) 會報 TypeError: object is not a function 的錯誤。

總結：當我們想讓模塊導出的是一個對象時， exports 和 module.exports 均可使用（但 exports 也不能重新覆蓋為一個新的對象），而當我們想導出非對象介面時，就必須也只能覆蓋 module.exports 。

三:模塊化進程三：AMD規範

由於瀏覽器端的模塊不能採用同步的方式載入，會影響後續模塊的載入執行，因此AMD(Asynchronous Module Definition非同步模塊定義)規範誕生了。

AMD標準中定義了以下兩個API

1、require([module], callback);

2、define(id, [depends], callback);

require介面用來載入一系列模塊，define介面用來定義並暴露一個模塊。

示例：

define(“module”, [“dep1”, “dep2”], function(d1, d2){

return someExportedValue;

});

require([“module”, “../file”], function(module, file){ /* … */ });

優點：

1、適合在瀏覽器環境中非同步載入模塊

2、可以並行載入多個模塊

缺點：

1、提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢

2、不符合通用的模塊化思維方式，是一種妥協的實現

四:模塊化進程四：CMD規範

CMD(Common Module Definition)規範和AMD很相似，盡量保持簡單，並與CommonJS和Node.js的 Modules 規範保持了很大的兼容性。在CMD規範中，一個模塊就是一個文件。

示例：

define(function(require, exports, module){

var $ = require(‘jquery’);

var Spinning = require(‘./spinning’);

exports.doSomething = …

module.exports = …

})

優點：

1、依賴就近，延遲執行

2、可以很容易在 Node.js 中運行

缺點：

1、依賴 SPM 打包，模塊的載入邏輯偏重

AMD和CMD的區別

AMD和CMD起來很相似，但是還是有一些細微的差別，讓我們來看一下他們的區別在哪裡：

1、對於依賴的模塊，AMD是提前執行，CMD是延遲執行。

2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個模塊的時候再去require。看代碼：

// AMD

define([‘./a’, ‘./b’], function(a, b){ // 依賴必須一開始就寫好

a.doSomething()

// 此處略去 100 行

b.doSomething()

…

});

// CMD

define(function(require, exports, module){

var a = require(‘./a’)

a.doSomething()

// 此處略去 100 行

var b = require(‘./b’)

// 依賴可以就近書寫

b.doSomething()

// …

});

3、AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。

五:模塊化進程五：ES6模塊化

EcmaScript6標準增加了JavaScript語言層面的模塊體系定義。ES6 模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關係，以及輸入和輸出的變數。CommonJS和AMD模塊，都只能在運行時確定這些東西。

在 ES6 中，我們使用export關鍵字來導出模塊，使用import關鍵字引用模塊。需要說明的是，ES6的這套標準和目前的標準沒有直接關係，目前也很少有JS引擎能直接支持。因此Babel的做法實際上是將不被支持的import翻譯成目前已被支持的require。

儘管目前使用import和require的區別不大(本質上是一回事)，但依然強烈推薦使用import關鍵字，因為一旦JS引擎能夠解析ES6的import關鍵字，整個實現方式就會和目前發生比較大的變化。如果目前就開始使用import關鍵字，將來代碼的改動會非常小。

示例：

import “jquery”;

export functiondoStuff(){}

module “localModule” {}

優點：

1、容易進行靜態分析

2、面向未來的 EcmaScript 標準

缺點：

1、原生瀏覽器端還沒有實現該標準

2、全新的命令字，新版的 Node.js才支持

JS技術是什麼技術？

JS技術是JavaScript腳本代碼特效的簡稱，是一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，是在HTML網頁上使用，用來給HTML網頁增加動態功能。

在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript，設計人員為了方便交流就去簡稱JS技術。

JavaScript腳本是什麼？

javascript

Javascript是一種由Netscape的LiveScript發展而來的腳本語言，主要目的是為了解決伺服器終端語言，比如Perl，遺留的速度問題。當時服務端需要對數據進行驗證，由於網路速度相當緩慢，只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了數據驗證的基本功能。

歷史

在1992年，Nombas開始開發一種嵌入式腳本語言，叫做C-minus-minus(Cmm)。[待續…

能夠具有交互性，能夠包含更多活躍的元素，就有必要在網頁中嵌入其它的技術。如：Javascript、VBScript、Document Object Model（文件目標模塊）、Layers和 Cascading Style Sheets（CSS），這裡主要講Javascript。那麼Javascript是什麼東東？Javascript就是適應動態網頁製作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用於Internet網頁製作上。 Javascript是由 Netscape公司開發的一種腳本語言（scripting language），或者稱為描述語言。在HTML基礎上，使用Javascript可以開發互動式Web網頁。Javascript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關係，使網頁包含更多活躍的元素和更加精彩的內容。 運行用Javascript編寫的程序需要能支持Javascript語言的瀏覽器。Netscape公司 Navigator 3．0以上版本的瀏覽器都能支持 Javascript程序，微軟公司 Internet Explorer 3．0以上版本的瀏覽器基本上支持Javascript。微軟公司還有自己開發的Javascript，稱為JScript。 Javascript和Jscript基本上是相同的，只是在一些細節上有出入。 Javascript短小精悍， 又是在客戶機上執行的，大大提高了網頁的瀏覽速度和交互能力。 同時它又是專門為製作Web網頁而量身定做的一種簡單的編程語言。

雖然，在Dreamweaver的Behaviors可以為我們方便地使用Javascript程序而不用編寫代碼，但我們自己了解了Javascript的編程方法後，將能更加方便靈活地應用，也使Javascript的代碼更簡練。本專題通過對一系列典型程序的剖析，使你快速地掌握Javascript的編程技巧，設計出質量上乘的動態網頁打下堅實的基礎。在此之前，我們先了解一些Javascript 的基本概念。

JavaScript 有什麼特點

JavaScript 使網頁增加互動性。JavaScript 使有規律地重複的HTML文段簡化，減少下載時間。JavaScript 能及時響應用戶的操作，對提交表單做即時的檢查，無需浪費時間交由 CGI 驗證。JavaScript 的特點是無窮無盡的，只要你有創意。

Java 與 JavaScript 有什麼不同

很多人看到 Java 和 JavaScript 都有「Java」四個字，就以為它們是同一樣東西，連我自己當初也是這樣。其實它們是完完全全不同的兩種東西。Java，全稱應該是 Java Applet，是嵌在網頁中，而又有自己獨立的運行窗口的小程序。Java Applet 是預先編譯好的，一個 Applet 文件（.class）用 Notepad 打開閱讀，根本不能理解。Java Applet 的功能很強大，可以訪問 http、ftp等協議，甚至可以在電腦上種病毒（已有先例了）。相比之下，JavaScript 的能力就比較小了。JavaScript 是一種「腳本」（「Script」），它直接把代碼寫到 HTML 文檔中，瀏覽器讀取它們的時候才進行編譯、執行，所以能查看 HTML 源文件就能查看JavaScript 源代碼。JavaScript 沒有獨立的運行窗口，瀏覽器當前窗口就是它的運行窗口。它們的相同點，我想只有同是以 Java 作編程語言一點了。

開發 JavaScript 該用什麼軟體

一個 JavaScript 程序其實是一個文檔，一個文本文件。它是嵌入到 HTML 文檔中的。所以，任何可以編寫 HTML 文檔的軟體都可以用來開發 JavaScript。在此我推薦大家用 FrontPage 2000 附帶的 Microsoft 腳本編輯器（在 FrontPage 菜單 | 工具 | 宏 | Microsoft 腳本編輯器）。它是個像 Visual Basic / C++ 一樣的程序開發器，能對正在輸入的語句作出簡要提示。配合 FrontPage 2000，使工作量大大減少。

一、Javascript在網頁的用法

Javascript加入網頁有兩種方法：

1、直接加入HTML文檔

這是最常用的方法，大部分含有Javascript的網頁都採用這種方法，如：

script language=”Javascript”

!–

document.writeln(“這是Javascript！採用直接插入的方法！”);

//-Javascript結束–

/script

在這個例子中，我們可看到一個新的標籤： script……/script，而script language=”Javascript」 用來告訴瀏覽器這是用Javascript編寫的程序，需要調動相應的解釋程序進行解釋。

HTML的注釋標籤!–和–：用來去掉瀏覽器所不能識別的Javascript源代碼的，這對不支持 Javascript 語言的瀏覽器來說是很有用的。

//-Javascript結束：雙斜杠表示 Javascript的注釋部分，即從//開始到行尾的字元都被忽略。 至於程序中所用到的document．write（）函數則表示將括弧中的文字輸出到窗口中去， 這在後面將會詳細介紹。 另外一點需要注意的是，script……/script的位置並不是固定的，可以包含在head……/head 或body…../body中的任何地方。

2、引用方式 如果已經存在一個Javascript源文件（以js為擴展名），則可以採用這種引用的方式，以提高程序代碼的利用率。其基本格式如下：

script src＝url language=”Javascript”/script

其中的Url就是程序文件的地址。同樣的，這樣的語句可以放在HTML文檔頭部或主體的任何部分。 如果要實現「直接插入方式」中所舉例子的效果，可以首先創建一個Javascript源代碼文件「Script.js」，其內容如下：

document.writeln(“這是Javascript！採用直接插入的方法！”);

在網頁中可以這樣調用程序：script src＝”Script.js” language=”Javascript”/script 。

二、Javascript基本概念

在這裡只作簡單介紹，在以後的例子中結程序再作具體解釋其作用。

1、運算符

運算符就是完成操和的一系列符號，它有七類：

賦值運算符、算術運算符、比較運算符、邏輯運算符、條件運算、位操作運算符和字元串運算符。

2、表達式

運算符和操作數的組合稱為表達式，通常分為四類：賦值表達式、算術表達式、布爾表達式和字元串表達式。

3、語句

Javascript程序是由若干語句組成的，語句是編寫程序的指令。Javascript提供了完整的基本編程語句，它們是：

賦值語句、switch選擇語句、while循環語句、for循環語句、do while循環語句、break循環中止語句和continue循環中斷語句。

4、函數

函數是命名的語句段，這個語句段可以被當作一個整體來引用不著和執行。使用函數要注意以下幾點：

1）函數由關鍵字function定義；

2）函數必須先定義後使用，否則將出錯；

3）函數名是調用函數時引用的名稱，它對大小寫是敏感的，調用函數時不可寫錯函數名；

4）參數表示傳遞給函數使用或操作的值，它可以是常量，也可以是變數；

5）return語句用於返回表達式的值，也可以沒有。

5、對象

Javascript的一個重要功能就是基於對象的功能，通過基於對象的程序設計，可以用更直觀、模塊化和可重複使用的方式進行程序開發。

一組包含數據的屬性和對屬性中包含數據進行操作的方法，稱為對象。比如要設定網頁的背景顏色，所針對的對象就是document，所用的屬性名是bgcolor，如document.bgcolor=”blue”，就是表示使背景的顏色為藍色。

6、事件

用戶與網頁交互時產生的操作，稱為事件。絕大部分事都由用戶的動作所引發，如：用戶按滑鼠的按鈕，就產生onclick事件，若滑鼠的指針的鏈接上移動，就產生onmouseover事件等等。在Javascript中，事件往往與事件處理程序配套使用。

學習Javascript比較快速有效的方法是先熟悉一些基本概念，然後找幾個別人設計好的程序認真仔細地分析一遍，再稍作改動，再看看能否達到預期目的，不斷地舉一反三，既可以加深對一些參數、設計方法的理解，又可以快速地提高自己的水平。另外，再提醒一下：Javascript對大小寫是敏感的，特別是一些對象、方法、屬性的大小寫一定要一致，要養成一種良好的習慣，否則在調試程序時可要累死你了。

7、變數

如 var myVariable = “some value”;

如何理解前端模塊化

前端模塊化

在JavaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹

這時候JavaScript作為嵌入式的腳本語言的定位動搖了，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（module）了，JavaScript極其簡單的代碼組織規範不足以駕馭如此龐大規模的代碼

模塊

既然JavaScript不能handle如此大規模的代碼，我們可以借鑒一下其它語言是怎麼處理大規模程序設計的，在Java中有一個重要帶概念——package，邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的王國，不用擔心命名衝突什麼的，那麼外部如果使用呢？直接import對應的package即可

import java.util.ArrayList;

遺憾的是JavaScript在設計時定位原因，沒有提供類似的功能，開發者需要模擬出類似的功能，來隔離、組織複雜的JavaScript代碼，我們稱為模塊化。

一個模塊就是實現特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什麼功能，就載入什麼模塊。模塊開發需要遵循一定的規範，各行其是就都亂套了

規範形成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到現在初具規模，簡單了解一下這段不凡的歷程

函數封裝

我們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函數的，所以把函數作為模塊化的第一步是很自然的事情，在一個文件裡面編寫幾個相關函數就是最開始的模塊了

function fn1(){

statement

}

function fn2(){

statement

}

這樣在需要的以後夾在函數所在文件，調用函數就可以了

這種做法的缺點很明顯：污染了全局變數，無法保證不與其他模塊發生變數名衝突，而且模塊成員之間沒什麼關係。

對象

為了解決上面問題，對象的寫法應運而生，可以把所有的模塊成員封裝在一個對象中

var myModule = {

var1: 1,

var2: 2,

fn1: function(){

},

fn2: function(){

}

}

這樣我們在希望調用模塊的時候引用對應文件，然後

myModule.fn2();

這樣避免了變數污染，只要保證模塊名唯一即可，同時同一模塊內的成員也有了關係

看似不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員

myModel.var1 = 100;

這樣就會產生意外的安全問題

立即執行函數

可以通過立即執行函數，來達到隱藏細節的目的

var myModule = (function(){

var var1 = 1;

var var2 = 2;

function fn1(){

}

function fn2(){

}

return {

fn1: fn1,

fn2: fn2

};

})();

這樣在模塊外部無法修改我們沒有暴露出來的變數、函數

上述做法就是我們模塊化的基礎，目前，通行的JavaScript模塊規範主要有兩種：CommonJS和AMD

CommonJS

我們先從CommonJS談起，因為在網頁端沒有模塊化編程只是頁面JavaScript邏輯複雜，但也可以工作下去，在伺服器端卻一定要有模塊，所以雖然JavaScript在web端發展這麼多年，第一個流行的模塊化規範卻由伺服器端的JavaScript應用帶來，CommonJS規範是由NodeJS發揚光大，這標誌著JavaScript模塊化編程正式登上舞台。

定義模塊

根據CommonJS規範，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變數，無法被其他模塊讀取，除非定義為global對象的屬性

模塊輸出：

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

載入模塊：

載入模塊使用require方法，該方法讀取一個文件並執行，返迴文件內部的module.exports對象