什麼是前端模組化？前端模組化開發到底有無必要

CodeLST發表於2018-07-16
前端

所謂前端開發，就是前臺，常見的包括幾個端：PC、pad、手機、其他智慧裝置，可以跑瀏覽器的地方就是我們前端人大施拳腳的樂土。自從node的問世，現在不光可以在瀏覽上了，疆土可以擴充套件到服務端即後臺。這樣一來JavaScript又牛了一級有著前後臺通吃的能力，當然操作太底層的東西還需要Java等傳統後臺語言。隨著電腦手機等智慧裝置效能配置、網路頻寬、技術等提升，我們可以把網頁做的更炫酷，更復雜、互動更加人性化也不會卡頓。但是這麼搞下去，大量的js指令碼程式碼略顯其不好管理維護及團隊配合開發，有些雜牌軍的感覺。於是模組化開發應運而生。

ES5及之前是如何實現模組化的

通過RequireJS實現：

一提到模組化，常說到CommonJS和AMD。這倆主要是個什麼東西呢，記住是模組化的標準規範即可。而RequireJS就是AMD規範的最好實現。就像ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。我們只需要知道，實現CommonJS規範的API是同步載入模組的，而實現AMD規範的API是則是非同步載入模組，非同步載入即非阻塞載入，更加適合瀏覽器端。官方文件對RequireJS的描述：

RequireJS 是一個JavaScript模組載入器。它非常適合在瀏覽器中使用,但它也可以用在其他指令碼環境, 就像 Rhino and Node.使用RequireJS載入模組化指令碼將提高程式碼的載入速度和質量。

RequireJS優點：

  1. 非同步“載入”。我們知道，通常網站都會把script指令碼的放在html的最後，這樣就可以避免瀏覽器執行js帶來的頁面阻塞。使用RequireJS，會在相關的js載入後執行回撥函式，這個過程是非同步的，所以它不會阻塞頁面。

  2. 按需載入。通過RequireJS，你可以在需要載入js邏輯的時候再載入對應 的js模組，這樣避免了在初始化網頁的時候發生大量的請求和資料傳輸，或許對於一些人來說，某些模組可能他根本就不需要，那就顯得沒有必要。

  3. 更加方便的模組依賴管理。相信你曾經一定遇到過因為script標籤順序問題而導致依賴關係發生錯誤，這個函式未定義，那個變數undefine之類的。通過RequireJS的機制，你能確保在所有的依賴模組都載入以後再執行相關的檔案，所以可以起到依賴管理的作用。

  4. 更加高效的版本管理。想一想，如果你還是用的script指令碼引入的方式來引入一個jQuery2.x的檔案，然後你有200個頁面都是這麼引用的，那當你想換成jQuery3.x，那你就不得不去改這200個頁面。但是如果你的requireJS有在config中做jQuery的path對映，那你只需要改一處地方即可。

RequireJS 使用

使用RequireJS，你只需要引入一個require.js即可。你的頁面上只需要通過\<script\>標籤引入這一個js即可。然後這個頁面的所有業務邏輯只需要在main.js裡面寫.

整個RequireJS2000來行原始碼，暴露出來供我們使用的就那麼幾個，主要有匯入模組，定義模組。（requirejs,require,define），其中：requirejs和require的關係如同：jQuery和$的關係。說道這裡：前端的人想必都懂了。

ES6是如何實現模組化的

通過自帶的實現：

es6原生支援模組化了，通過import匯入模組,export匯出模組。這兩個單詞一直作為保留字，如今賦予它應有的身份出現了，豐富了js語言功能。傳統的模組模式基於閉包，返回的“公有API”。這個“公有API”帶有對內部變數和功能擁有閉包的方法。它經常這樣表達：

模組greetingfn的定義：外邊套一層父函式

function myName(name) {

//父函式myName

function greetingfn() {

//子函式greetingfn

console.log( "myName " + name + "!" );

}

// 公有API---返回父函式裡包裹的方法的指標。

return {

greetingfn: greeting

};

}

使用：

var me = myName( "macrolam" );

export的使用

export關鍵字要麼放在一個變數或函式宣告的前面，要麼就物件形式匯出，程式碼如下：

export function fn() {

// 匯出函式

}

export var num = 42;

// 匯出變數

var arr = [1,2,3];

export { arr };

import使用

要匯入一個模組，你將不出意料地使用import語句。就像export有幾種微妙的變化一樣，import也有，所以你要花相當多的時間來考慮下面的問題，並試驗你的選擇。

如果你想要匯入一個模組的API中的特定命名成員到你的頂層作用域，使用這種語法：

import { foo, bar, baz } from "foo";

被羅列的識別符號foo，bar和baz必須匹配在模組的API上的命名匯出（這裡將會發生靜態分析和錯誤斷言）。它們在你當前的作用域中被繫結為頂層識別符號。

import { foo } from "foo";
foo();

你可以重新命名被匯入的繫結識別符號，就像：

import { foo as theFooFunc } from "foo";
theFooFunc();



相關文章