① web前端編程模塊化開發的好處
模塊化編程開發模式相信大家在學虧伍習前端編程開發技術的時候應該有接觸和了解過。今天北京北大青鳥就一起來分析一下，web前端模塊化編程的好處都有哪些。
一、模塊化的理解
1.什麼是模塊?
將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件)，並進行組合在一起;
塊的內部數據與實現是私有的，只是虧宏向外部暴露一些介面(方法)與外部其它模塊通信。
2.模塊化的進化過程
全局function模式：將不同的功能封裝成不同的全局函數;
編碼:將不同的功能封裝成不同的全局函數;
問題:污染全局命名空間，容易引起命名沖突或數據不安全，而且模塊成員之間看不出直接關系。
3.模塊化的好處
避免命名沖突(減少命名空間污染)
更好的分離,按需載入
更高復用性
高可維護性
4.引入多個script後出現出現問題
請求過多
先我們要依賴多個模塊銷空或，那樣就會發送多個請求，導致請求過多。
依賴模糊
我們不知道他們的具體依賴關系是什麼，也就是說很容易因為不了解他們之間的依賴關系導致載入先後順序出錯。
難以維護
以上兩種原因就導致了很難維護，很可能出現牽一發而動全身的情況導致項目出現嚴重的問題。
② 什麼是前端模塊化開發
模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如 ，一個頁面 分好多個功能， 這時候你要是都寫在一個js 中 會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，轎坦後期別人閉純桐拉手，或你接手別人的褲桐項目， 這時候來個需求讓你把分頁去掉，或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的，
組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用 ，不需要再單獨開發的
③ 互聯網前端 js css 怎麼模塊化
現在 es6 很完善了，你可以用 es6 的模式化了，不過需要 webpack 等等工具。
④ 如何實現前端模塊化開發
SeaJS 是一個適用於 Web 瀏覽器端的模塊載入器。
使用 SeaJS，可以更好地組織 JavaScript 代碼。
⑤ 對前端模塊化的理解有哪些
前端模塊化指的是：
1、將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件),
並進行組合在一起
2、塊的內部數據與實現是私有的,
只是向外部暴露一些介面(方法)與外部其它模塊通信
說白了就是把常見的工具函數和一些UI組件封裝，可以再後續的開發過程中非常方便的進行調用，這就是前端模塊化
⑥ 來到公司領導讓作前端天天看js但是用的是requirejs模塊化看不懂啊更別說寫了那位前輩給點撥點撥該怎麼學
多看看基礎知識。再怎麼模塊化，也是基礎知識拼起來的，你這明顯是基礎不行。
⑦ 前端模塊化的意義是什麼
前端模塊化的本質就是組件化、復用性，是為了提高開發效率而生的。
在網站發展的早期，前端頁面上的JavaScript僅是用來做頁面邏輯交互和表單驗證的，隨著Web2.0的興起，各種前端技術也層出不窮，前端代碼越來越臃腫了。而JavaScript由於設計時的定位問題，導至沒有「類」的概念歷返念，導致以前的JS代碼寫的都很分散，沒有「模塊化」的思想。
那時我們開發網站，仔飢前端頁面就存在一個「復用性」的問題，比如你寫了給網站A寫了一個表單驗證處理邏輯，等開發網站B時還是存在表單驗證邏輯，還需要再次寫代碼，浪費精力。
雖然可以寫成公共函數庫，但不可避免的存在多個函數庫某個函數命名沖突的情況，所以前端「工程化」難以實現。這時，國外很多大牛就意識到「模塊化」的重要性了，於是推出了不少模塊化的實現框架。
前端模塊化能給我爛凱們帶來以下便利：
組件化，提高生產力，代碼擴展性強；
解決了命名沖突，減少了全局空間的污染；
解決了文件依懶問題，讓開發者關注於業務的實現。
最後，不管項目的大小，我覺得模塊化都是很有必要的。⑧ nodejs：用ejs模板和gulp實現前端組件化
最近在用nodejs將公司商城的底層重寫。基於nodejs的強大，我從原本的只寫前端變成了寫全棧。
框架採用express,模板用ejs,前端用amazeui. 做完三個頁面後，設計突然說要改UI設計，我勒個去，郁悶地一個個頁面重新調整。下班之後反思一下，覺得花了太多時間在重復勞動上，是時候涉獵一下前端工程化的知識了。
用網路在互聯網暢遊了一番，總結了一下前端工程化的幾個關鍵要素：編碼規范化，結構模塊化，流程自動化。本文所述的方法屬於模塊化，但只是簡單地把dom，css,js拆分，以便更好地管理，而並非像vue框架那樣的組件化，但這種方式可能更易於理解，可以作為過渡。
這是原來的目錄結構
其中public目錄里存放的是靜態資源，按照傳統的做法，css文件夾種存放less文件和css文件，img文件夾中存放圖片資源，js中存放各頁面（views目錄中對應的頁面）的js文件。
當頁面越來越多，會遇到一些重復的部分。像圖中的側邊菜單，頂部搜索框，底部菜單，在幾個頁面都有。如果每個頁面拷貝一份樣式，js，dom,當需求方要更改樣式或者增加功能的時候，徒增工作量。
在一篇文章的啟發下（ 前端開發工程化探討 ），我將目錄結構改成如下：
為了標准化，每個組件里的文件命名都相同。以側邊工具欄為例，dom.ejs是一個模板文件：
如果不熟悉ejs模板的語法，可以網路一下。另外，此模板還支持嵌套，並傳入參數。
例如，下面是一個列表容器的dom結構，配合js可以實現上拉載入功能，但列表項的樣式可能不一樣，你可以在使用時再根據傳入的templateName參數決定用哪個模板，非常靈活。
在使用模板時，這樣嵌入頁面。
注意，應使用<%-include()%>,而非<%=include()%>。<%-%>表示內容原樣輸出，不進行運算。而<%=%>會生成運算後的內容。
然後，再來考慮js和css文件應當怎麼處理。如果在頁面中逐個引入組件的js和css文件，維護起來會非常不方便。所以我考慮將某個頁面涉及到的組件，還有頁面本身的js和css打包成一個。這樣做有個缺點，每個頁面的js和css文件會有重復的內容。如果用seajs或requirejs等模塊載入，可以解決重復的問題，但也可能增加項目的復雜度。考慮到打包後的文件只有10K大小，還是暫時使用打包的方法。有興趣的朋友也可以將js模塊化並測試一下性能。
打包涉及到gulp的應用，有許多文章談論到，而我是通過開源項目學習的。
首先我需要寫一個page-config.json文件，告訴gulp我要打包哪些資源：
將文件放在模板目錄的根目錄下面，與src,dist同級。src存放原文件，dist存放生成後的文件。
再寫一個gulpfile.js,用於自動構建。
下面是gulp文件的寫法：
在使用時，要在命令行安裝gulp，切換到gulpfile.js所在的目錄，運行gulp watch，這樣，每次在css和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對象
⑩ 如何學習前端模塊化知識
學習前端模塊化知識主要集中精力學好以下知識點：
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了再看這本書