『壹』 如何實現前端模塊化開發
根據蝦米站長文章指出，現在前端的快速發展階段可分為前端美工，前端開發，前端架構。一個好的前端美工，至少要具備美術功底，ps技能，還能創意的設計理念。一個好有前端開發，你至少具備頁面切圖，腳本開發，頁面優化等相關知識。
『貳』 前端頁面的信息展示主要包括三個層面
最准確的網頁設計思路是把網頁分成三橋吵個層次，即：結構層毀高、表示層、行為層。
1.結構層（structural layer）。由 HTML 或 XHTML之類的標記語言負責創建。標簽，也就是那些出現在尖括弧里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關於如何顯示有關內容的信息。例如，P標簽表達了這樣一種語義：「這是一個文本段。」
『叄』 評論：商城網站設計的前端界面功能模塊有哪些
1、網站建設模板風格自定義功能
網站建設模塊自定義設置功能，即通過系統內置的模板引擎，可以方便的通過後台可視化編輯，設計出符合自身需求的風格界面。
2、商城網站的商品多圖展示功能
隨著電子商務的發展，商品圖片成為網站吸引消費者的第一要素，商城網站的商品多圖展示即提供前台多張圖片的展示，從而提升消費者的購物慾望。
3、商城網站的廣告模塊
商城的自定義廣告模塊，是內置在系統中的廣告模塊，網站管理員能夠順利的通過操作就可以在前端界面中添加各種廣告圖片。
4、商城網站的商品展示功能
網站的商品展示功能通過在前端界面，以標準的或者其他個性化的方式向用戶展示商品各類信息，完成購物系統內信息流的傳遞。
5、網站建設不可少的購物車功能
商城網站的購物車功能是為了讓用戶可以對想要購買的商品進行網上訂購，在購物過程中，方便隨時增刪商品以及統一結算商品價格。
以上提到的網站功能模塊就是商城網站建設必備的前端界面功能，是完善的購物商城網站的基本功能。
『肆』 什麼是前端模塊化開發
模塊化更一種開發規范，比如cmd amd 是為了更好的解藕，比如一個網站，按照不同的模塊來開發，比如你有個評論區，a 項目有，b 項目有，如果僅是單純的模塊開發，這個js 文件你就可以單獨來回引用，
更比如 ，一個頁面 分好多個功能， 這時候你要是都寫在一個js 中 會越來越大，
而你把他分成不同的模塊，
比如評論是一塊
分頁又是一塊，
已經上線，或你不做了，後期別人拉手，或你接手別人的項目， 這時候來個需求讓你把分頁去掉，或修改 你可以清楚的找到對應模塊文件 進行修改 或去掉
模塊是自定義的，
組件，更想當於一個通用的東西，有的分功能組件，有的分業務組件
大圖切換，這種就是單純的一個效果展示，只要調用就ok
一個分頁，也是只單純的調用，
組件更是一個多處都可以使用 ，不需要再單獨開發的
『伍』 web前端的核心技術是什麼 分別有什麼作用
與其他計算機主流技術所不同的是，Web前端所包含的知識模塊很多，且隨著實際需求的變化一直在更新迭代。目前而言，HTML、CSS、JS是目前前端技術最為基礎也是最為主要的三大基礎模塊。
HTML(5)
是一門標記型語言，主要由一些具備特殊含義的標簽構成。HTML（Hyper Text Mark-up Language ）即超文本標記語言，是用於描述網頁文檔的一種標記語言。設計HTML語言的目的是為了能把存放在一台電腦中的文本或圖形與另一台電腦中的文本或圖形方便地聯系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網路的其它電腦上。我們上網所看到網頁，多數都是由HTML寫成的。「超文本」是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。而「標記」指的是這些超文本必須由包含屬性的開頭與結尾標志來標記。瀏覽器通過解碼HTML，就可以把網頁內容顯示出來，它也構成了互聯網興起的基礎。
CSS
是一門描述性語言，主要一系列選擇器(html元素)和屬性構成。層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
JavaScript
是一門腳本編程語言，包含類似java的語法(數據類型，數組，條件分支，循環，對象..)。是一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。
『陸』 如何學習前端模塊化知識
學習前端模塊化知識主要集中精力學好以下知識點：
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了再看這本書
『柒』 如何理解前端模塊化
前端模塊化
在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對象
『捌』 重慶前端html5分享大型WEB項目不可缺少的幾個模塊
隨著「互聯網+」概念的普及，和移動互聯網技術的成熟，越來越多的公司，需要更加智能、高效、合理、人性化的交互，對web前端的需求也會越來越大，同時由於web前端的技術框架種類繁多，更新也非常快，這樣也需要大量的前端人員進行自己的技能提升。我們在做一個大型項目的時候，需要很多模塊與元素去構建，接下來，重慶前端html5開發培訓為大家分享在一個WEB項目中必不可少的幾個模塊。
一：webpack
什麼是webpack?
為什麼要用webpack?
傳統web開發——在傳統的web開發中，對於各種各樣的資源，我們會通過html中的各種標簽引入，那css資源文件來說，傳統總，通常我們在定義好的css文件夾中創建一個css文件格式的的文件，在裡面定義好的樣式，在html中，通過標簽將css資源引入進來，小型的項目這樣做並沒有什麼大的問題，而且還比較快速。但隨著公司的業務發展擴大，項目的也變得越來越大，這種方式的弊端就慢慢顯現，項目臃腫，維護變得困難。webpack開發——在webpac開發中，通過我們定義好的資源載入規則，面對上面的大型項目時，在我們要新增資源文件，我們不需要再苦苦到幾千行html文件中導入你新增的資源文件，只需要在你定義好的文件夾中新增文件，便可以正式投入到開發中了。這樣的話大大簡化了開發和維護的成本。
二：npm
什麼是npm?
npm(nodejs packages manager)翻譯過來就是node安裝包管理工具，通俗來說，在開發過程總，一些常用的功能和實現，開發人員可以將他們封裝起來，上傳到npm，交給npm管理，其他開發人員變可以npm的命令，見這些封裝好的代碼塊下載到自己的項目中供自己使用，這樣避免了大家重復造輪子的尷尬現象，大大減少了開發難度和時間。
三：vue.js
什麼是vue.js?
在講vue.js之前，先一起來看看jquery，因為很多人都是從jquery轉到vue.js，在轉變的過程中，發現有些人開始學vue.j時候很難寫出一個應用出來，在使用原生的js無論是對節點的獲取，事件的監聽和ajax的處理，都存在兼容的問題，開發過程中必須寫大量的兼容性代碼。而jquery出現正好的解決了這個問題。vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue採用自底向上增量開發的設計。Vue的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。
vue.js——獨特的一面
讓從jquery轉vue.js的開發人員很詫異的是，vue.js的視圖層和model層是響應，我們只要修改了model層的數據，視圖層會時時顯示最新的數據結果。數據驅動，在DOM思想中，每當我們想操控一樣東西，我們總想去獲取節點，在對這個節點進行操作。而在vue.js中，這種想法是多餘的，我們可以通過控制實例的的數據，來達到我們需要的結果。
vue.js可以做什麼
vue.js只有30多k，相對動不動就300多k的庫來說，這是非常適合來開發H5應用的，結合hbuider的runtime和native.js，開發出來的應用不僅跨平台，而且性能也相當不錯，功能也和native app沒有什麼差異。
重慶中天學校JAVA培訓老師建議畢業生，畢業了不要盲目挑戰，做什麼項目無所謂，關鍵是要有成長機會。大項目小項目沒關系，主要是要能學到東西，不要好高騖遠，不要隨便下結論，不要對重復的工作厭倦，出了問題及時反饋領導，不要怕。