如今的前端工作中，模塊化開發(fā)成為主流，無論是前端還是后端，由于模塊化開發(fā)為我們帶來巨大的收益，因此開發(fā)者都在使用它。模塊化開發(fā)部分的面試題主要考察應(yīng)試者對幾種模塊化開發(fā)規(guī)范的了解，應(yīng)試者要明白它們之間的異同點，以及所適用的場合。
1、說說你對前端模塊化開發(fā)的認(rèn)識。（1）異步模塊定義（AMD）規(guī)范是 require. js推廣的、對模塊定義的規(guī)范。（2）通用模塊定義（CMD）規(guī)范是 SeaJS推廣的、對模塊定義的規(guī)范。（3）AMD提前執(zhí)行，CMD延遲執(zhí)行（4）AMD推薦的風(fēng)格是通過 module transport規(guī)范暴露接口，即通過返回一個對象暴露模塊接口；CommonJs的風(fēng)格是通過對 module.exports或exports的屬性賦值來達到暴露模塊接口的目的。CommonJS是服務(wù)器端模抉的規(guī)范， Node. js采用了這個規(guī)范。CommonJS規(guī)范同步加載模塊，也就是說，只有加載完成，才能執(zhí)行后面的操作。AMD規(guī)范則非同步加載模塊，允許指定回調(diào)函數(shù)。AMD推薦的風(fēng)格是通過 module transport規(guī)范暴露接口，即通過返回一個對象來暴露模塊接口， CommonJS的風(fēng)格是通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。在Web開發(fā)中，通常將項目的實現(xiàn)劃分成許多模塊。模塊化開發(fā)其實就是將功能相關(guān)的代碼封裝在一起，方便維護和重用。另外，模塊之間通過API進行通信（1）實現(xiàn)了 JavaScript文件的異步加載。（1）各個模塊的命名空間獨立，A模塊的變量x不會覆蓋B模塊的變量x。（2）模塊的依賴關(guān)系，通過模塊管理工具（如 webpack、 require.js等）進行管理。require. js、 SeaJS都是適用于web瀏覽器端的模塊加載器，使用它們可以更好地組織 Javascript代碼。7、模塊化的 JavaScript開發(fā)的優(yōu)勢是什么？定義模塊，即一個單獨的文件就是一個模塊，文件中的作用域獨立，文件中定義的變量是無法被其他文件引用的。如果需要使用這些變量，需要將其定義為全局變量（不建議）。輸出模塊指模塊只有一個接口對象，即使用 module. exports對象可以將需要輸出的內(nèi)容放入到該對象中。加載模塊指通過 require加載，例如 var module= require（'/ moduleFile. js），該 module的值對應(yīng)文件內(nèi)部的 module exports對象，然后就可以通過 module名稱引用模塊中暴露的接口變量或接口函數(shù)了。9、談?wù)勀銓MD（ Common module Definition，通用模塊定義）規(guī)范的理解。就近依賴，需要時再進行加載，所以執(zhí)行順序和書寫順序一致；這一點與AMD不同，AMD是在使用模塊之前將依賴模塊全部加載完成，但由于網(wǎng)絡(luò)等其他因素可能導(dǎo)致依賴模塊下載的先后順序不一致，這就造成執(zhí)行順序可能與書寫順序不一致。10、你了解 EMAScript 6模塊規(guī)范嗎？（2）類似于AMD，直接支持異步加載和配置模塊加載（3）對于結(jié)構(gòu)可以做靜態(tài)分析、靜態(tài)檢測。（4）比 CommonJS更妤地支持循環(huán)依賴。（1）高內(nèi)聚低耦合，有利于團隊開發(fā)。當(dāng)項目很復(fù)雜時，將項目劃分為子模塊并分給不同的人開發(fā)，最后再組合在一起，這樣可以降低模塊與模塊之間的依賴關(guān)系，實現(xiàn)低耦合，模塊中又有特定功能體現(xiàn)高內(nèi)聚特點。（2）可重用，方便維護。模塊的特點就是有特定功能，當(dāng)兩個項目都需要某種功能時，定義一個特定的模塊來實現(xiàn)該功能，這樣只需要在兩個項目中都引入這個模塊就能夠?qū)崿F(xiàn)該功能，不需要書寫重復(fù)性的代碼。另外，當(dāng)需要變更該功能時，直接修改該模塊，這樣就能夠修改所有項目的功能，維護起來很方便。（1）對于依賴的模塊，AMD提前執(zhí)行，CMD延遲執(zhí)行，不過 require.JS從2.0版本開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。JavaScript以前只用于實現(xiàn)網(wǎng)頁的特效、表單的驗證等簡單的功能，只需要少量的代碼就可以完成這些功能。但隨著技術(shù)的發(fā)展，需要使用 JavaScript處理越來越多的事情，以前許多本來由后臺處理的內(nèi)容都轉(zhuǎn)移到前端來處理，這使代碼量急劇膨脹。如果還是像以前一樣書寫代碼，那么對于后期的維護將非常困難。同時在開發(fā)中，我們難免會需要一些“輪子”，如果沒有模塊（ Model）這個概念，我們將很難簡便地使用別人制造的“輪子”。14、前端模塊化是否等同于 JavaScript模塊化？前端開發(fā)相對其他語言來說比較特殊，因為我們實現(xiàn)一個頁面功能總是需要JavaScript、CSS和HTML三者相互交織。如果一個功能只有 JavaScript實現(xiàn)了模塊化， CSS和 Template還處于原始狀態(tài)，那么調(diào)用這個功能的時候并不能完全通過模塊化的方式，這樣的模塊化方案并不是完整的。所以我們真正需要的是一種可以將 JavaScript 、CSS和HTML同時都考慮進去的模塊化方案，而非只使用 JavaScript模塊化方案。綜上所述，前端模塊化并不等同于 JavaScript模塊化。15、JavaScript模塊化是否等同于異步模塊化？主流的 JavaScript模塊化方案都使用“異步模塊定義”的方式，這種方式給開發(fā)帶來了極大的不便，所有的同步代碼都需要修改為異步方式。當(dāng)在前端開發(fā)中使用“ CommonJs”模塊化開發(fā)規(guī)范時，開發(fā)者可以使用自然、容易理解的模塊定義和調(diào)用方式，不需要關(guān)注模塊是否異步，不需要改變開發(fā)者的開發(fā)行為。因此 JavaScript模塊化并不等同于異步模塊化。16、require.JS與 SeaJS的異同是什么？require.JS和 SeaiJS都是模塊加載器，倡導(dǎo)的是一種模塊化開發(fā)理念，核心價值是讓JavaScript的模塊化開發(fā)變得更簡單自然。（1）定位有差異。require.JS想成為瀏覽器端的模塊加載器，同時也想成為 rhino/node等環(huán)境的模塊加載器。SeaJS則專注于Web瀏覽器端，同時通過node擴展的方式可以很方便地運行在Node服務(wù)器端（2）遵循的規(guī)范不同。require.JS遵循的是AMD規(guī)范， SeaJS遵循的是CMD規(guī)范。規(guī)范的不同，導(dǎo)致了兩者API的不同。SeaJS更簡潔優(yōu)雅，更貼近 CommonJS Modules/1.1和 Node Modules規(guī)范。（3） require.JS嘗試讓第三方類庫修改自身來支持 require.JS。SeaJS不強推，采用自主封裝的方式來“海納百川”。17、系統(tǒng)在設(shè)計上遵循幾個原則？服務(wù)器端規(guī)范主要是 CommonJS, Node.js用的就是 CommonJS規(guī)范客戶端規(guī)范主要有推崇依賴前置的AMD和推崇依賴就近的CMD。AMD規(guī)范的實現(xiàn)主要有 require.js。CMD規(guī)范的主要實現(xiàn)有 SeaJS。但是 SeaJS已經(jīng)停止維護了，因為在 EMAScript 6 中提供了 EMAScript Module模塊化規(guī)范，隨著 EMAScript 6的普及，第三方的模塊化規(guī)范的實現(xiàn)將會慢慢地被淘汰。相關(guān)推薦
【前端面試題】01—42道常見的HTML5面試題(附答案)
【前端面試題】02—59道CSS面試題(附答案)
【前端面試題】03—200+道常見JavaScript基礎(chǔ)面試題上（附答案）
【前端面試題】04—33道基礎(chǔ)CSS3面試題(附答案)
【前端面試題】05—17道面向?qū)ο蟮拿嬖囶}(附答案)
【前端面試題】06—16道設(shè)計模式面試題（附答案）
【前端面試題】07—47道基礎(chǔ)的VueJS面試題(附答案)
下載APP