【js基礎(chǔ)】前端模模塊化知識點整理

IamDLY 發(fā)布于2019-08-21 17:49 / 1744人閱讀

摘要：其中命令用于輸入其他模塊提供的功能，命令用于規(guī)定模塊的對外接口。

簡單記錄下自己對前端模塊化的一些淺薄理解，不對之處歡迎指正

在介紹前端模打包工具之前，我們先簡單說一下瀏覽器、v8和nodejs，因為我們現(xiàn)在用到的大部分前端模打包工具，都是需要nodejs環(huán)境運行的，同時他們都能通過npm進(jìn)行下載

1. 瀏覽器：

瀏覽器組成可分兩部分：Shell+內(nèi)核。瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。
渲染引擎，負(fù)責(zé)對網(wǎng)頁語法的解釋（如HTML、JavaScript）并渲染網(wǎng)頁。我們平時說的“瀏覽器內(nèi)核”就是指“瀏覽器所采用的渲染引擎”。
渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，所以過去需要測試人員人肉測試頁面在不同瀏覽器中的效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。JS引擎負(fù)責(zé)對JavaScript進(jìn)行解釋、編譯和執(zhí)行，以使網(wǎng)頁達(dá)到一些動態(tài)的效果。

2. V8引擎：

Chrome的JS引擎，使用C/C++編寫的一款非常優(yōu)秀的開源JS引擎

3. node.js

Nodejs對V8引擎進(jìn)行了封裝，使V8可以運行在非瀏覽器環(huán)境，這使得我們的JavaScript代碼可以在非瀏覽器環(huán)境運行

4. npm

NPM是隨同NodeJS一起安裝的包管理工具，簡單來講，是一個代碼共享倉庫
npm包下都有package.json配置文件，注明了包的版本號，依賴，作者等信息，下載包時，會一起下載package.json中注明依賴的包

npm install 包名    //安裝最新版本的包到當(dāng)前文件夾
npm i 包名      //npm install 包名簡寫
npm i包名@版本號   //安裝制定版本
npm i 包名 –-save   //--save兩個減號，安裝包到當(dāng)前文件夾，并將包名及版本號添加到package.json的dependencies
npm i 包名 –-save-dev  //并將包名及版本號添加到package.json的devDependencies，下載包時，不會下載devDependencies中的包
npm i 包名 –D   //npm i 包名 –save-dev縮寫
npm i 包名 –g   //全局安裝包

5. javascript模塊化

簡單來講，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。這樣做有一個前提，那就是大家必須以同樣的方式編寫模塊，否則你有你的寫法，我有我的寫法，豈不是亂了套！
正是有了統(tǒng)一的規(guī)范，我們才能方便的在npm上下載別人的代碼/包/類庫，并在我們自己的工程中引用

CommonJS

CommonJS（nodejs, webpack等實現(xiàn)了該規(guī)范）
node.js的模塊系統(tǒng)，就是參照CommonJS規(guī)范實現(xiàn)的。，webpack 也是以CommonJS的形式來書寫。在CommonJS中，有一個全局性方法require，用于加載模塊。假定有一個數(shù)學(xué)模塊math.js，就可以像下面這樣加載。

var math = require("math");

然后，就可以調(diào)用模塊提供的方法：

math.add(2,3); // 5

AMD

AMD（Asynchronous Module Definition）（RequireJS實現(xiàn)了該規(guī)范）
基于commonJS規(guī)范的nodeJS出來以后，服務(wù)端的模塊概念已經(jīng)形成，很自然地，大家就想要客戶端模塊。而且最好兩者能夠兼容，一個模塊不用修改，在服務(wù)器和瀏覽器都可以運行。但是，由于一個重大的局限，使得CommonJS規(guī)范不適用于瀏覽器環(huán)境。還是上面的代碼，如果在瀏覽器中運行，會有一個很大的問題，因為require 是同步的，所以如果加載時間很長，整個應(yīng)用就會停在那里等。因此，瀏覽器端的模塊，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）。這就是AMD規(guī)范誕生的背景。
AMD也采用require()語句加載模塊，但是不同于CommonJS，它要求兩個參數(shù)：
require([module], callback);
第一個參數(shù)[module]，是一個數(shù)組，里面的成員就是要加載的模塊；第二個參數(shù)callback，則是加載成功之后的回調(diào)函數(shù)。如果將前面的代碼改寫成AMD形式，就是下面這樣：

require(["math"], function (math) {
    math.add(2, 3);
});

es6

通過import、export實現(xiàn)模塊的輸入輸出。其中import命令用于輸入其他模塊提供的功能，export命令用于規(guī)定模塊的對外接口。（個人觀點，雖然import和export在瀏覽器端實現(xiàn)有著巨大的技術(shù)難點，但是標(biāo)準(zhǔn)就是標(biāo)準(zhǔn)，早晚會被瀏覽器端實現(xiàn)或有更優(yōu)的標(biāo)準(zhǔn)，早晚一統(tǒng)天下，干掉commonjs、cmd、amd）
然而像import和export這兩個命令現(xiàn)在在任何瀏覽器中都是不支持的, 同時babel也無法將其轉(zhuǎn)換為瀏覽器支持的ES5, 原因在于babel只是個翻譯，假設(shè)a.js 里 import 了 b.js, 對a.js進(jìn)行轉(zhuǎn)碼，只是翻譯了a.js，并不會把b.js的內(nèi)容給讀取合并進(jìn)來, 如果想在最終的某一個js里，包含 a.js，b.js 的代碼，那就需要用到打包工具，例如webpack。

6. 打包工具

目前常用的前端打包工具有很多，grunt、Gulp、webpack、rollup等，這些工具可以多帶帶使用，也可以互相配合使用
這些打包工具可以幫助前端工程師們完成預(yù)處理語言編譯、es6代碼轉(zhuǎn)es5、代碼壓縮混淆等工作