http://www.reibang.com/p/077a088df697
前言
絕大部分開發(fā)人員(非前端)潜沦，可能因為沒有關(guān)注過，所以對前端開發(fā)仍然停留在叫久遠的時期蛤迎。即一個前端項目中只有html绰寞、css嬉挡、js，使用jquery來實現(xiàn)頁面功能。除此之外沒有其他概念邓了。
對此，借進行部門內(nèi)部分享機會媳瞪，科普一下如今的前端體系及開發(fā)的過程骗炉。使團隊成員能對前端開發(fā)有個簡單認識，提高團隊協(xié)作度蛇受。
開發(fā)模式
前后端分離后的架構(gòu)演變——MVC句葵、MVP和MVVM
MVC
前端的MVC應該與后端類似，具備著View兢仰、Controller和Model乍丈。
Model：負責保存應用數(shù)據(jù)，與后端數(shù)據(jù)進行同步
Controller：負責業(yè)務邏輯把将，根據(jù)用戶行為對Model數(shù)據(jù)進行修改
View：負責視圖展示轻专，將model中的數(shù)據(jù)可視化出來。
這種模式在開發(fā)中更加的靈活察蹲，backbone.js框架就是這種的模式请垛。
MVP
MVP與MVC很接近，P指的是Presenter递览，presenter可以理解為一個中間人叼屠，它負責著View和Model之間的數(shù)據(jù)流動，防止View和Model之間直接交流绞铃。
MVVM
首先镜雨，何為MVVM呢？MVVM可以分解成(Model-View-VIewModel)儿捧。ViewModel可以理解為在presenter基礎(chǔ)上的進階版荚坞。
View是ViewModel的外在顯示，和ViewModel的數(shù)據(jù)是同步的菲盾。一旦View中的數(shù)據(jù)發(fā)生變化颓影，會自動同步到ViewModel，然后ViewModel可以將變化的數(shù)據(jù)傳給Model懒鉴；反過來也是一樣的诡挂，Model中的數(shù)據(jù)一旦發(fā)生改變碎浇，就會將值傳給ViewModel，而ViewModel也會同步更新到view中璃俗。
現(xiàn)在的框架實現(xiàn)這樣的形式奴璃，各有各的不同。主要的三個框架angular2城豁、vue苟穆、react都是實現(xiàn)了這樣子的模式。
前端中的單頁面應用和多頁面應用
單頁面應用
只有一張Web頁面的應用唱星，是一種從Web服務器加載的富客戶端雳旅，單頁面跳轉(zhuǎn)僅刷新局部資源 ，公共資源(js间聊、css等)僅需加載一次攒盈。
單頁面應用結(jié)構(gòu)圖
多頁面應用
多頁面跳轉(zhuǎn)刷新所有資源，每個公共資源(js甸饱、css等)需選擇性重新加載
單頁面應用于多頁面應用對比
前端工程化沦童、模塊化、組件化
前端工程化
工程化是一種思想而不是某種技術(shù)叹话。
表現(xiàn)形式：模塊化偷遗、組件化。
舉個例子來說：要蓋一棟大樓驼壶，假如我們不進行工程化的考量那就是一上來掂起瓦刀氏豌、磚塊就開干，直到把大樓壘起來热凹，這樣做往往意味著中間會出現(xiàn)錯誤泵喘，要推倒重來或是蓋好以后結(jié)構(gòu)有問題但又不知道出現(xiàn)在哪誰的責任甚至會在某一天轟然倒塌，那我們?nèi)绻霉こ袒乃枷肴プ霭忝睿蜁犬媹D紙纪铺、確定結(jié)構(gòu)、確定用料和預算以及工期碟渺，另外需要用到什么工種多少人等等鲜锚，我們會先打地基再建框架再填充墻體這樣最后建立起來的高樓才是穩(wěn)固的合規(guī)的，什么地方出了問題我們也能找到源頭和負責人苫拍。
模塊化
舉簡單的例子,我們要寫一個實現(xiàn)A功能的JS代碼芜繁，這個功能在項目其他位置也需要用到，那么我們就可以把這個功能看成一個模塊采用一定的方式進行模塊化編寫绒极，既能實現(xiàn)復用還可以分而治之骏令。
組件化
組件化將頁面視為一個容器，頁面上各個獨立部分例如：頭部垄提、導航榔袋、焦點圖周拐、側(cè)邊欄、底部等視為獨立組件摘昌，不同的頁面根據(jù)內(nèi)容的需要速妖，去盛放相關(guān)組件即可組成完整的頁面。
模塊化聪黎、組件化對比
前端開發(fā)環(huán)境
Web前端開發(fā)涉及多種工具，這里將常用工具的安裝和配置進行說明备恤，提供了詳細的說明稿饰，為后繼的開發(fā)創(chuàng)建一個堅實的基礎(chǔ)。
NodeJS 和 NPM
一切從 NodeJS 開始吧露泊，官方網(wǎng)址：https://nodejs.org/
就和安裝java開發(fā)環(huán)境同理吧= = 喉镰，npm類似于maven。
webpack
本質(zhì)上惭笑，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(module bundler)侣姆，也稱為構(gòu)建工具。當 webpack 處理應用程序時沉噩，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)捺宗，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle川蒙。
git
這里大部分開發(fā)同學應該都懂蚜厉，就不詳細介紹了。一個分布式的版本控制系統(tǒng)畜眨。
gulp
用自動化構(gòu)建工具增強你的工作流程昼牛！
前端開發(fā)中提高效率的技術(shù)、框架
樣式類
sass康聂、less贰健、stylus: CSS 預處理語言,它擴展了 CSS 語言,增加了變量、Mixin恬汁、函數(shù)等特性伶椿。
styled-components:可以以組件化形式編寫css樣式的庫，使用ES6和CSS的最佳位來設(shè)置您的應用程序沒有壓力蕊连。
JS類
vue悬垃、angular2、react,現(xiàn)今最普遍使用的三大MVVM框架甘苍。
Lodash：是一個一致性尝蠕、模塊化、高性能的 JavaScript 實用工具庫载庭。
TypeScript
TypeScript是一種由微軟開發(fā)的自由和開源的編程語言看彼。它是JavaScript的一個超集廊佩，而且本質(zhì)上向這個語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?/a>。
ts代碼片段
數(shù)據(jù)交互
fetch靖榕、axios
Axios 是一個基于 promise 的 HTTP 庫标锄，可以用在瀏覽器和 node.js 中。
組件庫
......省略XXX字茁计，一大堆組件庫料皇。
前端本地調(diào)試
MockServer
什么是MockServer
MockServer可用于模擬通過HTTP或HTTPS（即服務，網(wǎng)站等）集成的任何系統(tǒng)星压。
當MockServer收到請求時践剂，它會根據(jù)已配置的活動期望來匹配請求。
一個預期定義了動作時所采取娜膘，例如逊脯，響應可以返回。
以上所有點都為籠統(tǒng)概括意在讓非前端團隊成員對前端體系能有一個初步的概念竣贪。
