對 Dart 的一些看法

看了 What Is Dart, and Why Should You Care? 想記錄一下自己對 Dart 的想法。
Dart 是 Google 用來取代 JS (JavaScript) 所設計的程式語言。以 Google 這樣大的公司要支持一項技術，並沒有多大的困難。但對於目前瀏覽器群雄並起的情況下，我個人並不看好它的流行。

不看好的主因：

1. 目前 Dart 並不是一項標準，也就是其它瀏覽器並沒有理由去實作它，就算是 Open Source 頂多也只能是個外掛。早期的 VBScript 是除了 JS 外的另一種選擇，但目前似乎很少人在前端使用 VBScript，原因是它只能在 IE 上執行。不過 Dart 是以取代 JS 之姿出現，改進了 JS 上的許多缺點，並不是 VBScript 可以相比的。
2. 另外，JS 最近蓬勃發展，libs 多如牛毛，要前端開發者放棄好用的 libs (如 jQuery)，除非有好的替代品，不然以目前如此年輕的 Dart 而言 libs 是無法跟 JS 相比的。

Dart 的優點：

1. 新的程式語言，對開發人員而言，除了要熟悉語法，還必須熟稔語言的 API。Dart 是 C-like，全物件導向，語法比較貼近 ECMAScript 4；若有在開發 JS，Dart 的 API 看起來也應該很容易熟悉。
2. Google 可以為 Dart 在 Chrome 建立讓人驚奇的功能。

目前我選擇 CoffeeScript 的原因是：

1. 簡潔語法和物件導向的寫法 (或許有人不喜歡沒有 {} 並且要縮排的語法)。
2. 編譯 (亦可解譯) 為 JavaScript，依然是寫 JS 用 JS 的 libs。

Yepnope.js 和 CoffeeScript 拆檔 (續)

繼上篇 Yepnope.js 和 CoffeeScript 拆檔 改良一下, 使用 CoffeeScript.load() 裡的 callBack 功能, 讓 *.coffee 可以依序載入並執行。另外, 設置了 isDeveloping 變數, 使得在開發的過程避免 *.coffee cache 的問題。

Yepnope.js 和 CoffeeScript 拆檔

Yepnope.js 和 CoffeeScript 拆檔其實是兩回事。
Yepnope.js 和 RequireJS 提供類似的功能, 都是用來載入外部的 *.js 或 *.css。Yepnope.js 可以依條件而決定是否載入, 同時也可以確保我們要的執行順序, 感覺還不錯。
但 Yepnope.js 和 coffee-script.js 搭配時, 無法直接透過 Yepnope.js 載入 *.coffee 並執行; 而是在載入 coffee-script.js 後, 以 CoffeeScript.load() 分別載入 *.coffee 檔。
以下的範例又搭配 Backbone.js, 為了讓類別定義可以自由取用, 將類別名放在 window.myproj 物件下當做屬性。

CoffeeScript Loader Plugin

require-cs 是使用 RequireJS 的 CoffeeScript Loader Plugin。
其實就是把 RequireJS 和 coffee-script.js 的功能加在一起, 而在沒編譯的情況下可以引入 *.coffee 檔執行。
其 Demo 將 CoffeeScript 分成幾個檔案, 然而皆以 RequireJS 的 module 方式撰寫, 個人比較不喜歡。
RequireJS 其實廣受使用, 排斥 module 寫法純粹是個人喜惡 :P

Backbone.js 的 Router

Backbone.Router 的主要功能是能夠在不刷新頁面的情況下, 變更 URL, 同時執行不同的功能。不論建立幾個 Router 物件, 要啟作用時都必須呼叫 Backbone.history.start()。

• 屬性 routes: 用來設定 routes hash 對應的動作 ( actions, functions )。
• 方法 initialize: 初始化呼叫, 自行定義。建立 Router 物件時若傳入 Object 物件, 讓物件會視為 routes 的設定。
• 方法 route: 動態設定 routes hash 對應的動作。
• 方法 navigate: 呼叫此方法以變更 URL。第一個參數為字串, 第二個參數為 Object 物件。Object 物件屬性 trigger 設定為 true 時, 表示要呼叫 route function。Object 物件屬性 replace設定為 true 時, 表示不留在 history 裡。

呼叫 Backbone.history.start() 時傳入的 Object 物件屬性可以有三個:

• 屬性 pushState: 設定為 true 時表示使用 HTML5 的 pushState 功能, 將不會在 URL 使用 # , 這通常需要做後端 URL mapping 設定。
• 屬性 root: 如果路徑不是 / 可以使用 root 設定。 
• 屬性 silent: 如果不願在初始化時呼叫 route function, 把 silent 設定為 trrue。

在 IE 建議不要使用以上三個屬性設定... 囧。

Backbone.js 的 View

在 Backbone.js, View 經常會和 Model 做關聯, 在這裡先排除 Model, 單純討論 View 的其它功能。

• 屬性 el: 用來表示對應的頁面元素 (element), 其值為字串類型, 可以是標籤名稱或 id 名稱等 selector。
• 屬性 tagName: 表示新 View 物件初始的標籤。
• el 和 tagName 兩者為二選一設定。
• 屬性 $el: 為對應 element 的 jQuery (或 Zepto) 物件。
• 屬性 $(selector): 對應子元素的 jQuery (或 Zepto) 物件。
• 屬性 events: 定義事件 (及事件來源) 對應事件處理的方法。常用的事件: click, dblclick, contextmenu, mouseover, mouseout。

• 方法 initialize: 初始化的方法, 定義類別時定義。有別於 constructor, 在此不建議使用 constructor。建立 View 物件時, 傳入一個 Object 物件, 會將 Object 的屬性複製給 View 物件。
• 方法 render: 物件成形的方法, 定義類別時定義。應回傳物件本身 (this)。
• 方法 remove: 方便從 DOM 將 View 物件移除。同 $(view.el).remove()。
• 方法 make: 方便由標籤名稱、屬性 (包成 Object )、內容字串, 建立 element。
• 方法 delegateEvents: 設定事件 (及事件來源) 對應事件處理方法。通常只要定義屬性 events 即可完成自動設定, 而無需手動呼叫此方法。
• 方法 undelegateEvents: 取消所有設定事件 (及事件來源) 對應事件處理方法。當要讓 View 物件失能, 或暫時從 DOM 移除時, 可以呼叫此方法。

Hello Backbone.js 用 CoffeeScript 改寫

Hello Backbone.js 是不錯的 Backbone.js 入門教學, 為了個人學習 CoffeeScript, 所以把裡面的例子都以 CoffeeScript 重新改寫, 希望可以一石兩鳥。執行使用的 JS lib 除了多了 http://jashkenas.github.com/coffee-script/extras/coffee-script.js 之外, 其餘只有版本上的差異。這篇主要的目的是做個人的學習過程記錄。

Backbone.Events

Backbone.Events, CoffeeScript 對照寫法

JavaScript ------------------------------------------------

var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
  alert("Triggered " + msg);
});
object.trigger("alert", "an event");

CoffeeScript ------------------------------------------------

obj = _.extend {}, Backbone.Events
obj.on 'alert', (msg)->
  alert 'Triggered ' + msg
obj.trigger 'alert', 'an event'

Backbone.js 與 CoffeeScript

參考了一些 Backbone 搭配 CoffeeScript 的文章:

• Using Backbone.js with CoffeeScript
• CoffeeScript with Backbone.js Example

之後, 將 Backbone 範例 Todos 改用 CoffeeScript 重寫練習, 果然一開始就踩到地雷。
改寫之後, 是完全不會動的, 後來發現 initialize 方法根本沒被觸發, 但 constructor 有被觸發, 把 constructor 註解後就可以了。也就是使用 initialize 方法, 而不用 constructor。

另外, Backbone 原本的繼承寫法是呼叫 extend 方法, 除了改用 extends 繼承寫法之外, 其初設物件 (第一個參數), 可以放到 initialize 方法裡做初始化的動作。

CoffeeScript.js

感覺最近一兩年, JavaScript lib 發展的速度相當快, 在 Nodejs 問世之後, JS 更是如虎添翼。但個人對 JS 的 OO 寫法相當不適應, 因此看上了 CoffeeScript, 最近就學點基本語法。在還沒有接觸 CoffeeScript 之前, 會覺得寫某種程式語言再編譯成 JS, 有脫褲子放屁之疑慮。試用後發現, CoffeeScript 真的比較易讀易寫, 代價就是要學點新語法, 當然這問題是見仁見智, 因人而異。

一開始我會在網頁裡使用 <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> , 如此一來就可以在 <script type="text/coffeescript"></script> 裡寫 CoffeeScript (或者 <script type="text/coffeescript" src="my.coffee"></script>  )。

單單學語法其實很無聊的, 試著改 Backbone.js 上的 todos 範例, 先將 backbone-localstorage.js 改寫成 backbone-localstorage.coffee, 結果發現一直抓不到 Store 類別, 裡面包括了兩個問題:

1. 混用 todos.js 和 backbone-localstorage.coffee, 但 backbone-localstorage.coffee 被編譯成 JS 是比較慢的, 因此 .coffee 的內容是比較慢執行的。解決的方式是, 先編譯成 JS。
2. CoffeeScript 的所有變數都會被包在 local 裡, 所以類別要定義為 global 時可以使用 '@' 或 'window.'。原來的 Store 類別要使用 window.Store 或 @Store 去定義。