前端模塊化是什麼意思

㈠ 前端模塊化和 js 模塊化的區別

兩者是包含與被包含的關系，前端模塊化泛指JS、CSS、HTML等資源的模塊化，而JS模塊化單指JS資源模塊化。

㈡ 如何理解前端模塊化

前端模塊化
在JavaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹

這時候JavaScript作為嵌入式的腳本語言的定位動搖了，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（mole）了，JavaScript極其簡單的代碼組織規范不足以駕馭如此龐大規模的代碼

模塊
既然JavaScript不能handle如此大規模的代碼，我們可以借鑒一下其它語言是怎麼處理大規模程序設計的，在Java中有一個重要帶概念——package，邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的王國，不用擔心命名沖突什麼的，那麼外部如果使用呢？直接import對應的package即可

import java.util.ArrayList;
遺憾的是JavaScript在設計時定位原因，沒有提供類似的功能，開發者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼，我們稱為模塊化。

一個模塊就是實現特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什麼功能，就載入什麼模塊。模塊開發需要遵循一定的規范，各行其是就都亂套了

規范形成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到現在初具規模，簡單了解一下這段不凡的歷程

函數封裝
我們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函數的，所以把函數作為模塊化的第一步是很自然的事情，在一個文件裡面編寫幾個相關函數就是最開始的模塊了

function fn1(){
statement
}

function fn2(){
statement
}
這樣在需要的以後夾在函數所在文件，調用函數就可以了

這種做法的缺點很明顯：污染了全局變數，無法保證不與其他模塊發生變數名沖突，而且模塊成員之間沒什麼關系。

對象
為了解決上面問題，對象的寫法應運而生，可以把所有的模塊成員封裝在一個對象中

var myMole = {
var1: 1,

var2: 2,

fn1: function(){

},

fn2: function(){

}
}
這樣我們在希望調用模塊的時候引用對應文件，然後

myMole.fn2();
這樣避免了變數污染，只要保證模塊名唯一即可，同時同一模塊內的成員也有了關系

看似不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員

myModel.var1 = 100;
這樣就會產生意外的安全問題

立即執行函數
可以通過立即執行函數，來達到隱藏細節的目的

var myMole = (function(){
var var1 = 1;
var var2 = 2;

function fn1(){

}

function fn2(){

}

return {
fn1: fn1,
fn2: fn2
};
})();
這樣在模塊外部無法修改我們沒有暴露出來的變數、函數

上述做法就是我們模塊化的基礎，目前，通行的JavaScript模塊規范主要有兩種：CommonJS和AMD

CommonJS
我們先從CommonJS談起，因為在網頁端沒有模塊化編程只是頁面JavaScript邏輯復雜，但也可以工作下去，在伺服器端卻一定要有模塊，所以雖然JavaScript在web端發展這么多年，第一個流行的模塊化規范卻由伺服器端的JavaScript應用帶來，CommonJS規范是由NodeJS發揚光大，這標志著JavaScript模塊化編程正式登上舞台。

定義模塊
根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變數，無法被其他模塊讀取，除非定義為global對象的屬性

模塊輸出：
模塊只有一個出口，mole.exports對象，我們需要把模塊希望輸出的內容放入該對象

載入模塊：
載入模塊使用require方法，該方法讀取一個文件並執行，返迴文件內部的mole.exports對象

㈢ 前端為什麼要使用模塊化

當嚴謹古板的德國工程師用「積木游戲」來形容未來的造車理念時，全球汽車製造業的天空徹底「變色」了。在全世界范圍內品牌和車型的設計、采購、製造的靈活度都在不斷提升的今天，一套類似於樂高積木的高集成度模塊化生產方式出現了。沒有統一著裝、埋頭苦乾的工人師傅，也沒有煙塵漫天、氣味刺鼻的車間環境，取而代之的是科技含量愈來愈高的流水線，過程愈來愈簡單的操作和愈來愈少的人力成本，這些都是模塊化生產的優勢所在。
「當今，模塊化的概念不僅是經濟學、經營學專家之間最熱門的話題之一，而且它還有可能徹底改變現存產業、企業的結構，具有十分強大的沖擊力。」國際經濟學會主席、斯坦福大學經濟學教授青木昌彥如是說。
從19世紀末的福特T型車的流水線生產，到近代以日系企業豐田為代表的精益生產方式，再到最近被媒體炒得火熱但實際推進阻力重重的大眾MQB平台，汽車的生產模式一直圍繞著兩個根本目標：降低生產成本和使用成本。進入新世紀，隨著數字化技術在生產中的應用，汽車的生產製造模式開始向集約化和標准化發展，由此帶來的生產模式的變革讓汽車「生產結構」開始趨向於電腦生產一樣簡單。
模塊化簡單來說就是「數線並產」，每條生產線產出不同的模塊，最後將所有模塊拼裝整合，工作效率以數量級方式提升。比如大眾採用的MQB平台就是將發動機、變速箱加上前軸和前懸掛放在同一模塊內，再和車身等模塊總裝。通過模塊化平台應用的加深，大量的汽車零部件實現標准化，在不同品牌和不同級別的車型中達到共享，從而實現生產從A00、A0、A到B四個級別的車型的共通生產。
隨著模塊化生產概念的不斷深入，現今的分級采購模式將不復存在，取而代之的是模塊化整體采購。現在各大主機廠的采購的是一個個零部件。日常接觸和交易對象可能是大零部件供應商，也可能是小零部件企業，而模塊化采購的交易品是高集成度的各種模塊，對象是模塊集成供應商。因此，模塊化采購使得與主機廠發生直接關系的的供應商數量大為削減，並由此改變模塊供應商與其他零部件生產企業的關系。毫不誇張的說，模塊化生產會將許多規模小、產品類型單一的供應商企業沖擊的七零八落，市場上航母級的零件供應商可以趁機重新劃定市場版圖，吞並無力支撐的中小型供應商，重組企業關系，最終完成「模塊」帝國的最後一塊拼圖。

㈣ 什麼是前端工程化

前端工程化其實就是軟體工程在前端方向上的應用。前端工程化的目的就是為了提升開發效率。

㈤ 如何學習前端模塊化知識

學習前端模塊化知識主要集中精力學好以下知識點：

1、學好三駕馬車：HTML5 + CSS3 + JavaScrip

2、推薦學習過程：

1）CSS

（1）入門：

Codeademy上的html&css課程——在線互動式編程平台，弄清楚基本概念和基本語法

w3school上的HTML/CSS教程——技術手冊式的教程，比較全面，照著實例敲一遍

（2）進階：

《精通CSS·高級Web標准解決方案》——對CSS有一個比較深入的學習，對核心技術了解。

《HTML5權威指南》——非常全面的書，內容也很新，包含了HTML5+CSS3+JS DOM

（3）實戰：

bootstrap框架: bootstrap中文網/《bootstrap實戰》——流行的前端框架，注重實用即可

Codeademy上的Web Developer Skills+Projects——通過自己做小頁面/小網站來運用所學

（4）提高：

《CSS禪意花園》——提高自己的藝術設計能力，通過實例來學習如何用CSS設計出漂亮的頁面

2）.Javascript：

（1）入門：

Codeademy上的javascript教程——實例比較多，比較淺，算是基本了解JS

w3school上的JS教程——比較詳細的了解下JS的特性

《JavaScript DOM編程藝術》——講js和DOM的基本知識和運用，了解JS和DOM可以做什麼

（2）進階：

《JavaScript高級程序設計》——JS聖經，比較全面，非常好的一本書，比犀牛書可閱讀性強

《JavaScript權威指南》——傳說中的犀牛書，好厚好厚的一本書，不適合入門，適合當工具書看

《JavaScript語言精粹》——很薄的一本書，但是可以幫助你快速了解JS的精華部分

（3）實戰：

jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery

《jQuery基礎教程》——流行的前端框架，注重實用

（4）提高：

《高性能JavaScript》——講如何提高js性能，以及構建和部署文件到生產環境的最佳實踐

《Secrets of the JavaScript Ninja》——jQuery作者寫的書，如果你覺得精通JS了再看這本書

㈥ 在前端中什麼是組件化 什麼是模塊化

模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如 ，一個頁面 分好多個功能， 這時候你要是都寫在一個js 中 會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，後期別人拉手，或你接手別人的項目， 這時候來個需求讓你把分頁去掉，或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的，

組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用 ，不需要再單獨開發的

㈦ 什麼是"前端工程化"

前端工程化是指使用軟體工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規范化、標准化。其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重復工作時間。

前端工程化是前端架構中重要的一環，主要就是為了解決上述大部分問題的。而前端工程本質上是軟體工程的一種，因此我們應該從軟體工程的角度來研究前端工程。

前端工程化有四個特點：模塊化、組件化、自動化、規范化。

1、模塊化：

就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和載入。只有這樣，才有多人協助的可能。在工程化之前，一直是使用js、jquery、ajax，這沒有模塊概念，對於開發大型且復雜的系統會有一定的限制。

2、組件化：

組件化≠模塊化。模板化只是在文件層面上，對代碼和資源的拆分；組件化是在設計層面上，對於UI的拆分。目前市場上的組件化框架最多，主要的有Vue，React，Angular2。

3、自動化：

「簡單重復的工作交給機器來做」，自動化也就是有很多自動化工具代替我們來完成，例如持續集成、自動化構建、自動化部署、自動化測試等等。

4、規范化：（至關重要的一環）

在項目規劃初期制定的好壞對於後期的開發有一定影響。包括的規范有：

目錄結構的制定、編碼規范、前後端介面規范、文檔規范、組件管理、Git分支管理、Commit描述規范、定期codeReview、視覺圖標規范。

(7)前端模塊化是什麼意思擴展閱讀：

為什麼需要前端工程化：

前端越來越復雜，設計的問題和環節也越來越多，不採用工程化管理，就無法很好的實現團隊協同和降低復雜性。 原因如下：

1、前端范疇不斷擴大

早期的前端只需要適配桌面瀏覽器，而現在的前端，需要適配不同類型和尺寸的設備，包括移動端網頁，app應用等。

2、前後端分離

早期的前端只是後端 MVC 框架的一層模塊， 而現在的前端普遍是從後端介面獲取數據，編寫處理邏輯，各種前端mvc前端框架也層出不窮。

3、模塊化開發的出現

現在的前端開發不再是從零寫起，重復造輪子，而是會引用大量內部和外部的組件和模塊，這也導致前端必須進行模塊管理。

4、轉碼器的盛行

為了提高效率，前端工程往往不會直接寫html,css,和js代碼，而是改用其他格式書寫，再用工具編譯為目標格式。

比如用Jade 寫HTML，用less、sass、stylus 編寫CSS,用ES6、Typescript編寫JavaScript。

5、開發流程和團隊

早期的前端團隊往往只有幾個人，而現在的前端團隊可以擴展到幾十人，甚至上百人。每個人只負責自己的一塊內容。所以，如何協調多人多團隊的工作，保證溝通順暢，保證許可權管理，越來越成為一大問題。

前端工程化的具體內容：

1、代碼規范: 保證團隊所有成員以同樣的規范開發代碼。

2、分支管理: 不同的開發人員開發不同的功能或組件，按照統一的流程合並到主幹。

3、模塊管理: 一方面，團隊引用的模塊應該是規范的;另一方面，必須保證這些模塊可以正確的加入到最終編譯好的包文件中。

4、自動化測試：為了保證和並進主幹的代碼達到質量標准，必須有測試，而且測試應該是自動化的，可以回歸的；

5、構建：主幹更新以後，自動將代碼編譯為最終的目標格式，並且准備好各種靜態資源；

6、部署：將構建好的代碼部署到生產環境。

㈧ 前端模塊化的意義是什麼

前端模塊化的本質就是組件化、復用性，是為了提高開發效率而生的。

在網站發展的早期，前端頁面上的JavaScript僅是用來做頁面邏輯交互和表單驗證的，隨著Web2.0的興起，各種前端技術也層出不窮，前端代碼越來越臃腫了。而JavaScript由於設計時的定位問題，導至沒有「類」的概念歷返念，導致以前的JS代碼寫的都很分散，沒有「模塊化」的思想。

那時我們開發網站，仔飢前端頁面就存在一個「復用性」的問題，比如你寫了給網站A寫了一個表單驗證處理邏輯，等開發網站B時還是存在表單驗證邏輯，還需要再次寫代碼，浪費精力。

雖然可以寫成公共函數庫，但不可避免的存在多個函數庫某個函數命名沖突的情況，所以前端「工程化」難以實現。這時，國外很多大牛就意識到「模塊化」的重要性了，於是推出了不少模塊化的實現框架。

前端模塊化能給我爛凱們帶來以下便利：

組件化，提高生產力，代碼擴展性強；

解決了命名沖突，減少了全局空間的污染；

解決了文件依懶問題，讓開發者關注於業務的實現。