對 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

JavaScript ( AJAX ) 的跨網域存取

JavaScript 的跨網域存取是透過 XMLHttpRequest 物件。標準為 Cross-Origin Resource Sharing ( CORS ) , 參考資料為: XMLHttpRequest 執行 AJAX 跨網域存取。
方式是在被存取的資源設定 HTTP Header 屬性 Access-Control-Allow-Origin, 其值設定為允許存取的網域, 或以 * 表示所有網域。
以下是個 PHP 的例子:

<?php
header("Access-Control-Allow-Origin: http://www.riarock.com");
?>
Hello JavaScript Cross Domain!

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 移除時, 可以呼叫此方法。