與文章的 上篇 相隔近 6 個月的時間瑰步，我才開始整理下篇。這 6 個月來我一直在不間歇地做運(yùn)營活動的 H5 頁面璧眠，寫了很多重復(fù)的代碼缩焦，做了很多簡單的開發(fā)。因此责静，我還談不上對 16 年的前端技術(shù)棧有多么深刻而有意義的解讀袁滥。在這篇文章里，我沒法給出富有創(chuàng)新的代碼灾螃，我只能羅列出我學(xué)習(xí)和工作軌跡里所用到的工具與資源题翻。
這篇文章的是寫給進(jìn)擊的前端學(xué)習(xí)者，中級的前端開發(fā)（這并不意味這篇文章的內(nèi)容不適合初學(xué)者腰鬼，只是很多內(nèi)容可能難以顧及初學(xué)者觸及的深度）嵌赠。那么我依然從三駕馬車開始談吧塑荒！
三駕馬車：HTML5 + CSS3 + JavaScript
HMTL5 是 HTML 標(biāo)準(zhǔn)的最新演進(jìn)版本。它是一個新的 HTML 語言版本包含了新的元素姜挺，屬性和行為齿税，同時包含了一系列可以被用來讓 Web 站點(diǎn)和應(yīng)用更加多樣化，功能更強(qiáng)大的技術(shù)初家。從對 Web 開發(fā)人員有用這點(diǎn)觸發(fā)偎窘，和基于它們的各自功能，可以將 HTML5 技術(shù)的資源歸類成若干組：
- 語義：能夠更恰當(dāng)?shù)拿枋鼍W(wǎng)頁的內(nèi)容
- 連通性：能夠和服務(wù)器使用創(chuàng)新的新技術(shù)方法進(jìn)行通信
- 離線 & 存儲：能夠讓網(wǎng)頁在客戶端本地存儲以及更高效地離線運(yùn)行
- 多媒體：使 video 和 audio 成為了 Web 中的一等公民
- 2D/2D 繪圖 & 效果溜在，矢量圖：提供更加豐富的呈現(xiàn)選擇
- 性能 & 集成：提供了非常顯著的性能游湖和更有效的計算機(jī)硬件使用
- 設(shè)備訪問 Device Access：能夠處理各種輸入和輸出設(shè)備
不可否認(rèn)陌知，這段解釋我摘抄自 MDN。同時還有這個網(wǎng)頁更詳細(xì)的提供了 Web 技術(shù)示例掖肋，MDN 是 Mozilla 維護(hù)的技術(shù)文檔歇攻。谷歌也同樣提供了 Web 開發(fā)的指南舌狗，而且 google 提供的是具體的開發(fā)更優(yōu)秀 Web 網(wǎng)頁的方法和理論。
我記得在上篇我推薦的 HTML5 參考還是 w3cschool，但現(xiàn)在逮诲，我認(rèn)為它完全過時了制恍，并且毫無創(chuàng)意沪羔。它不像 MDN 那樣提供完善的技術(shù)文檔和參考資源赁酝，也不會像 google 告訴你如何做出更好的 Web 網(wǎng)頁。使用 w3cschool 也許能讓你做出一兩道小菜紊浩，但是使用卻不能讓你做出滿漢全席窖铡。
CSS3 ，在入門后我更關(guān)注的是如何使用 less 或 sass 坊谁。這樣做的目的主要是解決兩個問題：
- 避免類命名重復(fù)
- 實現(xiàn)代碼的復(fù)用
但是费彼，我想這里除了添加兩個官網(wǎng)地址，還可以提到 CSS Modules口芍。這是一篇詳細(xì) CSS Modules 的文章 箍铲，它同樣是為了解決上面的兩個問題。
與此同時鬓椭，我推薦一本關(guān)于 CSS3 的書籍——《css screts》颠猴。這本書給出了很多有意思的 CSS 技巧，比如：實現(xiàn)條紋背景小染，實現(xiàn)各種形狀的 DIV 等等翘瓮，我在上篇文章中有推薦過，但那時沒有給出電子書的下載氧映，上面的鏈接里是中文版的電子書春畔。
當(dāng)然脱货，CSS3 里還有更有意思的新的布局方式——flexbox岛都，我依稀記得年初剛接觸這個概念的時候律姨，在 Can I Use 上看到它兼容性還只到 70% 哦，但現(xiàn)在已經(jīng)到 97%臼疫。
JavaScript 是腳本語言剩燥，從 ES6 開始變得更加強(qiáng)大，補(bǔ)充了非常多的新特性立倍。因為我自己也還在學(xué)習(xí)中灭红，就不討論更多具體的語法了。但是口注，我想在經(jīng)歷過 16 年前端圈的快速變化和發(fā)展后变擒，作為仍然在努力追趕的前端開發(fā)而言，掌握最基礎(chǔ)的知識才能夠以不變應(yīng)萬變寝志。
同時娇斑，我認(rèn)為大多數(shù)前端開發(fā)需要增強(qiáng)的技能是去掌握基于 JavaScript 的開發(fā)模式和算法。這里推薦三本書：
你不知道的 JavaScipt(上卷)
Javascript 設(shè)計模式與開發(fā)實踐
數(shù)據(jù)結(jié)構(gòu)與算法 Javascript 描述
理解產(chǎn)品澈段、設(shè)計
很多時候悠菜，程序員被認(rèn)為只需要埋頭寫代碼，只要和電腦進(jìn)行溝通败富。那么悔醋，作為前端也不例外應(yīng)該更懂 0 和 1。但實際情況可能并非如此兽叮，前端要實現(xiàn)的是整個產(chǎn)品最接近用戶那一側(cè)芬骄，給用戶最直觀視覺呈現(xiàn)和功能呈現(xiàn)的代碼（當(dāng)然，這里的前端包括了開發(fā) Web鹦聪，App账阻，和傳統(tǒng)的桌面應(yīng)用）。
前端首先要理解的就是產(chǎn)品經(jīng)理給出的那份原型里面的功能邏輯泽本，然后要對用戶使用產(chǎn)品的場景和流程達(dá)到和產(chǎn)品經(jīng)理一樣的熟練淘太，因為前端需要從原型開始實現(xiàn)產(chǎn)品，任何不合理的需求都會使開發(fā)變得異常困難。所以蒲牧，我認(rèn)為前端理解產(chǎn)品不僅僅是理解原型撇贺，而是對產(chǎn)品從前端代碼側(cè)的一種解構(gòu)（這句話套用到后端和數(shù)據(jù)工程師，我以為同樣受用冰抢。任何一個開發(fā)都應(yīng)該理解自己開發(fā)的產(chǎn)品松嘶。），與產(chǎn)品經(jīng)理從用戶挎扰、運(yùn)營和商業(yè)等多維角度解構(gòu)翠订，重構(gòu)產(chǎn)品是一種補(bǔ)充的關(guān)系。
而 “理解設(shè)計” 就是為了按照設(shè)計 1 像素還原（有些設(shè)計稿可能無法完美實現(xiàn)遵倦，這就是要在定稿之前避免的）尽超。我稍微想了下這幾個問題：
- 理解設(shè)計的哪些部分？配色方案梧躺，整體布局橙弱，文案。
- 如何理解設(shè)計里的變化燥狰？自適應(yīng)設(shè)計棘脐、響應(yīng)式設(shè)計都是變化的設(shè)計。要在變化的屏幕設(shè)備里實現(xiàn)設(shè)計稿龙致，那么前端就必須理解設(shè)計里變化的部分蛀缝。
- 如何理解設(shè)計里的動態(tài)？這個指的就是 “交互” 嘛目代，我強(qiáng)行歸納到設(shè)計里了屈梁。
好吧，這個命題對我而言稍微有點(diǎn)強(qiáng)人所難榛了，其實我也正在努力學(xué)習(xí)這些在讶，這里就只能放一些我正在關(guān)注的網(wǎng)站和博客了：
美啊網(wǎng)
UIGREAT
圖月志
前端性能和安全
前端的性能和安全是兩個大命題，這里只能提及一二霜大。一是我自己也要注意這方面知識和經(jīng)驗的積累构哺，二是希望同樣學(xué)習(xí)的前端伙伴們能夠注意到這些。
前端的性能無疑是在開發(fā)過程中就要時刻注意和留心战坤，但是性能的優(yōu)化也是隨著產(chǎn)品的復(fù)雜度才會變的重要曙强。所以，一開始能夠避開那些影響性能的地方應(yīng)該就可以了途茫。這里列出幾篇文章碟嘴，即提及了如何分析網(wǎng)頁性能也給出了性能優(yōu)化的方案：
那些年我們用過的顯示性能指標(biāo)
無線性能優(yōu)化：Composite
web 性能優(yōu)化之：no-cache 與 must-revalidate 深入探究
Javascript 高性能動畫與頁面渲染
HTTP 權(quán)威指南
Web 性能權(quán)威指南
圖解 HTTP
前端的安全比起性能更是要時刻注意的。然而囊卜，因為我一直沒有在實際開發(fā)中深入的接觸如何使前端更安全娜扇，最多就是避免常見的 xss 攻擊错沃，過濾用戶輸入信息等，但這一部分卻是我認(rèn)為極為重要的雀瓢，保證網(wǎng)站的安全是對企業(yè)和用戶必須承擔(dān)的責(zé)任捎废。
這里我暫時只能提供下面這本電子書：
Web 前端黑客技術(shù)揭秘
前端流行框架
React 還是 Vue？
坦白說致燥，就目前而言，我并沒有使用過 React 或 Vue 框架完成過項目排截。實際上嫌蚤，這兩也不能稱為框架，React 自己都說過它只是 MVC 中的 view断傲。真正稱的上前端框架的是 Augular脱吱、backbone 等。但是無論如何還是要選擇一個认罩，因為前端入門都快要求要懂 React 或 Vue,Augular 了箱蝠。
從學(xué)習(xí)曲線上看，Vue 會比很多框架都要容易一些垦垂。首先宦搬，它的主要開發(fā)是尤雨溪（微博 ID：尤小右），所以中文文檔完善（當(dāng)然很多其他語言的文檔也都有）劫拗；其次间校，Vue 比起 React,Augular 更容易理解。所以页慷，可以先從 Vue 入門學(xué)習(xí)實踐一些項目憔足。
但最好也學(xué)一下 React。
……
果然酒繁，書到用時方恨少滓彰。
JavaScript 函數(shù)式編程
暫時不會，以后再說州袒。但是揭绑，聽說很火的概念。有空可以了解下郎哭，因為 React 底層好像用了大量的函數(shù)式編程的思想洗做。
Linux 和數(shù)據(jù)庫
我在上篇提及了 BAE，SAE 這類 sass 可以快速部署網(wǎng)站應(yīng)用彰居，但實際上這樣的局限很大诚纸， 并不利于前端全面認(rèn)識服務(wù)器和后端語言的面貌。所以陈惰，當(dāng)學(xué)有余力畦徘，不妨自己在 linux 上搭建真實的服務(wù)器環(huán)境毕籽。
linux 虛擬機(jī)鏡像下載
其實在虛擬機(jī)中搭建服務(wù)器環(huán)境或者購買 阿里云，騰訊云主機(jī)服務(wù)都可以井辆，關(guān)鍵是自己動手實踐能夠?qū)Ψ?wù)器環(huán)境有所認(rèn)識关筒。
數(shù)據(jù)庫 是數(shù)據(jù)存儲的地方，很多時候前端要理解后端接口杯缺，要根據(jù)數(shù)據(jù)庫表的設(shè)計才能夠理解蒸播。因此，我也自己嘗試使用 mysql 和 MongoDB 寫過小網(wǎng)站萍肆。但這部分我也研究不深袍榆，僅僅是到了通過文檔能夠理解數(shù)據(jù)庫的讀寫改查。下面提供一本 MongogDB 的電子書塘揣，而 mysql 的資料目前實在寥若寒星包雀。
MongoDB 實戰(zhàn)
其他
最后再補(bǔ)充一些關(guān)于編碼規(guī)范、代碼測試亲铡、構(gòu)建工具才写、協(xié)同工作、文檔編寫的內(nèi)容奖蔓。因為這部分需要懂得但不是前端的核心競爭力量（我自己的看法而已赞草，我認(rèn)為前端的核心競爭力是開篇頭三節(jié)內(nèi)容）
代碼測試
因為上篇有提及編碼規(guī)范，也基本沒有需要補(bǔ)充的吆鹤，故不再單列一小節(jié)來講了房资。關(guān)于代碼測試，這部分我也使用不多檀头，但是我覺得當(dāng)開發(fā)復(fù)雜度高到如果 native app 的時候轰异，代碼能夠自測肯定能起到事半功倍的效果。但是暑始，目前前端圈對代碼測試的要求似乎并不高搭独。這里我只提供一些文章參考：
(譯) 學(xué)習(xí)如何構(gòu)建自動化、跨瀏覽器的 JavaScript 單元測試
前端可視化的測試實踐
【持續(xù)集成你的項目】為你的項目創(chuàng)建自動化測試和代碼覆蓋率測試
構(gòu)建工具
目前 grunt 應(yīng)該是會被淘汰的了廊镜，至于 gulp牙肝、webpack 或者 rollup 誰會成為前端構(gòu)建工具的老大還不好說。目前我使用了 gulp 重新整理了公司項目的構(gòu)建流程嗤朴，具體實現(xiàn)可以參考 這篇文章配椭。
其實，能夠深入理解某個構(gòu)建工具并獨(dú)立編寫過針對具體項目的工具集以后雹姊，就可以駕馭大多數(shù)構(gòu)建工具了股缸。
協(xié)同工作
這部分我想將的是對版本管理和溝通交流的內(nèi)容。我所接觸到使用的版本管理工具是 git 和 svn吱雏，我想這部分只要多使用就會熟悉的敦姻，當(dāng)然也要一定的理解瘾境，這里推薦一本 git 的書籍:
Git 權(quán)威指南
記住要和設(shè)計，后端保持愉快的溝通交流镰惦。不要再認(rèn)為前端只要寫好代碼迷守、做個死宅就行了，前端簡直如果橋梁一般旺入，連接了產(chǎn)品各個層面的工作人員兑凿。
文檔編寫
最后的最后強(qiáng)調(diào)一遍，程序員要會寫文檔茵瘾，前端程序員要會寫好看又好用的文檔礼华。至于具體怎么寫，用 markdown 就可以了龄捡。
