Javascript

KSDG 邀請，分享上禮拜在 JSDC 所介紹主題: 你不可不知的前端開發工具，在 JSDC 現場只有半小時可以講，這次在高雄有一個半小時可以講，如果想詳細了解前端工具，可以參考上禮拜的投影片，底下是在高雄軟體科技園區所分享。謝謝 Eric Bi 及工作人員可以讓我分享這次議題。

台灣第 2 屆 JavaScript 研討會在 5/18, 5/19 登場，今年報到率到 95% 了，我也給了一場 Talk，關於前端工具介紹，包含 CoffeeScript, Compass, Livereload, Bower Package Manager .. 等，最後介紹主軸 Grunt.js 來整合這些工具。

Html5 History pushState 功能，除了 IE 9 以下(含 IE 9)不支援 history.pushState() 跟 history.replaceState()，其他 Browser 幾乎都支援了，在 Backbone.js 如何處理 URL 變化呢？以往透過 handle URL hash 來決定網頁要處理哪些資料，這也是 Backbone 預設的處理方式，範例如下 URL:

http://xxx/#!/user/list http://xxx/#!/user/add

modern.IE 的使用方式及介紹，今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面，如果你的瀏覽器是中文版，應該就可以直接看到中文介面了，裡面有篇文章非常重要，寫 Web 的工程師都必須注意，那就是 Cross Browser Best Practices，這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧，這些技巧也不只用在 IE 上，更是教您在實做 CSS，JavaScript 的注意事項。我們來看看 Javascript 的小技巧。

Update: 補上一張執行後的截圖 2013.03.27

GruntJS 是一套 JavaScript Task Runner，為什麼官網會這樣寫呢？網站上線之前，是不是需要經過測試，壓縮，及品質控管，這些 Task 該如何實現，在 GruntJS 還沒出現之前，大家可以透過 Linux command 的方式來達成，但是對於前端工程師而言，多學習 command line 真的是要他們的命，所以 GruntJS 解決了此問題，將所有的 Task 用 Javascript 方式設定就可以自動佈署或測試。GruntJS 的 Plugin 也非常多且完整，像是大家常用的 CoffeeScript、Handlebars、Jade、JsHint、Less、Sass、Compass、Stylus…等都有支援。更多好用的 Plugin 可以在官網搜尋頁面上找到。

安裝方式 Grunt 可以透過

Node.js 的管理工具 npm 方式來安裝，Windows 只要到 Node.js 官網下載安裝包，直接按下一步即可安裝完畢，Linux 可以透過 NVM 方式來管理 Node.js 版本，可以參考作者之前寫的 Node Version Manager 版本管理 NVM。需要注意的是 Grunt 0.4.x 需要 Node.js >= 0.8.0 版本才可以。

html5-boilerplate 看到有人發 Remove Google CDN reference for jQuery 的 pull request，發現國外鄉民其實蠻有趣的，也很會表達自己的想法，根據 Steve Webster 在 2011/11/21 寫了一篇 Caching and the Google AJAX Libraries 裡面的結論是: 使用 Google CDN Library 對於第一次訪問網站並沒有很大的幫助，其實這句話非常有疑問，如果網站不想 host 一些 static file 又想要用 CDN 的話，Google 絕對是最好的選擇，底下就有人反駁 Google CDN 還是比自己 host 檔案快很多，所以此 pull request 好像沒有啥意義。

@gsamokovarov 提出將 Backbone.js 改寫成 CoffeeScript 架構的 Pull request，結果官方團隊其中一位開發作者回應了一張圖，代表他的心情 XD，各位有興趣可以點上面連結看看，後來有其他人回應說，為什麼官方不用 CoffeeScript 來寫了，發此 Pull Request 的作者也有說，他只是將架構改成 CoffeeScript 讓大家參考看看而已，沒有真的希望可以納入整個 Backbone.js 專案，如果有其他開發者需要的話，一樣可以 fork 此專案，說明文件也用 docco 產生好了，可以參考此連結，官方作者也提到，大部份的第3方 Library 還是不會使用 CoffeeScript 來當作基底開發，畢竟並非所有人都知道 CoffeeScript，如果官方想這麼開發的話，早就再 2010 年丟釋出 Backbone.js 的時候就直接採用了，不會拖到現在還沒出來，當然最後官方也希望將此 pull request 寫到 wiki 裡面給大家參考，等待原作者補開發動機及細節。

CSS 跟 JavaScript 檔案，減少 Http request 流量，網路上已經有非常多的 Compressor tool，像是 Google Closure Compiler 或 YUI Compressor，都是用來壓縮 JS 或 CSS 檔案，這次寫了 script 來壓縮整個網站目錄裡的 js 或 css 檔案，不過 script 所使用的 Compressor command 是 Node Base 的 tool，分別是 UglifyJS 及 sqwish 這兩套，當然使用 command 之前，請務必先安裝好 Node.js 最新版本啦，不過沒安裝也沒關係，底下有懶人安裝 script command。這些 tool 對於 Embedded System 在 build firmware 相當有用，可以減少不少 code size 阿。 可以直接看專案說明，就可以不必看底下步驟了

jQuery 釋出 1.9 及 2.0 版本，官方團隊也同時推出 jQuery Migrate Plugin 1.0.0 版本，此 Plugin 是跟 jQuery 1.9 或 2.0 一起搭配使用，偵測 jQuey 已移除或者是將被移除的功能，讓您之前開發的 jQuey 功能可以持續使用，但是似乎很多使用者不知道此 plugin 用處，就直接升級 1.9 或 2.0，並未載入 migrate plugin，造成官方收到很多 feed back 都是關於一些舊功能不能使用。半個月後 jQuery 官方收到很多 migrate plugin 回報問題，這次一樣可以透過 jQuuery CDN 載入，程式碼如下。

網路上看到這篇 Two Things About Conditionals in JavaScript，比較另我訝異的是第一點 One: There is no else if，該作者提到在 JavaScript 的寫法裡面沒有 else if，底下直接看例子:

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else if ( msg === 'Yo' ) {
    console.log('Yo dawg');
  }
}

上面是我們一般在寫 JS 會用到的條件子句，但是實際上 JS 寫的就是

function saySomething( msg ) {
  if ( msg === 'Hello' ) {
    console.log('Hello there');
  } else {
    if ( msg === 'Yo' ) {
      console.log('Yo dawg');
    }
  }
}