JavaScript 雜項心得

之後大概沒機會繼續玩 JavaScript, 整理一下之前看過的東西。

主要是看 Douglas Crockford 寫的文件。過去一直排斥學 JavaScript, 這回終於開始學了。沒想到意外地有趣, 感謝 Douglas Crockford 賣力地為它澄清, 讓我有機會重新認識它。

JavaScript

必讀文件:

• coding convention
• Google Tech Talk: JavaScript, the good parts。半小時而已, 看完立即明白 JavaScript 的問題, 避開它們後 JavaScript 其實是很美很強大的語言。
• 讀 JsLint 的說明並試一試。可以協助記得 coding convention, 後來到是沒什麼在用。若有需長期維護的程式, 再拿來用吧。JsLint 可以幫忙列出函式內變數的可視範圍, 像是 global / closure / local, 頗方便的。

Douglas Crockford 寫了一些好文件, 下面是我看過覺得頗受用的幾篇:

• reduce global variables / functions by one big root variable: 說明如何避免 global variable 並將程式結構化。
• for in: JavaScript foreach 的正確寫法。
• private method / member by Closure: Closure 真是太酷啦!

另外就是讀他寫的書: JavaScript, the good parts。可惜我空閒時間花完了, 沒翻幾頁。之後有機會再來好好讀一讀。

jQuery

其實大部份時間都在寫 jQuery, 不過懂 JavaScript 語法的話, 寫起來比較順手, 不會被 JavaScript 的語法卡住。jQuery 真是我用過最容易上手功能又強大的函式庫。

• jQuery 教學 - 基礎篇: 附許多例子, 大概掃一遍就能上工啦。
• ericsk 寫的 tutorial: 有完整的例子可以跟著做。
• 官網的 CSS Selector 文件: 要能活用 jQuery, 第一步就要能熟用 CSS Selector 選出目標物件。
• jQuery 參考手冊: 官網文件寫得很清楚, 也有附範例碼。若要找函式名稱, visualjquery 也很方便, 可以快速濾出可能的函式。
• jQuery UI 和 jQuery Tools 將 CSS, HTML 和 JavaScript 包好, 方便使用。像是附月曆輸入日期的 input tag, 或是 progress bar 等。

再來就是掃一遍 jQuery API, 或是視需求查一下相關的文件, 比方用 even / odd 可以一行搞定 table 奇偶列不同 css class。用 eq / index 可以找到列表中特定的元件。

QUnit

QUnit 是 jQuery 為了 unit test 而寫的函式庫。用法就是寫個 html 載入 QUnit 的 js、css, 就可以藉由瀏覽器讀網頁來執行 unit test 並將結果輸出在網頁裡。

• 簡單易懂的例子。
• 官網有不少例子可以參考, 像 fx.js 的寫法挺漂亮的, 用 jQuery 建出 test fixture 而不用綁在 html 上測。

若寫了不少 QUnit 想在 terminal 上執行, 可以透過 js-test-driver 執行。它只是一個 test runner, 有提供 QUnit 的 adaptor, 這樣就能用 terminal 跑 Java 程式, 透過一個執行中的瀏覽器自動跑 unit test。我是看 Miško Hevery 推薦才試用的, 只是我的 JavaScript 沒多到需要這麼測, 寫了一些 QUnit 測完較複雜的核心後, 就沒在用了。大多情況還是在 Firebug console 裡試成就就貼到 JavaScript 程式裡。待下次寫 JavaScript 時, 再來多挑戰用 TDD 開發。

Firebug

我一開始用 Chrome Developer Tools, 不過和 Firebug 交替用一陣子後, 感覺還是 Firebug 比較好用。像 DOM navigation 和調整 CSS 的部份 Firebug 好用多了。除之前在 CSS 心得提到的影片外, 再看《3 分鐘學會用 firebug 除錯》, 用 console.log() 輸出物件, 在 Firebug DOM 裡觀看細部資訊, 相當方便。

備忘

• Google AJAX APIs: Google 強大的 API, 包含 web search、local search、嵌入 Google Map 等, 並有附範例碼可直接在網頁上觀看和執行。