在實戰中學習 JavaScript 的幾個工具

HansDo發表於2016-06-07

每當被問到開發者應該如何深入學習某一種語言時，我總會強調的一點是：找到適合自己的學習方法很關鍵。提到學習程式設計，多數人會立刻想到下面的方式：

閱讀相關書籍
參加會議
參加學習培訓

儘管這些學習手段都是行之有效的，但對我來說，它們或多或少都有一些缺點。拿看書學習來說，我發現這種方式只有當我旁邊放著一臺電腦時才有效果。因為在讀到某個知識點時，我必須立即試著編寫幾行程式碼並執行看看結果，這樣才能完全理解它。

我非常熱愛閱讀，但我儘量不在電腦邊讀書，因為我很少能夠在有電腦的情況下把注意力始終集中在書上。出於這個原因，儘管我每年讀的書都不少，但只有很少的幾本是技術類書籍。

參加技術會議來長長見識還可以，可很難讓你深入掌握——一般他們只會花 60 分鐘來介紹一種語言或某個話題，充其量鼓勵你自己在會後多實踐一下提到的技術。不過值得一提的是，有些會議會設定一天的「預前會」，預前會上會安排一些比較詳盡的演講和相關環節——這些環節對學習則更有裨益，尤其是他們有時會提供實驗環境，讓你同演講者一起動手實踐演講中涉及的專案程式碼。

最後，上課培訓的方式固然可以讓你在短期內取得驚人進步，但前提是你有足夠的（下班後的）時間和金錢。記得兩年前我參加過一個為時七天的 Big Nerd 的課程。課程本身棒極了——但也耗費了我大把大把的錢和時間。

在上面給出的建議中，我提到了在學習過程中多寫一些練習程式碼，邊「玩」邊學。我發現這是用來迅速掌握新技術極其有效的途徑。

所以在這篇文章裡，我會介紹一些不同於上面那些常規途徑的工具，來幫你「邊做邊學」JavaScript。這些工具都需要你編寫一些程式碼來完成各種任務，從而幫你掌握某個具體技術點、或讓你的整體技術水平得到訓練和提高。我們開始吧！

Js-assessment （js-測驗）

第一個工具是 Rebecca Murphey 寫的 js-assessment , 它的核心其實就是一組測試用例。每條測試用例都代表一個需要你解決的問題。當你通過修改程式碼讓某條測試通過，你也就完成了相應知識點的測驗。

來看一個 arrays 檔案裡的簡單的例子：

indexOf : function(arr, item) {

},

indexOf : function(arr, item) {

如你所見，這裡給出了一個空函式和它的引數，你需要實現該函式的內部邏輯來讓它按照期望的方式工作，從而讓相應的自動化測試用例成功。不過有的時候你需要實現什麼樣的功能並不容易一眼就看出來，比如同樣在 arrays 檔案裡有這樣一個函式：

curtail : function(arr) {

},

curtail : function(arr) {

我研究了一番才搞明白（但這就是學習的過程，對吧？），原來它應該實現的功能是刪除陣列中的第一個元素。

在編寫程式碼的過程中，你可以隨時在瀏覽器裡檢視當前所有測試用例的執行結果。下圖顯示的是我完成其中一部分測驗時的狀態。

關於這個專案我最喜歡的一點是：你可以一次只搞定一個測試用例，從而一點點地完成整個專案，而不用一次性投入太多時間。

NodeSchool

NodeSchool 並不只是 Node.js，事實上它包括了關於JavaScript 的各種教程。課程覆蓋了從 JavaScript 基礎到 Node（既然叫NodeSchool當然要有Node。) 甚至 WebGL 的內容。你可以先安裝最感興趣的教程，可如果還不熟悉 JavaScript 的話，我推薦從 javascripting 課程開始。

npm install -g javascripting

1	npm install -g javascripting

然後只需要在命令列裡輸入 javascripting：

這個賞心悅目的古典風格選單會提示你選擇一個子課程，然後具體的指導和練習資訊就會顯示出來。

注意上面最後兩行內容，這個命令列程式 javascripting 還能夠驗證你寫的程式是否符合要求。你只要寫好解題程式碼，然後到命令列裡去完成驗證就可以完成相應的子課程了。

下面是驗證被我故意寫錯的程式碼時的輸出：

你可以看到這裡的幫助資訊相當詳盡—— 其實還有更多的資訊沒有展示出來，因為螢幕上實在顯示不下了。當然，javascripting 畢竟是給沒接觸過 JS 的人準備的課程。雖然我不認為其他的教程也會提供這麼多幫助，但我目前還沒被什麼問題難倒過。這裡的問題一般一分鐘內就可以解決——最多也就30分鐘。這個程式還會隨著你的進度貼心地標記出你完成的練習，以及還有哪些挑戰等著你。

前面我說到，你可以在 NodeSchool 找到各種型別的教程。他們還有一個關於 ES6 的課程，所以如果你想獲得一些關於這項熱門技術的上手經驗，NodeSchool 會是一個能幫你迅速掌握它的絕佳選擇。

Advent of Code（程式碼降臨，又名邪惡之塔）

接下來這個是我最愛——呃或者是最討厭的一個專案——好吧，我就是這樣一個反覆無常的人。在去年的聖誕季，作者釋出 Advent of Code 的時候，他聲稱這是一種可以用來「輕鬆愉快地」打發聖誕節假期的方式。這裡面的每個程式設計挑戰都跟聖誕節主題相關，而且每個都包含兩個問題。不過一般情況下，只需要在第一道題的答案上做很小改動就能得到第二道的答案。

這些題目並不限定使用的程式語言，所以你可以用它來學習任何語言，而不僅是 JavaScript。剛開始的第一道題很容易：

要完成這一題，只要讀取給定的那個很長的輸入字串、解析它的內容並進行簡單統計就可以了。下面是我的解題程式碼——是的，我知道這並不是最好的解法，不過對我來說夠用了。

var input = '()((((  LOTS OF TEXT REMOVED ()(';

var floor = 0;

for(var i=0;i<input.length;i++) {
    var char = input.charAt(i);
    if(char === '(') floor++;
    if(char === ')') floor--;
}

console.log("Done - "+floor);

var input = '()(((( LOTS OF TEXT REMOVED ()(';

var floor = 0;

for(var i=0;i<input.length;i++) {

var char = input.charAt(i);

if(char === '(') floor++;

if(char === ')') floor--;

}

console.log("Done - "+floor);

這一題的第二部分也很簡單 ——我只花了大約一分鐘時間改了一下程式碼，就能讓程式碼在迴圈中儲存符合條件的那個值了。

看上去有點兒意思對吧？可是這些題目的難度很快就會上升到讓人灰心喪氣的水平（至少對我而言）。比如第24題：給你一組包裹和他們的重量資訊，你需要把這些包裹分為三組，並保證每個組裡包裹的重量之和相等。噢對了，要保證第一組的包裹數量是最小的，這樣聖誕老人才有地方坐…噢還有！第一組還要保證最小的“量子糾纏態”—— 這個值是將所有包裹的重量相乘求積得來的。

在做這一題的時候，我作弊了… 事實上我大概一共沒羞沒臊地作弊了四題。這些題目都有對應的 Reddit 部落格連結，你可以在上面學習別人的解法。對於那幾道難住我的題，我在那裡找到了其他語言實現的解法，並利用他們的解題思路轉換成 JavaScript 完成了挑戰。