什么是前端工程化、模塊化、組件化？

前端工程化

工程化是一種思想而不是某種技術(shù)(當(dāng)然為了實(shí)現(xiàn)工程化我們會(huì)用一些技術(shù))

再用一句通俗的話來(lái)概括前端工程化:前端工程化就是用做工程的思維看待和開(kāi)發(fā)自己的項(xiàng)目,而不再是直接擼起袖子一個(gè)頁(yè)面一個(gè)頁(yè)面開(kāi)寫(xiě)

前端模塊化
前端工程化是一個(gè)高層次的思想,而模塊化和組件化是為工程化思想下相對(duì)較具體的開(kāi)發(fā)方式,因此可以簡(jiǎn)單的認(rèn)為模塊化和組件化是工程化的表現(xiàn)形式。

模塊化開(kāi)發(fā)，一個(gè)模塊就是一個(gè)實(shí)現(xiàn)特定功能的文件，有了模塊我們就可以更方便的使用別人的代碼，要用什么功能就加載什么模塊。

模塊化開(kāi)發(fā)的4點(diǎn)好處：

　　1 避免變量污染，命名沖突

　　2 提高代碼復(fù)用率

　　3 提高維護(hù)性

　　4 依賴關(guān)系的管理

那具體什么是模塊化呢？還是舉簡(jiǎn)單的例子,我們要寫(xiě)一個(gè)實(shí)現(xiàn)A功能的JS代碼,這個(gè)功能在項(xiàng)目其他位置也需要用到,那么我們就可以把這個(gè)功能看成一個(gè)模塊采用一定的方式進(jìn)行模塊化編寫(xiě),既能實(shí)現(xiàn)復(fù)用還可以分而治之,同理在寫(xiě)樣式的時(shí)候,如果我們需要某種特殊的樣式,會(huì)在很多地方應(yīng)用,那么我們也可以采用一定的方式進(jìn)行CSS的模塊化,具體說(shuō)來(lái),JS模塊化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模塊化開(kāi)發(fā)大多是在less、sass、stylus等預(yù)處理器的import/mixin特性支持下實(shí)現(xiàn)的

總體而言,模塊化不難理解,重點(diǎn)是要學(xué)習(xí)相關(guān)的技術(shù)并且靈活運(yùn)用。

前端組件化
組件化也是工程化的表現(xiàn)形式。

①頁(yè)面上的每個(gè)獨(dú)立的、可視/可交互區(qū)域視為一個(gè)組件;

②每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄,組件所需的各種資源都在這個(gè)目錄下就近維護(hù);

③由于組件具有獨(dú)立性,因此組件與組件之間可以 自由組合;

④頁(yè)面只不過(guò)是組件的容器,負(fù)責(zé)組合組件形成功能完整的界面;

⑤當(dāng)不需要某個(gè)組件,或者想要替換組件時(shí),可以整個(gè)目錄刪除/替換。

組件化將頁(yè)面視為一個(gè)容器,頁(yè)面上各個(gè)獨(dú)立部分例如:頭部、導(dǎo)航、焦點(diǎn)圖、側(cè)邊欄、底部等視為獨(dú)立組件,不同的頁(yè)面根據(jù)內(nèi)容的需要,去盛放相關(guān)組件即可組成完整的頁(yè)面。

PS:模塊化和組件化一個(gè)最直接的好處就是復(fù)用,同時(shí)我們也應(yīng)該有一個(gè)理念,模塊化和組件化除了復(fù)用之外還有就是分治,我們能夠在不影響其他代碼的情況下按需修改某一獨(dú)立的模塊或是組件,因此很多地方我們及時(shí)沒(méi)有很強(qiáng)烈的復(fù)用需要也可以根據(jù)分治需求進(jìn)行模塊化或組件化開(kāi)發(fā)。

模塊化規(guī)范

commonJS：commonJS由nodeJS發(fā)揚(yáng)光大，這標(biāo)志著js模塊化正式登場(chǎng)。

一 定義模塊

根據(jù)commonJS規(guī)范，一個(gè)單獨(dú)的文件是一個(gè)模塊，每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量、函數(shù)、類，都是私有的，對(duì)其他文件不可見(jiàn)，無(wú)法被其他模塊讀取，除非為global對(duì)象的屬性。

二 模塊輸出

模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象。

三 加載模塊

加載模塊用require方法，該方法讀取一個(gè)文件并且執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象。

var name = 'Byron';  
  
function printName(){  
    console.log(name);  
}  
  
function printFullName(firstName){  
    console.log(firstName + name);  
}  
  
module.exports = {  
    printName: printName,  
    printFullName: printFullName  

然后加載模塊

var nameModule = require('./myModel.js');
nameModule.printName();

AMD：Asynchronous Module Definition中文名是一步模塊

它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范，由于不是js原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的函數(shù)庫(kù)，也就是大名鼎鼎的RequireJS，實(shí)際上AMD是RequireJS在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出。

requireJS主要解決兩個(gè)問(wèn)題：

1 多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器。

2 js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件愈多，頁(yè)面失去響應(yīng)的時(shí)間愈長(zhǎng)。

//定義模塊

define(['dependency'],function(){
  
  var name = 'Byron';
  function printName(){
     console.log(name);
}
  
  return {
     printName:printName
   }

})

//加載模塊

require(['myModule'],function(my){
   my.printName();
})

語(yǔ)法：

requireJS定義了一個(gè)函數(shù)define，它是全局變量，用來(lái)定義模塊。

define(id,dependencies,factory)

——id 可選參數(shù)，用來(lái)定義模塊的標(biāo)識(shí)，如果沒(méi)有提供該參數(shù)，腳本文件名（去掉拓展名）

——dependencies 是一個(gè)當(dāng)前模塊用來(lái)的模塊名稱數(shù)組

——factory 工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο螅绻麨楹瘮?shù)，它應(yīng)該只被執(zhí)行一次，如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值。

在頁(yè)面上使用require函數(shù)加載模塊；
require([dependencies], function(){});
require()函數(shù)接受兩個(gè)參數(shù)：
——第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊；
——第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊

AMD推崇的是依賴前置，被提前羅列出來(lái)并會(huì)背提前下載并執(zhí)行，后來(lái)做了改進(jìn)，可以不用羅列依賴模塊，允許在回調(diào)函數(shù)中就近使用require引入并下載執(zhí)行模塊。

CMD：即common module definition

就像AMD有個(gè)requireJS,CMD有個(gè)瀏覽器實(shí)現(xiàn)的sea.js，sj要解決的問(wèn)題和rj一樣，只不過(guò)在模塊定義方式和模塊加載時(shí)機(jī)上有所不同。

cmd是sea.js在推廣過(guò)程中的規(guī)范化產(chǎn)出，sea.js是另一種前端模塊化工具，它的出現(xiàn)緩解了requireJS的幾個(gè)痛點(diǎn)。

define(id, deps, factory)

因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id；
CMD推崇依賴就近，所以一般不在define的參數(shù)中寫(xiě)依賴，而是在factory中寫(xiě)。

factory有三個(gè)參數(shù)：
function(require, exports, module){}

一，require
require 是 factory 函數(shù)的第一個(gè)參數(shù)，require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口；

二，exports
exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口；

三，module
module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法。

demo
// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加載模塊
seajs.use(['myModule.js'], function(my){

});

AMD與CMD區(qū)別

總結(jié)如下：

最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴的處理不同。

AMD推崇依賴前置 在定義模塊的時(shí)候就有聲明其依賴的模塊

CMD推崇就近依賴 只有在用到某模塊的時(shí)候再去require

AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同，注意不是加載的時(shí)機(jī)或者方式不同。

為什么我們說(shuō)兩個(gè)的區(qū)別是依賴模塊執(zhí)行時(shí)機(jī)不同，為什么很多人認(rèn)為ADM是異步的，CMD是同步的（除了名字的原因。。。）
同樣都是異步加載模塊，AMD在加載模塊完成后就會(huì)執(zhí)行改模塊，所有模塊都加載執(zhí)行完后會(huì)進(jìn)入require的回調(diào)函數(shù)，執(zhí)行主邏輯，這樣的效果就是依賴模塊的執(zhí)行順序和書(shū)寫(xiě)順序不一定一致，看網(wǎng)絡(luò)速度，哪個(gè)先下載下來(lái)，哪個(gè)先執(zhí)行，但是主邏輯一定在所有依賴加載完成后才執(zhí)行。
CMD加載完某個(gè)依賴模塊后并不執(zhí)行，只是下載而已，在所有依賴模塊加載完成后進(jìn)入主邏輯，遇到require語(yǔ)句的時(shí)候才執(zhí)行對(duì)應(yīng)的模塊，這樣模塊的執(zhí)行順序和書(shū)寫(xiě)順序是完全一致的。
這也是很多人說(shuō)AMD用戶體驗(yàn)好，因?yàn)闆](méi)有延遲，依賴模塊提前執(zhí)行了，CMD性能好，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行的原因。

目錄結(jié)構(gòu)的制定

-- src                        # 源碼目錄
   |__ index.js               # 項(xiàng)目入口，注入store, 調(diào)用render方法
   |__ App.js       # 應(yīng)用入口，頁(yè)面整體布局，處理頁(yè)面路由
   |__ App.less      # 全局共用樣式文件
   |__ theme.less      # 項(xiàng)目主題文件
   |__ Components
       |__ ActiveChart        # [組件ActiveChart ]
           |__ index.js       # 組件實(shí)現(xiàn)源碼文件
           |__ index.less
       |__ AxisTitle       # [組件AxisTitle]
            |__ index.js       # 組件實(shí)現(xiàn)源碼文件
            |__ index.less
   |__ routes    定義應(yīng)用的頁(yè)面容器組件                 
       |__ Cockpit              # [頁(yè)面1]
           |__ index.js       # 頁(yè)面具體業(yè)務(wù)代碼
           |__ indes.less
           |__components   頁(yè)面的私有組件
       |__ WorkSpace              # [頁(yè)面2]
             |__ index.js       # 頁(yè)面具體業(yè)務(wù)代碼
             |__ indes.less
   |__models
       |__ index.js           # 導(dǎo)出封裝后的所有store，以及初始化saga
       |__ request.js         # 封裝網(wǎng)絡(luò)請(qǐng)求，比如所所有的方法進(jìn)行攔截（inspector）
       |__ model1            # [模塊1]store基于具體業(yè)務(wù)模塊來(lái)編寫(xiě)，方便多頁(yè)面調(diào)用
           |__ actionTypes.js 
           |__ actions.js     
           |__ reducer.js    封裝業(yè)務(wù)邏輯
       |__ model2           # [模塊2]
 |__services
      |__model1.js   封裝接口請(qǐng)求
      |__model2.js   封裝接口請(qǐng)求
 |__common 公用的工具庫(kù)
      |__chartUtil
      |__arrayUtil
      |__constants

總結(jié)

以上是生活随笔為你收集整理的浅谈前端工程化、模块化、组件化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。