【前端面試題】11—18道有關子產品化開發的面試題(附答案)

如今的前端工作中，子產品化開發成為主流，無論是前端還是後端，由于子產品化開發為我們帶來巨大的收益，是以開發者都在使用它。子產品化開發部分的面試題主要考察應試者對幾種子產品化開發規範的了解，應試者要明白它們之間的異同點，以及所适用的場合。

1、說說你對前端子產品化開發的認識。

相關認識如下。

（1）異步子產品定義（AMD）規範是 require. js推廣的、對子產品定義的規範。

（2）通用子產品定義（CMD）規範是 SeaJS推廣的、對子產品定義的規範。

（3）AMD提前執行，CMD延遲執行

（4）AMD推薦的風格是通過 module transport規範暴露接口，即通過傳回一個對象暴露子產品接口；CommonJs的風格是通過對 module.exports或exports的屬性指派來達到暴露子產品接口的目的。

2、說說你對 CommonJS和AMD的了解。

CommonJS是伺服器端模抉的規範， Node. js采用了這個規範。CommonJS規範同步加載子產品，也就是說，隻有加載完成，才能執行後面的操作。AMD規範則非同步加載子產品，允許指定回調函數。

AMD推薦的風格是通過 module transport規範暴露接口，即通過傳回一個對象來暴露子產品接口， CommonJS的風格是通過對module.exports或exports的屬性指派來達到暴露子產品對象的目的。

3、子產品化開發的好處是什麼？

在Web開發中，通常将項目的實作劃分成許多子產品。子產品化開發其實就是将功能相關的代碼封裝在一起，友善維護和重用。另外，子產品之間通過API進行通信

4、require.js解決了什麼問題？

解決了以下問題。

（1）實作了 JavaScript檔案的異步加載。

（2）有助于管理子產品之間的依賴性。

（3）便于代碼的編寫和維護。

5、前端子產品化解決了哪些問題？

解決了以下問題。

（1）各個子產品的命名空間獨立，A子產品的變量x不會覆寫B子產品的變量x。

（2）子產品的依賴關系，通過子產品管理工具（如 webpack、 require.js等）進行管理。

6、如何實作前端子產品化開發？

require. js、 SeaJS都是适用于web浏覽器端的子產品加載器，使用它們可以更好地組織 Javascript代碼。

7、子產品化的 JavaScript開發的優勢是什麼？

優勢如下。

（1）将功能分離出來

（2）具有更好的代碼組織方式

（3）可以按需加載。

（4）避免了命名沖突。

（5）解決了依賴管理問題

8、你了解 CommonJS規範嗎？

定義子產品，即一個單獨的檔案就是一個子產品，檔案中的作用域獨立，檔案中定義的變量是無法被其他檔案引用的。如果需要使用這些變量，需要将其定義為全局變量（不建議）。

輸出子產品指子產品隻有一個接口對象，即使用 module. exports對象可以将需要輸出的内容放入到該對象中。

加載子產品指通過 require加載，例如 var module= require（'/ moduleFile. js），該 module的值對應檔案内部的 module exports對象，然後就可以通過 module名稱引用子產品中暴露的接口變量或接口函數了。

9、談談你對CMD（ Common module Definition，通用子產品定義）規範的了解。

就近依賴，需要時再進行加載，是以執行順序和書寫順序一緻；這一點與AMD不同，AMD是在使用子產品之前将依賴子產品全部加載完成，但由于網絡等其他因素可能導緻依賴子產品下載下傳的先後順序不一緻，這就造成執行順序可能與書寫順序不一緻。

10、你了解 EMAScript 6子產品規範嗎？

相關了解如下。

（1）類似于 Commonjs，文法更簡潔

（2）類似于AMD，直接支援異步加載和配置子產品加載

（3）對于結構可以做靜态分析、靜态檢測。

（4）比 CommonJS更妤地支援循環依賴。

11、為什麼要通過子產品化方式進行開發？

原因如下。

（1）高内聚低耦合，有利于團隊開發。當項目很複雜時，将項目劃分為子子產品并分給不同的人開發，最後再組合在一起，這樣可以降低子產品與子產品之間的依賴關系，實作

低耦合，子產品中又有特定功能展現高内聚特點。

（2）可重用，友善維護。子產品的特點就是有特定功能，當兩個項目都需要某種功能時，定義一個特定的子產品來實作該功能，這樣隻需要在兩個項目中都引入這個子產品就能夠實作該功能，不需要書寫重複性的代碼。

另外，當需要變更該功能時，直接修改該子產品，這樣就能夠修改所有項目的功能，維護起來很友善。

12、AMD與CMD的差別是什麼？

差別如下

（1）對于依賴的子產品，AMD提前執行，CMD延遲執行，不過 require.JS從2.0版本開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。

（2）CMD推崇依賴就近，AMD推崇依賴前置。

13、為什麼需要前端子產品化？

JavaScript以前隻用于實作網頁的特效、表單的驗證等簡單的功能，隻需要少量的代碼就可以完成這些功能。但随着技術的發展，需要使用 JavaScript處理越來越多的事情，以前許多本來由背景處理的内容都轉移到前端來處理，這使代碼量急劇膨脹。

如果還是像以前一樣書寫代碼，那麼對于後期的維護将非常困難。同時在開發中，我們難免會需要一些“輪子”，如果沒有子產品（ Model）這個概念，我們将很難簡便地使用别人制造的“輪子”。

是以，我們需要前端子產品化。

14、前端子產品化是否等同于 JavaScript子產品化？

前端開發相對其他語言來說比較特殊，因為我們實作一個頁面功能總是需要JavaScript、CSS和HTML三者互相交織。

如果一個功能隻有 JavaScript實作了子產品化， CSS和 Template還處于原始狀态，那麼調用這個功能的時候并不能完全通過子產品化的方式，這樣的子產品化方案并不是完整的。

是以我們真正需要的是一種可以将 JavaScript 、CSS和HTML同時都考慮進去的子產品化方案，而非隻使用 JavaScript子產品化方案。綜上所述，前端子產品化并不等同于 JavaScript子產品化。

15、JavaScript子產品化是否等同于異步子產品化？

主流的 JavaScript子產品化方案都使用“異步子產品定義”的方式，這種方式給開發帶來了極大的不便，所有的同步代碼都需要修改為異步方式。

當在前端開發中使用“ CommonJs”子產品化開發規範時，開發者可以使用自然、容易了解的子產品定義和調用方式，不需要關注子產品是否異步，不需要改變開發者的開發行為。是以 JavaScript子產品化并不等同于異步子產品化。

16、require.JS與 SeaJS的異同是什麼？

相同之處如下。

require.JS和 SeaiJS都是子產品加載器，倡導的是一種子產品化開發理念，核心價值是讓JavaScript的子產品化開發變得更簡單自然。

不同之處如下。

（1）定位有差異。require.JS想成為浏覽器端的子產品加載器，同時也想成為 rhino/node等環境的子產品加載器。SeaJS則專注于Web浏覽器端，同時通過node擴充的方式可以很友善地運作在Node伺服器端

（2）遵循的規範不同。require.JS遵循的是AMD規範， SeaJS遵循的是CMD規範。規範的不同，導緻了兩者API的不同。SeaJS更簡潔優雅，更貼近 CommonJS Modules/1.1和 Node Modules規範。

（3） require.JS嘗試讓第三方類庫修改自身來支援 require.JS。SeaJS不強推，采用自主封裝的方式來“海納百川”。

17、系統在設計上遵循幾個原則？

遵循以下原則

（1）在編譯時納入所有依賴。

（2）去中心化，實作分布式

（3）内置命名和封裝。

18、什麼是子產品化規範？

伺服器端規範主要是 CommonJS, Node.js用的就是 CommonJS規範用戶端規範主要有推崇依賴前置的AMD和推崇依賴就近的CMD。AMD規範的實作主要有 require.js。

CMD規範的主要實作有 SeaJS。但是 SeaJS已經停止維護了，因為在 EMAScript 6 中提供了 EMAScript Module子產品化規範，随着 EMAScript 6的普及，第三方的子產品化規範的實作将會慢慢地被淘汰。

本文完〜