從native開發(fā)轉到web開發(fā)到現(xiàn)在也將近一年了籍滴，零零散散的學習了很多東西伙菜，但是始終沒有系統(tǒng)化的感知，最近這段時間刻意將知識進行了一遍梳理垦搬，以更好的理解前端世界。本篇文章不會去談論某個技術點艳汽，而是從一個宏觀的視角來看前端開發(fā)猴贰。盡量從我個人開發(fā)中遇到的一些問題和困惑進行闡述（如有錯誤歡迎指正）。?

一河狐、web世界的基礎?

眾所周知米绕，web世界有三大基石html、css馋艺、javascript,這三塊構成了web世界栅干，而每一部分的都要很多的知識積累才能運用的游刃有余。剛開始丈钙，單純的來看這三個的每一部分都不會太復雜非驮，感覺看一兩天就可以入手寫代碼了交汤，事實上對于初級入門的人來說雏赦，通過簡單的html、css芙扎、js就能構造出一個美麗的界面星岗，確實是這樣，但是隨著學習的加深戒洼，以及實踐工程中遇到的問題俏橘，你會發(fā)現(xiàn)，僅僅掌握這些遠遠還不夠圈浇。本篇文章將會就我學習開發(fā)中遇到的疑問進行闡述寥掐。

二、主流問題的理解

1磷蜀、html5到底是干啥的召耘？

為什么感覺和移動設備緊密關聯(lián)？ html的前世今生網(wǎng)上都可以搜得到褐隆，簡單概括html5到底改變了什么污它？ 大概總結下：html5具有更好的語義特性、本地存儲特性、設備兼容特性衫贬、網(wǎng)頁多媒體特性德澈、css3特性等。 在我的初始概念里面html5貌似是和移動端緊密相關的固惯，實時上不是這樣的梆造，他同樣適用于PC端，他是web的新一代開發(fā)標準缝呕。只不過h5大大提升了對移動端的支持能力“囊ぃ現(xiàn)在有些桌面瀏覽器對html5的支持還不健全，有些新特性不見得能生效（現(xiàn)代瀏覽器支持度較高）供常，而移動設備上（android摊聋、ios）的瀏覽器（或webview）大都是webkit內(nèi)核，對html5的支持度較高栈暇，所以一般在移動設備上使用不會出太大的兼容性問題麻裁。

2、javascript的標準是什么源祈？和ECMAScript有什么關系煎源？?

javascript剛開始是有Netscape公司開發(fā)出來的，命名是為了跟上java這股熱風（但和java毫無關系）香缺。隨后微軟進入了瀏覽器市場手销，由此催生了javascript的標準化，而這個標準名稱就叫ECMAScript,從此javacript正式成為一門語言图张。實際上锋拖，javascript是ECMAScript的超集，可以認為是和typescript一樣的存在祸轮。他們都實現(xiàn)了ECMAScript的標準兽埃。我們現(xiàn)在所說的標準規(guī)范都指ECMAScript規(guī)范，當前流行的最著名的就是ES5适袜、ES6等標準柄错。

三、為什么現(xiàn)在一個web工程如此“繁雜”?

前面說到苦酱，單純的一個web頁面售貌，只需要html、css樣式疫萤、js代碼就可以完成颂跨，看起來簡單明了，但是為什么現(xiàn)在很多前端應用代碼看起來已經(jīng)不單單是html给僵、css毫捣、js（甚至連html详拙、js的影子都看不到）？為什么看不到后端工程代碼了蔓同？為什么代碼中出現(xiàn)了一些看不懂的寫法（我明明已經(jīng)學會了html饶辙、css和js）？為什么現(xiàn)在前端工程還出現(xiàn)了一些類似于配置的文件（如常見的webpack.js斑粱、package.json弃揽、.bablerc等等）？為什么現(xiàn)在前端工程看起來變得越來越“繁雜”则北？這些都是為什么矿微？

一句話，這些都是為了提升效率尚揣、便于工程維護管理涌矢、優(yōu)化應用性能而產(chǎn)生的。 我不用這些東西可以嗎快骗？可以娜庇，但是你的項目會變得很難維護和管理，而且開發(fā)效率低下方篮。

三名秀、這些需求都是怎么產(chǎn)生的？

1藕溅、前后端分離?

早期web開發(fā)一般是存在于后端工程匕得，前后端在一個工程里面，而且開發(fā)相互依賴制約巾表，無法做到協(xié)同開發(fā)汁掠，為此前后端分離就此產(chǎn)生，前端擁有自己的項目工程攒发，更多的關注視圖展示调塌、頁面渲染這一層晋南，有后端提供渲染所需數(shù)據(jù)接口等惠猿，二者通過網(wǎng)絡（http...）進行交互，這樣前端后端實現(xiàn)了解耦负间，可以只關注自己的業(yè)務邏輯偶妖，而不相互制約。所以很多工程已經(jīng)是純前端代碼政溃，后端只提供api數(shù)據(jù)接口即可趾访。

2、模塊化開發(fā)?

模塊化故名思議是化整體為局部的意思董虱，這樣不僅方便編碼扼鞋，而且有利于系統(tǒng)職責劃分申鱼，使得系統(tǒng)結構更加清晰，更便于維護云头。模塊化的出現(xiàn)能更好的管理項目的依賴和版本捐友，且可以控制依賴的加載順序。模塊化并不是任意的劃分溃槐，而是要遵循一定的標準匣砖。前端由于各種各樣的原因，模塊化（js）標準出了很多個昏滴，其中最有名氣的就是AMD猴鲫、CMD、CommonJs谣殊、ES6+等模塊化標準拂共。所以現(xiàn)在看前端很多庫代碼都有不同的模塊實現(xiàn)方式，這些都給開發(fā)人員帶來了一定的繁瑣性姻几，比如不同規(guī)范模塊需要采用不同的寫法匣缘。這些規(guī)范的特性這里不累述，從目前來看鲜棠，各個標準共存的現(xiàn)狀還很多肌厨，但我認為ES6模塊化標準將會逐漸替代其他標準。

3豁陆、優(yōu)秀的框架?

原始的web應用開發(fā)柑爸，一般會采用直接操作dom等形式，這種開發(fā)不僅會使代碼變的復雜和難以維護盒音，同樣性能消耗也得不到保證表鳍。為了解決這些問題，一系列優(yōu)秀框架應運而生祥诽。如react譬圣、vue、angular2等雄坪。本人在開發(fā)中使用過react厘熟、vue等框架，確實不僅能大大提升開發(fā)效率维哈，還能更好的優(yōu)化性能绳姨。

4、新語言的出現(xiàn)?

1阔挠、ECScript6 es6是新一代javascript標識飘庄，引入了很多新的思想，如果模塊規(guī)范化购撼、class預發(fā)跪削、箭頭函數(shù)等等谴仙，這些東西出現(xiàn)大大提升了開發(fā)效率。?

2碾盐、TypeScript Microsoft開發(fā)的偏向靜態(tài)的語言狞甚，他是javascript的一個超集，能讓開發(fā)者擁有開發(fā)靜態(tài)類型檢查語言的體驗廓旬，減少未知性哼审。?

3、LESS等 這一類語言是一種CSS的預處理器孕豹，主要是解決了CSS的一些痛點涩盾，比如增加些變量支持、作用域支持等励背，除此之外春霍，這些語言基本和CSS寫法一致。

四叶眉、還缺點什么址儒？?

前面提到了前端發(fā)展過程中出現(xiàn)的各類技術，這些技術的出現(xiàn)大大提升了開發(fā)效率衅疙，方便了開發(fā)人員莲趣。但是福兮禍之所倚，事物都有兩面性饱溢，這些技術的出現(xiàn)固然解決了很多痛點喧伞，但也引入了一些需要額外處理的糟點。

1绩郎、痛點?

首先潘鲫，采用這些技術寫的源代碼都無法直接在瀏覽器中運行，瀏覽器只識別符合自己標準的代碼肋杖。比如采用es6語法寫的代碼無法再直接瀏覽器中運行（不支持）溉仑，所以這就需要額外的手段來對源代碼進行轉換，這就引出了打包構建工具:webpack状植、gulp浊竟、grunt等。

由上面的探討可知浅萧，構建要做的工作就是為了解決這一類痛點逐沙。因此哲思，一般的構建工具會完成以下工作：?

（1）代碼轉換：比如將TypeScript編譯成JavaScript洼畅，將less編譯成css等。?

（2）模塊合并：前面提到現(xiàn)在都是模塊化開發(fā)棚赔，所以構建工具需要將多個模塊合并成一個文件帝簇，這樣才構建出一個可以面向用戶交互的完整頁面徘郭。?

（3）壓縮：主要是壓縮js、css丧肴、html残揉、圖片等。?

（4)其他功能支持（如預發(fā)檢查等等...） 上面提到的一些構建工具或多或少都能解決這些痛點芋浮。

2抱环、webpack是什么，為什么使用的如此廣泛纸巷？?

因為當前前端開發(fā)基本都是采用模塊化（+新技術+新框架）的開發(fā)模式镇草，而webpack是專注于構建模塊化的工具，可以提供一站式解決方案瘤旨，使用的非常多梯啤。webpack的默認配置文件是項目根目錄下的webpack.config.js,這里會配置如何構建的描述說明，最后會按照commonjs規(guī)范（因為webpack構建是運行在node.js環(huán)境下）導出該描述對象存哲。真對上文新技術語法因宇，在webpack.config.js配置相關的loader即可，這些loader會對其進行轉換祟偷，以運行于瀏覽器中察滑。webpack的內(nèi)容很多，這里不是想討論如何使用修肠，而是想表明它出現(xiàn)并繁榮的原因杭棵。

3、npm是什么

web開發(fā)中氛赐，通常所有的模塊都是以包的形式存在的魂爪，而這些包是通過npm進行管理的。這里就引出了javascript世界中最有名的包管理工具-npm艰管，npm具體能做什么有很多資料可查滓侍，簡單總結就是管理各種依賴，前面說現(xiàn)在前端開發(fā)基本是模塊化開發(fā)牲芋，而這些模塊一般會以npm包的形式存在撩笆，類似于maven、gradle的概念缸浦。前端工程一般都包含一個名字為package.json的配置文件夕冲，這里會展示出項目所以來的包。 比如想使用webpack進行項目構建裂逐，就可以通過npm進行包安裝歹鱼，然后即可使用。

五卜高、總結

任何一個領域要走的路都很長弥姻，從了解到熟練運用還只算入門南片，前端還有很一些高級特性如js原型鏈、新生代的一些編程思想庭敦、虛擬dom等疼进，還有編譯、執(zhí)行以及渲染引擎原理過程也需要了解秧廉，繼續(xù)向前~