本文目錄一覽：
工程化屬於技術研發階段的哪一個階段？
前端工程本質上是軟體工程的一種。軟體工程化關注的是性能、穩定性、可用性、可維護性等方面，注重基本的開發效率、運行效率的同時，思考維護效率。一切以這些為目標的工作都是’前端工程化’。工程化是一種思想而不是某種技術。
前端工程化需要考慮哪些因素？
1. 模塊化
簡單來說，模塊化就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和載入。（方便了多人協作）。
分而治之是軟體工程中的重要思想，是複雜系統開發和維護的基石，這點放在前端開發中同樣適用。模塊化是目前前端最流行的分治手段。
模塊化開發的最大價值應該是分治！
不管你將來是否要復用某段代碼，你都有充分的理由將其分治為一個模塊。
JS模塊化方案
AMD/CommonJS/UMD/ES6 Module等等。
CommonJS的核心思想是把一個文件當做一個模塊，要在哪裡使用這個模塊，就在哪裡require這個模塊，然後require方法開始載入這個模塊並且執行其中的代碼，最後會返回你指定的export對象。
如何正確理解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才支持
簡述什麼是commonjs，以及其與nodejs的關係
自從CommonJS和NodeJS兩個項目的出現，JavaScript作為本地編程語言的這種特殊應用形式，才開始進入進入大眾的視野。
說明什麼是CommonJS。 另外隨著並行計算的普及，像JavaScript這種函數式語言，由於其固有的易於進行並行計算的特性，將有更廣闊的應用前景。
工程化是什麼
前端工程本質上是軟體工程的一種。軟體工程化關注的是性能、穩定性、可用性、可維護性等方面，注重基本的開發效率、運行效率的同時，思考維護效率。一切以這些為目標的工作都是’前端工程化’。工程化是一種思想而不是某種技術。
前端工程化需要考慮哪些因素？
1. 模塊化
簡單來說，模塊化就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和載入。（方便了多人協作）。
分而治之是軟體工程中的重要思想，是複雜系統開發和維護的基石，這點放在前端開發中同樣適用。模塊化是目前前端最流行的分治手段。
模塊化開發的最大價值應該是分治！
不管你將來是否要復用某段代碼，你都有充分的理由將其分治為一個模塊。
JS模塊化方案
AMD/CommonJS/UMD/ES6 Module等等。
CommonJS的核心思想是把一個文件當做一個模塊，要在哪裡使用這個模塊，就在哪裡require這個模塊，然後require方法開始載入這個模塊並且執行其中的代碼，最後會返回你指定的export對象。
module.export = function() { hello: function() { alert(‘你好’); }}var a = require(‘./xxx/a.js’);a.hello(); // == 彈窗「你好」
CommonJS 載入模塊是同步的，所以只有載入完成才能執行後面的操作，不能非阻塞的並行載入多個模塊。
AMD（非同步模塊定義，Asynchronous Module Definition），特點是可以實現非同步載入模塊，等所有模塊都載入並且解釋執行完成後，才會執行接下來的代碼。
// 通過AMD載入模塊// define(// module_id /*可選*/, // [dependencies] 可選, // definition function /*回調 用來初始化模塊或對象的函數*/// );define([‘myModule’, ‘myOtherModule’], function(myModule, myOtherModule) { console.log(myModule.hello()); //會先並行載入所有的模塊a b 並執行其中模塊的代碼後，在執行逐步執行下面的 console require(‘a’); console.log(‘a required’); require(‘b’); console.log(‘b required’); console.log(‘all modules have been required’);});
在一些同時需要AMD和CommonJS功能的項目中，你需要使用另一種規範：Universal Module Definition（通用模塊定義規範）。UMD創造了一種同時使用兩種規範的方法，並且也支持全局變數定義。所以UMD的模塊可以同時在客戶端和服務端使用。
幸運的是在JS的最新規範ECMAScript 6 (ES6)中，引入了模塊功能。
ES6 的模塊功能汲取了CommonJS 和 AMD 的優點，擁有簡潔的語法並支持非同步載入，並且還有其他諸多更好的支持（例如導入是實時只讀的。（CommonJS 只是相當於把導出的代碼複製過來））。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/286491.html
微信掃一掃 
支付寶掃一掃 