前端模塊化常見面試題和答案

這篇文章給大家分享的是有關(guān)前端模塊化常見面試題和答案。小編覺得挺實(shí)用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

1、對 AMD,CMD,CommonJs 有什么理解？

AMD 規(guī)范即異步模塊加載機(jī)制。從規(guī)范描述頁面看，AMD 很短也很簡單，但卻完整描述了模塊的定義，依賴關(guān)系，引用關(guān)系以及加載機(jī)制。 AMD 規(guī)范其實(shí)只有一個主要接口 define(id,dependencies,factory)，它要在聲明模塊的時候指定所有的依賴dependencies，并且還要當(dāng)做形參傳到factory中，對于依賴的模塊提前執(zhí)行，依賴前置

define("module", ["dep1", "dep2"], function(d1, d2) { return someExportedValue;
　　

});
　　

require(["module", "../file"], function(module, file) { /* ... */ });
　　

優(yōu)點(diǎn)：適合在瀏覽器環(huán)境異步加載；并行加載多個模塊。
　　

缺點(diǎn)：提高開發(fā)成本，代碼閱讀和書寫比較困難；不符合通用的模塊思維方式，是一種妥協(xié)的實(shí)現(xiàn)。
　　

實(shí)現(xiàn)：requireJS，NodeJs，Dojo，JQuery
　　

CMD 規(guī)范和 AMD 相似，盡量保持簡單，并且與 CommonJS 和 NodeJS 的
　　

Modules 規(guī)范保持了很大的兼容性。在 CMD 中，一個模塊就是一個文件， 格式為：define( factory )
　　

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

return someExportedValue;
　　

});
　　

require(["module", "../file"], function(module, file) { /* ... */
　　

});
　　

優(yōu)點(diǎn)：依賴就近，延遲執(zhí)行；很容易在 node 中運(yùn)行。
　

缺點(diǎn)：依賴 SPM 打包，模塊的加載邏輯偏重。
　　

實(shí)現(xiàn)：SeaJS
　　

CommonJS 是在瀏覽器環(huán)境之外構(gòu)建 JavaScript 生態(tài)系統(tǒng)為目標(biāo)產(chǎn)生的項(xiàng)目，比如服務(wù)器和桌面環(huán)境中。CommonJS 規(guī)范是為了解決 JavaScript 的作用域問題而定義的模塊形式，可以使每個模塊在它自身的命名空間中執(zhí)行。該規(guī)范的主要內(nèi)容是：模塊必須通過 module.exports 導(dǎo)出對外的變量或接口，通過 require()來導(dǎo)入其他模塊的輸出到當(dāng)前模塊。
　　

//moduleA.js
　　

module.exports =
　　

function( value ){
　　

return
　　

value
　　

*
　　

2;

}
　　

// moduleB.js
　　

var multiplyBy2 = require('./moduleA');
　　

var result = multiplyBy2(4);
　　

CommonJS 是同步加載模塊，一個單獨(dú)的文件就是一個模塊。但其實(shí)也有瀏覽器端的實(shí)現(xiàn)，其原理是將所有模塊都定義好并通過 id 進(jìn)行索引，
　　

這樣就可以瀏覽器進(jìn)行解析了 服務(wù)器端的 Node.js 遵循 CommonJS 規(guī)范。核心思想是允許模塊通過 require 方法來同步加載所要依賴的其他模塊，然后通過 exports 或 module.exports 來導(dǎo)出需要暴露的接口。
　　

require("module");
　　

require("../file.js");
　　

exports.doStuff = function() {};
　　

module.exports = someValue;
　　

優(yōu)點(diǎn)：服務(wù)器端便于重用；NPM 中已經(jīng)將近 20w 個模塊包；簡單并容易使用。
　　

缺點(diǎn)：同步的模塊方式不適合在瀏覽器環(huán)境中，同步意味著阻塞加載， 瀏覽器資源是異步加載的；不能非阻塞的并行加載多個模塊。
　　

區(qū)別：（AMD or CMD）
　　

2、為什么要模塊化？不用的時候和用RequireJS的時候代碼該如何書寫？

（1）方便大量的 js 腳本代碼的管理維護(hù)以及團(tuán)隊配合開發(fā)；

（2）有效解決命名空間沖突及文件依賴加載順序問題；

（3）有利于模塊的版本管理，提高可維護(hù)性，有利于前端性能優(yōu)化，跨環(huán)境共享模塊。

3、分別說說同步和異步模塊化的應(yīng)用場景，說一下AMD 異步模塊化實(shí)現(xiàn)的原理？
　　

引入 JS 時會遇到需要異步加載文件，此時 require.async 便可滿足異步加載需求。

關(guān)于前端模塊化常見面試題和答案就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。