現(xiàn)在的前端需要用的東西越來越多了宋彼。每間公司采用的技術(shù)不一樣，每個人都有自己的一套開發(fā)流程以及開發(fā)架構(gòu)仙畦。
現(xiàn)在前端的崗位職責(zé)我們可以看出输涕，前端工作可以分為兩種：一種是偏靜態(tài)，即HTML慨畸、CSS開發(fā)莱坎，一種是偏交互，即JavaScript寸士、前臺邏輯和前后端交互型奥。這兩種工作對人的要求是相差很大的，偏靜態(tài)的可以不涉及太多編程和邏輯碉京，對視覺體驗非常敏感厢汹、而后者對JavaScript要求較高、要有一定的編程能力谐宙、熟悉前后端協(xié)作模式烫葬、熟悉HTML和CSS、有一定的前端架構(gòu)能力。
前后端分離
? 盡管現(xiàn)在前端框架以及架構(gòu)又或者技術(shù)包羅萬有搭综，作為一個前端垢箕，你可能需要懂Angulars；Nodejs;React;Backbone兑巾；Vue等等等一堆東西条获。想象一下這個場景多么美好：前端來決定某個模板是服務(wù)端渲染還是客戶端渲染，當(dāng)首屏的時候蒋歌，就在nodejs里面生成HTML帅掘，不是首屏的時候，就AJAX過來在瀏覽器端渲染展示堂油。
現(xiàn)階段我在公司開發(fā)的就是采用Angular架構(gòu)的一個架構(gòu)修档，關(guān)鍵詞叫：SPA(Single Page Application)也就是所謂的單頁應(yīng)用；切換頁面或者場景的時候并不會跳轉(zhuǎn)頁面府框，只是去改變鏈接上的hash值吱窝，這個錨點由route監(jiān)聽到，從而就由前端實現(xiàn)了對URL的掌控迫靖，采用的前后端的分離院峡，已經(jīng)基本分的很清楚了，后臺只管數(shù)據(jù)輸出和業(yè)務(wù)邏輯處理系宜，前端負(fù)責(zé)交互邏輯和界面展示撕予，其他方面就需要前后端在接口的方面約定好，以避免不必要的麻煩蜈首。
項目目錄結(jié)構(gòu)
|--porjcet
? ? |--PC端
? ? ? ? |---js
? ? ? ? ? ? ? ?|--common
? ? ? ? ? ? ? ? ? ? ?|--Ng-route.js
? ? ? ? ? ? ? ? ? ? ?|--util.js
? ? ? ? ? ? ? ? ? ? ?|--API.js
? ? ? ? ? ? ? ?|--controller
? ? ? ? ? ? ? ? ? ? ?|--xxx.js
? ? ? ? ? ? ? ?|--lib
? ? ? ? ? ? ? ? ? ? ?|--require.js?
? ? ? ? ? ? ? ? ? ? ? |--jquery.min.js
? ? ? ? ? ? ? ? |--module
? ? ? ? ? ? ? ? ? ? |--header.js
? ? ? ? ? ? ? ? ? ? |--footer.js
? ? ? ? |---css
? ? ? ? ? ? ? |--xx.css
? ? ? ? |---html
? ? ? ? ? ? ? ?|--模塊目錄（根據(jù)項目需要劃分模塊）
? ? ? ? ? ? ? ? ? ? ?|--個人頁 xxx.html
? ? ? ? ? ? ? ?|--主頁home.html
? ? ? ? ? ? ? ?|--列表頁list.html
? ? ? ? |--index.html
? ? ? ? ? ? ?|--heaer.html
? ? ? ? ? ? ?|--container.html
? ? ? ? ? ? ?|--footer.html
? ? |--touch移動端
? ? ? ? |---js
? ? ? ? |---css
? ? ? ? |---html
目錄說明
? 模塊劃分目的在于促進復(fù)用实抡，并行開發(fā)，以提升開發(fā)效率』恫撸現(xiàn)在把項目劃分為4個目錄
分別是:HTML;CSS;JS;IMG; 通過地址欄的URL做到按需加載吆寨；再在加載的同時進行模塊化劃分；把每個模塊都加載到index里面的container踩寇； index.html只是一個容器啄清，它是轉(zhuǎn)載各模塊的容器；
JS目錄：
common目錄：放置公用的文件俺孙；
? ? ? ? ? ?|--Ng-route ?： 配置頁面的唯一ID入口辣卒；根據(jù)當(dāng)前地址欄的url進行配置相對應(yīng)的模塊ID進行按需加載HTML;CSS;JS
? |--util ：全局方法；公用屬性睛榄；一些公用方法荣茫、自己封裝的插件都可以放到里面調(diào)用；
? |--API：顧名思義就是后端配的API數(shù)據(jù)文檔
controller目錄：放置處理對應(yīng)頁面數(shù)據(jù)以及邏輯功能的js文件
lib目錄：放置插件庫场靴；Jquery啡莉；sea或者require 的公用插件庫
module目錄：需要進行對外提供接口依賴的文件港准；必須要對外提供接口:exports；到了需要依賴的目錄文件就可以直接進行依賴
CSS目錄：
? ?把每個模塊的CSS都放里面咧欣；可做目錄區(qū)分
HTML目錄：
? 對應(yīng)每一個目錄或者模塊下的HTML文件浅缸；便于修改、查找魄咕；
這樣配置項目有幾個好處：
1. 極大的簡化前端開發(fā)衩椒，減輕前端開發(fā)的壓力；頁面加載模式方法都是用AJAX去調(diào)用生成哮兰；
2. 實現(xiàn)了很好的前后端開發(fā)分離毛萌，前端開發(fā)工程師甚至不需要知道后端返回的數(shù)據(jù)格式，只需要知道請求地址即可執(zhí)行開發(fā)奠蹬；
3. 具有良好的可用性，即便是在客戶端腳本出錯的的情況下嗡午，系統(tǒng)基本功能都能夠正常運行囤躁；
主要邏輯圖：
各種架構(gòu)模式都有自己的特點，身為一個前端工程師這些都是需要了解的荔睹，
然而狸演，更重要的是，結(jié)合項目實際僻他，靈活運用隨機應(yīng)變宵距。
各種庫豐富多彩，它們也是為了解決那個階段的問題而出現(xiàn)的吨拗。
