與文章的 上篇 相隔近 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 就可以了龄捡。