前端應該學什麼

來自專欄 dboy的專欄

世界的變化通常不是革命，而是四季更替。

在學之前，先「玩」

Chrome Dev Tools

前端核心工具，沒有之一，瀏覽器是前端項目的「操作系統」，Devtools是這個操作系統的控制台。

用Devtools分析頁面，「解構」某個前端實現，用Devtools「試驗」小段代碼，做Hack，用Devtools能做很多東西。

最重要的，用Devtools「探索」前端系統，最核心的概念都在這個工具里。

你應該關注Chrome Dev Tools團隊的官方博客，Twitter，Youtube。

快速原型與代碼分享工具

http://jsbin.com 和 http://codepen.io，不碰編輯器把想法快速實現出來。

最好的思維工具往往是能幫你動手的工具。

提取封裝：最基本的程序設計技巧

很多人學了半天編程，學了各種「技巧」，還不知道「提取、封裝」的通用性和重要性。

有提取封裝，才有可能產生高質量的「抽象」，才有後面的「信息隱藏」，「可讀性」，「復用」，「模塊化」，「低耦合」，「架構設計」，「Simplicity」，「DRY」，「可維護性」，「代碼質量」這一堆東西。

現在的編程教育太多本本教育，啰嗦了半天「模塊化」，鋪陳各種技巧，卻沒有提程序設計最最普世最最根本的常識：提取封裝。

我說它是常識，就像你要出遠門，帶很多行李，於是分門別類，分箱子打包好了遞送，提取封裝無非如此，理解概念間的聯繫和區別，遠近親疏，做一個選擇，把他們「合理」地歸置起來。

這是無處不在的，HTML，CSS，JS，PHP，Java … 好的程序設計無非合理的提取封裝。只不過雖然說起來簡單，做起來未必，問題是複雜的，合理地提取封裝變得困難，就像你出遠門要多帶很多東西打包變得困難一樣。

HTML5

HTML5不難，但每個標記用得恰到好處沒你想像的容易。

HTML5容錯率高，該用section的地方你用div也不會報錯，但仍有不少講究，比如把Table系列標籤用得恰到好處。我可以肯定市場上有90%+的前端程序員並不100%掌握Table系列標記的確切語義和用法。

HTML5的很多書本都大談特談HTML5的新功能，新API（JS），這些東西有用，但並不重要，要用的時候拿起來用就行了。

HTML的重要性，體現在理解HTML本身已經不再只是文檔結構標記語言，現代前端開發，HTML本身是「編程介面」，是抽象的基本形態，如何理解？舉例來說：

<div class="weather" data-source="NASA" data-geolocation="Kansas" data-format="fahrenheit" data-autoupdate="30s" onclick=fn onmouseover=fn onmouseout=fn onuupdatecomplte=fn ongeolocationchange=fn />

這是現代前端模塊化的基石，前端組件化的基礎，產生這樣的HTML代碼是一個「設計問題」，介面設計，輸入輸出設計，模塊設計，你怎麼叫都行，反正現代前端開發語境下的HTML不是簡單用用HTML定義好的標籤這麼簡單，這是前端開發的強大、美妙之處。

不要看輕HTML，它不複雜，但很重要。

CSS3

CSS是一種很深的技術，是非常值得投資的技能，光是一個transition最小白的使用，能給一個單調的頁面帶來生機。儘管多數前端項目對開發者CSS的能力要求不高。

這個技能能給項目帶來質變，視覺，交互，甚至能直接影響程序設計本身。很多用JS做的低效實現，現在都有成熟的CSS方案，比如超級靈活的適應性布局，狀態轉換，動畫等等。

帶著興趣與尊重學HTML5，CSS3

兩者結合起來，是很深的技術，有時候我們經常納悶一個頁面實現實現的關鍵技術是什麼，很多時候這個關鍵技術並非高超的JS編程技巧，而是對HTML5，CSS3的深刻理解、創造性地應用，這種用例往往給我們醍醐灌頂的感覺。

是的，HTML5，CSS3也有大師，並不是開玩笑。表面看起來簡單的東西，比如騎自行車，也可以玩成極限運動。

區別在於「主動探索」。

說回基礎，CSS3的核心並不難列出，布局定位，盒子模型，度量衡，字體規則等等。

但列出來並沒有意義，因為學編程不是畫好重點照本宣科，而必須實際運用中理解，沒有替代方案。

就是將HTML5和CSS3做有相當複雜度的靜態頁面。

沒有耐心的人覺得做這種東西簡直索然無味，HTML5，CSS3我都會啊，我看看就懂了。

這類孩子會繞一大個圈子。

怎麼學Javascript語法

我們學編程不學語法，而是學概念，這是一個重要的意識上的區別。

function foo(bar) { if (Array.isArray(bar)) { console.log(bar); } return foo;}foo();

這裡統統是語法，但同時又統統是概念：函數聲明（輸入），函數名，參數列表，參數校驗，局部作用域，輸出返回，函數簽名（signature），調用等等。 語法只是概念的呈現，是概念的皮囊，學編程該問的不是這個怎麼寫，而是「這是什麼，作用是什麼」，概念明了，語法是不用學和記的。

如果學習者只記憶表象，「這個該用大括弧，這個該用return」，將只能建立起很膚淺的直覺。

在我們眼裡，每一段代碼都應該是一台活動的機器，有著內在的機理和邏輯，你看到代碼應該像看到工作中的機器呼呼冒著白氣，看代碼不是看靜止的文本，這是普通技術和頂級技術的根本意識區別。

演算法是否重要

好一點的公司面試都有演算法考核，這是應該的，就像大館子招廚師，基本修養是一定要過關的，八大菜系這種是業內「常識「，你一個專業廚師能不掌握嗎？

演算法思維對編程的影響是潛移默化的，我這裡用文字說是說不明白的，哪天演算法給你靈感的時候你自然明白。

演算法與Javascript的關係

演算法和語言無關，語言只是對演算法的實現而已，實現五花八門，純過程，OO還是怎麼樣，隨便，Javascript照樣可以實現演算法，這重要，但不是關鍵。

學演算法的關鍵是」理解演算法原理「，」理解「的最好方法，我認為是」可視化「。你可以自行Google 」algorithm visualization「。如果你能看到一個演算法的執行過程，慢鏡頭看得清清楚楚，把演算法原理映射到腦子裡，隨著對語言的熟悉，你自然能用JS寫出代碼來。

掌握Javascript DOM操作的必要性

你要理解DOM是HTML文檔結構在瀏覽器內部的邏輯表示，是前端應用的底層介面，而學習編程收益最高的投入之一，就是在前期理解底層工作原理，理解了底層工作原理，可以一通百通，掃除後續很多障礙。

有時候我們做應用會懷疑底層的意義，學習底層有沒意義，我有一個不是回答的回答，學了你才知道意義，不學你很可能意識不到。即使現代前端框架潮流執之下，DOM操作被充分隔離屏蔽，理解DOM底層仍然重要。

還得明白，不是所有的應用都依賴現代框架，業務的世界是複雜的，沒有放之四海皆準的技術方案，框架開發方法在增值的同時，並非完全對傳統開發方法的替代，世界是多遠的，不是非此即彼的標準答案。

學習DOM編程

第一，如果零基礎，從「DOM編程藝術」這本書開始，目的是提取DOM知識，做一些適應性訓練，全面地完成這本書，同時熟悉JS語言

第二，做一個完整項目，作大量DOM操作，學習者應該自己確定一個項目（如todoist這樣的應用就很值得模仿），用純JS（ES5）配合原生DOM API操作完成

DOM核心也不難列：節點的增刪改查，獲取節點（及屬性）的方法，css selector api，事件操作，樣式操作等。把注意力放在理解概念上，理解各種概念在代碼上下文是如何工作的。

從第一步到第二部是「不平滑」的，不要假設「我」把書上的代碼都做了一遍，就立刻能獨立開發出東西來，通常並非如此。

事實是頭一個完整項目會讓很多學習者倍感艱難挫折，「我看了書，之前消化了那麼多資料，為什麼還是寫不出來「。

這是正常的，但很多人的假設和期望錯了，在我們認知水平低的時候，往往越容易有不切實際的期望，我們會低估問題的複雜程度。

訓練代碼怎麼寫

工作流和工具鏈的意義這時候就體現出來了，所有的訓練代碼都該這麼寫：

• 訓練項目應該放到github，不懂git就去學，這是不用教的
• 項目必須有規範的README.md，交代項目內容，實施計劃等內容，中英文均可
• 用npm（或者yarn）來管理依賴，項目應該用npm init來初始化，應該有package.json
• 項目應該有代碼規範，應該集成eslint，做好相應配置（包括編輯器）
• 第一個項目應該基於ES5，因為傳統JS語法有一些寶貴的概念你需要掌握
• 如果項目基於ES6，就該集成Babel
• 是否使用gulp或webpack是學習者的選擇
• 好好做commit
• 放慢速度，學習越是開始階段，基礎越是薄弱，速度越應該慢（很多孩子是被自己的速度擊敗的）

做事有板有眼不只是給自己看，更重要的是給別人看，你在github上的每一次提交，每個README都能潛在決定別人對你水平的判斷，這是和求職直接相關的，所以一定要重視，招聘方不會希望招你進去幫你改掉壞習慣，他們希望你帶去好習慣，好實踐。

熟悉jQuery的重要性

你也許在哪裡讀過jQuery已死的文章，我不知道你怎麼判斷。但你得注意到jQuery是一個仍在迭代的項目，而且仍是使用最多的前端基礎庫之一，你可以自己去google數據。

中文技術圈在給成熟技術判死刑，和把新技術捧上天這兩件事情上做的極好，尤其是國內一線互聯網公司的人竟也一般鼓吹，粗俗武斷，讓我覺得遺憾。

技術人品位的內核，是一種篤定的理性。世界的變化通常不是革命，而是四季交替。

jQuery在前端開發社區的作用不需要我來強調，jQuery在Javascript語言運用和對DOM底層的理解上，jQuery的API設計，有寶藏，即使你不直接用jQuery，他山之石，可以攻玉。

程序設計的意識

國內外編程教育的根本不同，國外的編程教育強調程序設計（有很多為什麼，很多嘗試），國內的編程培訓不強調程序設計過程，強調結果，一般問題的解決方案是很容易到達的，所以總是止步於work但沒有工程品位的實現。

而做這一行的真正樂趣，在程序」設計「之中。設計是開放的思維活動，設計有約束，但設計沒有標準答案，設計不是一蹴而就的，設計是演化的，但設計達成的問題最終解決是本質的。

如果我們覺得解決問題就」只是「達成某個特定結果，並止於這個特定結果，那麼我們將會失去發現方法論、或作出創新的寶貴機會，就像拿紅酒來解渴的人體味不到佳釀的醇厚。紅酒的目的並非解渴，同樣解決問題的目的並非解決那個」問題「，而是發現規律本身，前者只是解決方案，而規律確實智力資產，哪個更有價？

學編程的人，要習慣「設計」程序，設計不來源於靈感，來源於常識，只不過很多時候常識被我們忽略而已。我相信等你體會到這一點的時候，將得到編程的莫大樂趣。

做第一個完整前端項目

如前所述，這應該是你的第一個DOM編程項目，一個實實在在的應用。

• 做好項目準備工作，集成工具鏈，走專業工作流
• 先用HTML5實現頁面結構
• 考慮移動端友好，響應式等UI關鍵指標
• 充分運用CSS3布局實踐
• 學會管理CSS代碼
• 然後用ES5實現交互
• 用原生DOM API
• 運用CSS selector
• 運用非同步程序設計的基本方法，回調，Promise
• 運用事件管理應用狀態，事件流，應該學會事件代理這樣的模式
• 運用IIFE的封裝，closure的運用，ES5模塊化，ES5模塊化的區別
• 用indexeddb存儲數據
• 先關注功能設計與實現
• 再關注程序改善
• 找老師review你的代碼
• 配合書本 「Javascript模式」 重構你的代碼
• 你要在這時候學會原型，閉包等JS核心概念

這是一個至關重要的項目，你不應該追求儘快把它做完，而應該最大限度地把技術用透，這個項目會讓你真正跨過」入門「的門檻。

你會做得非常磕巴，如果不磕巴只說明你對應用本身和技術的探索不夠。

非同步程序設計，習慣回調

無論如何，回調是非同步程序設計的根本結構，它本身很簡單。

function foo(callback) { /* 執行上下文 */ callback(); }

把函數作為參數傳入某個執行上下文，伺機執行，稱為」回「調。

變化一下，每當你onclick=handleClick，即把函數傳入事件觸發上下文，稱之為」事件「回調。

這是非同步程序設計的基本模式，我們每次封裝Javascript function，考慮的一個方面是它需不需要接受回調函數。

另一個設計工具是Promise，每當我們設計一個Javascrpt function，可以考慮它可否返回Promise。

還有其他的非同步程序設計結構可用，程序設計歸根到底，無非介面設計，理解介面設計工具至關重要。

我想特別支出，請你習慣所謂的「回調地獄」學會用程序設計技巧去化解它，你用的是一種非同步語言，你不應該害怕它的自然形式。

第二個實際項目

• 自己決定做什麼，但不管做什麼，要選有相當複雜度的應用
• 做什麼不重要，重要的是做深
• 按照第一個項目的大致開發流程進行，但多一點頂層設計
• 可以考慮使用ES6
• 考慮數據類型，數據結構，數據流和數據存儲
• 分析應用有哪些自包含的UI部分
• 理解事件流，哪些事件，哪些交互，改變哪些狀態
• 考慮是否可以適當集成第三方類庫
• UI是如何初始化的，初始化要做哪些事
• 整個應用程序有哪些部分，如何彼此分離，又如何相互通信
• 找人專門來評價你的程序設計，而不是簡單幫你看看「代碼」

做深兩個項目，你對前端的一切應該已經相當熟悉。

把框架撿起來用

我認為框架是不需要教的，如果你的前端基礎紮實，不可能學不會框架，基礎紮實，你不可能不具備自學框架的能力。如果你基礎好，框架將給你的開發插上翅膀，如果你基礎漏洞百出，框架不會自動讓你成為好程序員，它可能放大你的技能缺陷。

框架比原生前端開發簡單，但也比它複雜，框架開發有獨立於原生技術的概念體系，使用框架是習慣它的「約束」，約束就是做某件事的特定方法，特定形式。

第三個實際項目

• 自己決定做什麼，不管做什麼，一定要做有相當複雜度的應用
• 使用框架
• 接受框架的特定工具鏈和工作流，如React的create-react-app
• 在框架的語境下做好程序設計
• 爭取一次性地理解框架的核心概念
• 把框架提供的概念工具用透，框架就是你的了

最後，學習編程最重要的是什麼？

答曰：主動探索。前端也不例外。

一定要主動探索。

原文：前端開發需要學什麼

IT浪人

推薦閱讀：