AS-PHP-talk 簡介

AS-PHP-talk 放到 github 後, 不知不覺已經過了一年 =..=, 突然想來寫個介紹。

這個專案的目的是為了讓 ActionScript 和 PHP 溝通有另一種較為簡單的選擇, 目前後端只有 PHP 的實作。 以往後端 ( 筆者較常使用 PHP ) 和 AS 溝通, 比較舊的方式是通過 XML, 比較多人用的是透過 AMF ( Flash remoting ), AS-PHP-talk 則是使用 JSON。

JSON 和 XML 相比的話, 同樣都是文字格式。XML 可以制訂的資料比較複雜; 然而, JSON 可以描述 Object、Array 和基本類型的資料 , 其實已經很夠用。

JSON 和 AMF 相比的話, AMF 體積應該會比較小, 但由於 AMF 是二元資料, 除錯相對於文字格式的 JSON 要來得麻煩。JSON 資料可以直接秀在網頁上, 有錯誤時也可以在網頁上就查覺。

前端和後端資料交換的程式, 最麻煩就是除錯。AS-PHP-talk的目的是, 可以在完全沒撰寫前端程式 ( Flash ) 之前, 利用簡單的網頁就達到後端 PHP 程式的除錯。後端的開發人員可以完全不用理會前端程式的開發進程; 前端的開發人員也可以透過簡單的後端 ( 送假資料 ) , 進行前端的開發。前、後端的程式可以很方便的切開來。

在 Chrome 開發人員工具裡動態載入外部 JS libs

如何在 Google Chrome 開發人員工具裡, 動態載入外部 JS libs ?
qop 在 StackOverFlow 找到這篇 how to: dynamically load google ajax api into chrome extension content script 。
打開 Developer tools [ Ctrl + Shift + i ], 於 Console 內貼上以下的程式碼就可以在 Console 做些 Underscore/Backbone 練習 ^_^

var headElement = document.getElementsByTagName("head")[0];
var jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
headElement.appendChild(jsElement);
// ---
jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://documentcloud.github.com/underscore/underscore-min.js';
headElement.appendChild(jsElement);
// ---
jsElement = document.createElement('script');
jsElement.type = 'text/javascript';
jsElement.src = 'http://documentcloud.github.com/backbone/backbone-min.js';
headElement.appendChild(jsElement);

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 去定義。

使用 RVM 時發生的 openssl 錯誤

之前在 ubuntu 安裝 rvm/ruby/ror 碰了一鼻子灰, 停了好一陣子沒看 ruby 的東西。看到有本書提到 middleman, 就來玩玩看。
使用的 OS 是 Fedora 16, 原則上在安裝時都算順利, 只有在啟動 mm-server 時, 發生了 "no such file to load openssl error" 的問題無法正常啟動。
在 ruby 論壇找到解法 http://www.ruby-forum.com/topic/90083#1022143

    rvm pkg install openssl
    rvm remove 1.9.2
    rvm install 1.9.2 --with-openssl-dir=$HOME/.rvm/usr
這個做法有個缺點, 因為一開始是用 root 安裝 rvm, 所以重新安裝 ruby 時也必須是 root 用戶安裝, 如此一來就不能在其他用戶使用了。

jsonTrace 小工具

QopDump 好像有不少人使用，但感覺還是不理想，於是利用 com.adobe.serialization.json package 和 JsonFormater 組合起來，弄了個 jsonTrace() 。
JSONTrace 專案位置在 https://github.com/shinder/JSONTrace

標頭定義為：
public function jsonTrace(rawObj:Object=null, noTrace:Boolean=false, noFormat:Boolean=false):String
參數：

• rawObj : 所欲查看的物件 (主要類型為 Object 和 Array)
• noTrace : true 表示不 trace 輸出, 只回傳結果字串
• noFormat : true 表示不做 JSON 字串的對位格式

Dropbox 邀請

Always have your stuff when you need it with @Dropbox. 2GB account is free!
立刻申請免費 2G 雲端空間

AS3-Signals 筆記

AS3-Signals 是 ActionScript 中替代 Event 系統的方案。使用 Event 就好了，為什麼還要 signal 呢？在某些專案需要自訂 Event，通常自訂 Event 必須定義一個繼承 Event 的新類別。為了多傳遞一個資料項而定義一個類別，感覺就很累贅。此時使用 signal 就顯得清新許多。
AS3-Signals 好用，但也有些缺點：

1. 不能設定 useCapture。其實 Event 的這個功能，在專案上個人幾乎是沒用過，所以就顯得不重要了。若要用 useCapture 就使用 Event 吧。
2. 不能設定 useWeakReference。據作者的說明，weak reference 有 bugs ，目前沒有將這個功能加入。視情況去 remove signal listener。

值得參考的資料：
An introduction to AS3 Signals
as3signals – An Awesome Solution to Events/Signals in AS3