1. javascript模塊化是什麼及其優缺點介紹
如今backbone、emberjs、spinejs、batmanjs
等MVC框架侵襲而來。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模塊化的JavaScript撲面而
來。web前端已經演變成大前端，web前端的發展速度之快。
1)我們來看看什麼是模塊化？
模塊化是一種將系統分離成獨立功能部分的方法，可將系統分割成獨立的功能部分，嚴格定義模塊介面、模塊間具有透明性。javascript中的模塊在一些C、PHP、java中比較常見:
c中使用include 包含.h文件;php中使用require_once包含.php文件
java使用import導入包
此中都有模塊化的思想。
2)模塊化的優缺點：
a>優點：
可維護性
1.靈活架構，焦點分離
2.方便模塊間組合、分解
3.方便單個模塊功能調試、升級
4.多人協作互不幹擾
可測試性
1.可分單元測試
b>缺點：
性能損耗
1.系統分層，調用鏈會很長
2.模塊間通信,模塊間發送消息會很耗性能
3)最近的項目中也有用到模塊化，
使用的是seajs,但是當引用到jquery,jquery easyui/或者jquery
UI組件時,有可能會用到很多jquery插件，那這樣要是實現一個很復雜的交互時，模塊間的依賴會很多，使用define（）方法引入模塊會很多，不知
有么有什麼好的方法？
4)附：
內聚度
內聚度指模塊內部實現，它是信息隱藏和局部化概念的自然擴展，它標志著一個模塊內部各成分彼此結合的緊密程度。好處也很明顯，當把相關的任務分組後去閱讀就容易多了。 設計時應該盡可能的提高模塊內聚度，從而獲得較高的模塊獨立性。
耦合度
耦合度則是指模塊之間的關聯程度的度量。耦合度取決於模塊之間介面的復雜性，進入或調用模塊的位置等。與內聚度相反，在設計時應盡量追求鬆散耦合的系統。
2. 如何理解前端模塊化
前端模塊化
在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對象
3. 做web前端需要掌握哪些框架
給你介紹Web前端三大主流框架
React：
1.聲明式設計：React採用聲明範式，可以輕松描述應用。
2.高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活：React可以與已知的庫或框架很好地配合。
優點：
1.速度快：在UI渲染過程中，React通過在虛擬DOM中的微操作來實現對實際DOM的局部更新。
2.跨瀏覽器兼容：虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標准化的API，甚至在IE8中都是沒問題的。
3.模塊化：為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
4.單向數據流：Flux是一個用於在JavaScript應用中創建單向數據層的架構5.同構、純粹的javascript：因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。6.兼容性好：比如使用RequireJS來載入和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。缺點：React本身只是一個V而已，並不是一個完整的框架，所以如果是大型項目想要一套完整的框架的話，基本都需要加上ReactRouter和Flux才能寫大型應用。
Vue：
Vue是尤雨溪編寫的一個構建數據驅動的Web界面的庫，准確來說不是一個框架，它聚焦在V（view）視圖層。
它有以下的特性：
1.輕量級的框架
2.雙向數據綁定
3.指令
4.插件化
優點：
1.簡單：官方文檔很清晰，比Angular簡單易學。
2.快速：非同步批處理方式更新DOM。
3.組合：用解耦的、可復用的組件組合你的應用程序。
4.緊湊：~18kbmingzip，且無依賴。
5.強大：表達式無需聲明依賴的可推導屬性()。
6.對模塊友好：可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
缺點：
1.新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。
2.影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
3.不支持IE8。
Angular：
Angular是一款優秀的前端JS框架，已經被用於Google的多款產品當中。
它有以下的特性：
1.良好的應用程序結構
2.雙向數據綁定
3.指令
4.HTML模板
5.可嵌入、注入和測試
優點：
1.模板功能強大豐富，自帶了極其豐富的angular指令。
2.是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能；3.自定義指令，自定義指令後可以在項目中多次使用。
4.ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復用的代碼，對於敏捷開發的團隊來說非常有幫助。
5.angularjs是互聯網巨人谷歌開發，這也意味著他有一個堅實的基礎和社區支持。
缺點：
1.angular入門很容易但深入後概念很多,學習中較難理解。
2.文檔例子非常少,官方的文檔基本只寫了api,一個例子都沒有,很多時候具體怎麼用都是google來的,或直接問misko,angular的作者。
3.對IE6/7兼容不算特別好,就是可以用jQuery自己手寫代碼解決一些。
4.指令的應用的最佳實踐教程少,angular其實很靈活,如果不看一些作者的使用原則芹簡,很容易寫出四不像的代碼,例如js中還是像jQuery的思想有很多dom操作。
5.DI依賴注入如果代碼壓縮需要顯示宏首慎聲明。蔽敬
4. 什麼是"前端工程化"
前端工程化是指使用軟體工程的技術和方法來進行前端的開發流程、技術、工具、經驗等規范化、標准化。其主要目的為了提高效率和降低成本，即提高開發過程中的開發效率，減少不必要的重復工作時間。
前端工程化是前端架構中重要的一環，主要就是為了解決上述大部分問題的。而前端工程本質上是軟體工程的一種，因此我們應該從軟體工程的角度來研究前端工程。
前端工程化有四個特點：模塊化、組件化、自動化、規范化。
1、模塊化：
就是將一個大文件拆分成相互依賴的小文件，再進行統一的拼裝和載入。只有這樣，才有多人協助的可能。在工程化之前，一直是使用js、jquery、ajax，這沒有模塊概念，對於開發大型且復雜的系統會有一定的限制。
2、組件化：
組件化≠模塊化。模板化只是在文件層面上，對代碼和資源的拆分；組件化是在設計層面上，對於UI的拆分。目前市場上的組件化框架最多，主要的有Vue，React，Angular2。
3、自動化：
「簡單重復的工作交給機器來做」，自動化也就是有很多自動化工具代替我們來完成，例如持續集成、自動化構建、自動化部署、自動化測試等等。
4、規范化：（至關重要的一環）
在項目規劃初期制定的好壞對於後期的開發有一定影響。包括的規范有：
目錄結構的制定、編碼規范、前後端介面規范、文檔規范、組件管理、Git分支管理、Commit描述規范、定期codeReview、視覺圖標規范。
(4)模塊化前端擴展閱讀：
為什麼需要前端工程化：
前端越來越復雜，設計的問題和環節也越來越多，不採用工程化管理，就無法很好的實現團隊協同和降低復雜性。 原因如下：
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、部署：將構建好的代碼部署到生產環境。
5. web前端編程模塊化開發的好處
模塊化編程開發模式相信大家在學虧伍習前端編程開發技術的時候應該有接觸和了解過。今天北京北大青鳥就一起來分析一下，web前端模塊化編程的好處都有哪些。
一、模塊化的理解
1.什麼是模塊?
將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件)，並進行組合在一起;
塊的內部數據與實現是私有的，只是虧宏向外部暴露一些介面(方法)與外部其它模塊通信。
2.模塊化的進化過程
全局function模式：將不同的功能封裝成不同的全局函數;
編碼:將不同的功能封裝成不同的全局函數;
問題:污染全局命名空間，容易引起命名沖突或數據不安全，而且模塊成員之間看不出直接關系。
3.模塊化的好處
避免命名沖突(減少命名空間污染)
更好的分離,按需載入
更高復用性
高可維護性
4.引入多個script後出現出現問題
請求過多
先我們要依賴多個模塊銷空或，那樣就會發送多個請求，導致請求過多。
依賴模糊
我們不知道他們的具體依賴關系是什麼，也就是說很容易因為不了解他們之間的依賴關系導致載入先後順序出錯。
難以維護
以上兩種原因就導致了很難維護，很可能出現牽一發而動全身的情況導致項目出現嚴重的問題。
6. 模塊化需要回答系統架構的那些問題
這篇文章給大家介紹前端模塊化要解決的兩個問題分別是什麼，內容非常詳細，感興趣的小夥伴們可以參考借鑒，希望對大家能有所幫助。
前言
前端模塊化，主要是解決兩個問題「命名空間沖突」，「文件依賴管理」。
坑___命名空間沖突
我自己測試好的代碼和大家合並後怎麼起沖突了?
頁面腳本的變數或函數覆蓋了公有腳本的。
坑___文件依賴管理
明明項目需要引入的包都引進來了怎麼還報缺少包?
手動管理依賴，有天要更換某個插件，要深入代碼內部進行修改
如下圖，顯示的代碼載入，依賴關系復雜。在F.js中，分不清某個變數是來自C.js，還是E.js
兩次載入同一個模塊。比如引入了兩遍JQ
其他的坑
為了實現腳本復用，將一個很大的公用public文件引入各個頁面中，其中的某些函數，只有個別頁面用到。
某個功能的函數群函數，與另一個功能的函數群擺在一起，使用注釋來分隔。
目前解決的方法是:模塊化
命名空間：各個模塊的命名空間獨立。A模塊的變數x不會覆蓋B模塊的變數x。
模塊的依賴關系:通過模塊管理工具如webpack/requireJS/browserify等進行管理。
模塊化的基本原理解決命名空間沖突
JavaScript的缺陷，首當其沖就是全局變數。這使得每想命名一個變數的時候都要三思又三思，生怕上方無窮遠的地方有一個同事些的代碼和自己沖突。以下是一些防範方法
一、使用命名空間
代碼如下：
//定義 var mole = { name: 'rouwan', sayName:function(){ console.log(this.name) } } //使用 var a = mole.name; console.log(a)
總結：直接修改name不會影響mole.name，一定程度保護了命名空間。有兩個缺點，一，外部還是可以修改mole的屬性和方法。二，命名空間有時長起來超乎你的想像。適合一些小型的封裝，如一些配置。
二、立即執行函數 + 閉包(實現模塊的基本方法)
立即函數可以創建作用域，閉包則可以形成私有變數和函數
//創建 var mole = (function(){ var privateName = 'inner'; //私有變數 var privateFunc = function(){ //私有函數 console.log('私有函數') } return {
7. 前端模塊化和 js 模塊化的區別
兩者是包含與被包含的關系，前端模塊化泛指JS、CSS、HTML等資源的模塊化，而JS模塊化單指JS資源模塊化。
8. 前端模塊化的意義是什麼
前端模塊化的本質就是組件化、復用性，是為了提高開發效率而生的。
在網站發展的早期，前端頁面上的JavaScript僅是用來做頁面邏輯交互和表單驗證的，隨著Web2.0的興起，各種前端技術也層出不窮，前端代碼越來越臃腫了。而JavaScript由於設計時的定位問題，導至沒有「類」的概念歷返念，導致以前的JS代碼寫的都很分散，沒有「模塊化」的思想。
那時我們開發網站，仔飢前端頁面就存在一個「復用性」的問題，比如你寫了給網站A寫了一個表單驗證處理邏輯，等開發網站B時還是存在表單驗證邏輯，還需要再次寫代碼，浪費精力。
雖然可以寫成公共函數庫，但不可避免的存在多個函數庫某個函數命名沖突的情況，所以前端「工程化」難以實現。這時，國外很多大牛就意識到「模塊化」的重要性了，於是推出了不少模塊化的實現框架。
前端模塊化能給我爛凱們帶來以下便利：
組件化，提高生產力，代碼擴展性強；
解決了命名沖突，減少了全局空間的污染；
解決了文件依懶問題，讓開發者關注於業務的實現。
最後，不管項目的大小，我覺得模塊化都是很有必要的。9. 什麼是前端模塊化開發
模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如 ，一個頁面 分好多個功能， 這時候你要是都寫在一個js 中 會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，轎坦後期別人閉純桐拉手，或你接手別人的褲桐項目， 這時候來個需求讓你把分頁去掉，或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的，
組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用 ，不需要再單獨開發的