YAP 開發的注意事項

此篇文章最近更新時間為2008-11-04 21:21:33 目前共有1篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

由於 YAP(與 Facebook 的 F8 相同,是在 Yahoo! 上放置應用程式的平台) 使用 Caja 對開發者的 Code 進行重新 Compile,有很多的 HTML, CSS, JavaScript 是無法使用的。
希望藉由此篇測試文章整理出一些 Common Finding。

你可以到此網址:http://developer.yahoo.com/yap/ 點選 Build An Application 自行驗證結果。

開發中的注意事項

YAP 文件中的 Caja Support 也提了不少限制
但在實作過程中還是有許多其他問題得產生。
  • 主流瀏覽器中,FF3 是目前支援最好的,IE7 的版面會亂掉、IE6 完全沒有樣式。
  • 不需完整的 HTML 結構,若寫了 html、body、head、title 等標籤會有錯誤訊息。請直接寫 body 的內容與 style、script 標籤。
  • 無法使用外部檔案
  • 目前所有的 JavaScript Library 都不支援,一個原因是 Caja 無法引用外部檔案、另一個原因是像是 document.write() 與 eval 等方法都會被濾掉、無法一行行去檢查有沒有用到這些東西。
  • CSS 的 IE 用區別的 * 號無法使用(不支援非 Standard 的語法,所有的 Hack 都不能用),也因此 YUI Grids 無法正確運作。
  • 如果你用 JavaScript 的 innerHTML 塞入圖片,src 這三個字會被濾掉,解決方法是斷掉這三個字,例如 's' + 'rc'。
  • function 的宣告,無法使用 var myFunction = function() {} 的方式。
  • Object Literal 的部份,如果是 undefined 的物件,會導致後面的 code 無法執行,請用 typeof(attr.something) == 'undefined' 來判斷,後面的程式碼才能順利執行。
  • 目前的內建 JavaScript Library 是 opensocial.*(用來取得像是 Connection 與 Persist Data 的資料) 與 gadget.io.*(用來作 AJAX),shindig.* 尚未測試。
  • 圖檔必須使用包含 http:// 的完整路徑

makeRequest 的簡化函式

另外我覺得 Google 系列的 Library,Constant 實在都長的太誇張了,所以寫了簡化的 makeRequest function:
function makeRequest(attr) {
    var attr = attr || {};
    if (!attr.url || !attr.callback) {
        return;
    }
    var params = {};
    attr.method = (typeof (attr.method) !== 'undefined') ? attr.method : 'GET';
    attr.type = (typeof (attr.type) !== 'undefined') ? attr.type: 'TEXT';
    switch (attr.method.toLowerCase()) {
        case 'post':
            params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
            break;
        case 'delete':
            params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.DELETE;
            break;
        case 'put':
            params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.PUT;
            break;
        default:
            params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
            break;
    }
    switch (attr.type.toLowerCase()) {
        case 'feed':
        case 'rss':
            params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED;
            params[gadgets.io.RequestParameters.NUM_ENTRIES] = (typeof (attr.total) != 'undefined') ? attr.total : 10;
            params[gadgets.io.RequestParameters.GET_SUMMARIES] = (typeof (attr.is_summary) != 'undefined') ? attr.is_summary : false;
            break;
        case 'json':
            params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
            break;
        case 'dom':
            params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
            break;
        default:
            params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.TEXT;
    }
    if (typeof (attr.postdata)) {
         params[gadgets.io.RequestParameters.POST_DATA] = attr.postdata;
         // gadgets.io.encodeValues
    }
    if (typeof (attr.interval)) {
        params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = attr.interval;
    }
    if (typeof (attr.header)) {
        params[gadgets.io.RequestParameters.HEADER] = attr.header;
    }
    if (typeof (attr.authorization)) {
        params[gadgets.io.RequestParameters.AUTHORIZATION] = attr.authorization;
    }
    gadgets.io.makeRequest(attr.url, attr.callback, params);
}

使用的方式為:
var attr = {
    'type' : 取得的資料型態(rss, json, text, dom),
    'method' : 所利用的傳遞方式(get, post, put, delete),
    'url' : 網址,
   'callback' : 資料回傳後的 callback function
};
makeRequest(attr);
看看實際範例

開發環境建議

用 YAP 的 Preview 來一直 Reload 做開發實在是太苦了,我的建議是另外註冊一組 OAuth Application ID、讓你可以用 RESTful 的方式取得 Yahoo! 上的 Social Data,等到程式開發的差不多再切回 Open Application ID、用 YAP 來做檢查。

至於 JavaScript,原本我的想法是裝一個 Shindig 在上面測試,不過想到 YAP 的格式跟 Gadget 又不一樣,根本沒辦法跑啊... 真是討厭為什麼要有兩套... 等到 YAP 可以使用 Gadget 時我大概就直接跳槽了。

另外我現在也在思考,傳統的 HTML/JavaScript/CSS 被 Caja 卡了這麼多的東西,那乾脆用限制較小的 Flash / Flex 來做就好了,而且 Flash 也有 Social API SDK,省得這麼痛苦。


Comments

  1. Richard 2008-11-26 11:26:46
    剛剛在試的時候,
    忘了要把callback後面function名字的引號拿掉,
    所以導致都沒有成天callback。

    var attr = {
    'type' : 'rss'
    'method' : 'get'
    'url' : 'http://www.yahoo.com/',
    'callback' : handleResponse
    };
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment