WEB 前端學(xué)習(xí)指南(下)

與文章的 上篇 相隔近 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)頁的方法和理論。
![](http://static.ohf2e.com/20170102/Google Web.PNG)

我記得在上篇我推薦的 HTML5 參考還是 w3cschool,但現(xiàn)在逮诲,我認(rèn)為它完全過時了制恍,并且毫無創(chuàng)意沪羔。它不像 MDN 那樣提供完善的技術(shù)文檔和參考資源赁酝,也不會像 google 告訴你如何做出更好的 Web 網(wǎng)頁。使用 w3cschool 也許能讓你做出一兩道小菜紊浩,但是使用卻不能讓你做出滿漢全席窖铡。

CSS3 ,在入門后我更關(guān)注的是如何使用 less 或 sass 坊谁。這樣做的目的主要是解決兩個問題:

  1. 避免類命名重復(fù)
  2. 實現(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%臼疫。

它完全可以取代我們以往使用 position择份,float 實現(xiàn)的各種布局,而且代碼更優(yōu)雅高效烫堤∪俑希可惜我還沒有找到一本書完整的介紹 flexbox,這里推薦一系列 文章鸽斟,里面雖然介紹了使用和實踐案例拔创,但我認(rèn)為并不系統(tǒng),只能勉強(qiáng)參考著用富蓄。

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)遵倦,這就是要在定稿之前避免的)尽超。我稍微想了下這幾個問題:

  1. 理解設(shè)計的哪些部分?配色方案梧躺,整體布局橙弱,文案。
  2. 如何理解設(shè)計里的變化燥狰?自適應(yīng)設(shè)計棘脐、響應(yīng)式設(shè)計都是變化的設(shè)計。要在變化的屏幕設(shè)備里實現(xiàn)設(shè)計稿龙致,那么前端就必須理解設(shè)計里變化的部分蛀缝。
  3. 如何理解設(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 就可以了龄捡。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市慷暂,隨后出現(xiàn)的幾起案子聘殖,更是在濱河造成了極大的恐慌,老刑警劉巖行瑞,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奸腺,死亡現(xiàn)場離奇詭異,居然都是意外死亡血久,警方通過查閱死者的電腦和手機(jī)突照,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來氧吐,“玉大人讹蘑,你說我怎么就攤上這事≈耍” “怎么了座慰?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長翠拣。 經(jīng)常有香客問我版仔,道長,這世上最難降的妖魔是什么误墓? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任蛮粮,我火速辦了婚禮,結(jié)果婚禮上谜慌,老公的妹妹穿的比我還像新娘然想。我一直安慰自己,他們只是感情好欣范,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布又沾。 她就那樣靜靜地躺著弊仪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪杖刷。 梳的紋絲不亂的頭發(fā)上励饵,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天,我揣著相機(jī)與錄音滑燃,去河邊找鬼役听。 笑死,一個胖子當(dāng)著我的面吹牛表窘,可吹牛的內(nèi)容都是我干的典予。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼乐严,長吁一口氣:“原來是場噩夢啊……” “哼瘤袖!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起昂验,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤捂敌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后既琴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體占婉,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年甫恩,在試婚紗的時候發(fā)現(xiàn)自己被綠了逆济。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡磺箕,死狀恐怖奖慌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情松靡,我是刑警寧澤升薯,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站击困,受9級特大地震影響涎劈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阅茶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一蛛枚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧脸哀,春花似錦蹦浦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽侥袜。三九已至,卻和暖如春溉贿,著一層夾襖步出監(jiān)牢的瞬間枫吧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工宇色, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留九杂,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓宣蠕,卻偏偏與公主長得像例隆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子抢蚀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容