如何編寫 Cloud9 JavaScript IDE 的功能擴展

上周末我們在JSConf.eu發布了Cloud9 IDE，同時發布了對應的GitHub項目。在4天時間裡該項目得到340個人的關注和將近50個fork。Cloud9的口號是由"由Javascripters 為Javascripters創建的IED"，這口號有點遞歸，它意味著你可以hack這個ide使它變得更強大。Cloud9項目開始之初就尤其注意考慮這點了；Cloud9中的每一個功能點都是一個擴展(extension)。在IED啟動的時候我們用優秀的 requireJS 庫加載所有的擴展。前端UI使用 ajax.org platform (apf)，apf 使我們輕松地模塊化Cloud9的用戶界面。下面開始詳細介紹怎樣為Cloud9編寫擴展。

一個擴展的生命周期是從它作為requireJS的模塊開始的。我將簡述requireJS的基本語法，想深入了解requireJS請參考這個文檔。一個擴展會依賴其他的擴展和一些核心模塊。我們將編寫一個給編輯器中選定的JSON代碼進行格式化的擴展。該擴展依賴核心模塊：core/ide, core/ext, core/util 和編輯器管理擴展：ext/editors/editors.讓我們稱該擴展為formatjson，然後將其置於ext文件夾下。

require.def("ext/formatjson/formatjson",
["core/ide",
"core/ext",
"core/util",
"ext/editors/editors",
"text!ext/formatjson/formatjson.xml"],
function(ide, ext, util, editors, markup) {

return ext.register("ext/formatjson/formatjson", {
//Object definition
});

}
);

require.def 第一個參數標識擴展的名字，第二參數中 ide，ext ，util和 editors 代表傳入該擴展依賴的對象引用，formatjson擴展的第五個依賴是加載為一個文本的xml文件。 ‘text!’ 語法告訴 requireJS 不要將參數引入的文件解析為 javascript，僅將其中的內容作為文本返回即可。所有依賴加載完畢後將調用第三個參數代表的回調函數，在回調函數中將我們的擴展注冊到擴展管理器中，讓我們看看擴展文件的結構。

{
    name   : "JSON Formatter",
    dev    : "Your Name Here",
    alone  : true,
    type   : ext.GENERAL,
    markup : markup,

    hook    : function(){},
    init    : function(){},
    enable  : function(){},
    disable : function(){},
    destroy : function(){}
}

屬性和方法詳解:

屬性

屬性名是否必須描述 name 必須 擴展的名字，供管理器中顯示 dev 可選 開發者名字，供擴展管理器中顯示，主要是表彰開發者的榮譽 alone 可選 Boolean值，標識該擴展是個獨立的擴展還是某個擴展的子擴展 type 可選 擴展類型，現在只支持 ext.GENERAL和ext.EDITOR，這個屬性極有可能在未來版本中棄用 markup 可選 String，該擴展的UI定義的標記文本 visible 可選 Boolean值標識該擴展在加載時是否可見，該屬性僅對 Panel 擴展有效

方法

方法名必須描述 hook 可選 在擴展注冊時調用該方法，允許你延遲該擴展的初始化。 例如你可以添加一個菜單項來初始化該擴展。 初始化的時候， markup 參數的值被解析然後調用 init方法。如果沒有定義hook方法，則擴展注冊時會立即初始化。當你指定hook後，就要自己全權負責擴展的初始化。擴展的初始化是由調用ext.initExtension(_self);完成的，其中 _self 是.Panel 擴展一個個引用。對於panel hook函數 通常只有一單單的一個聲明:panels.register(this); init 必須 初始化時解析完UI markup標記字符串後 調用該函數。使所有markup中引入的該擴展的元素可用，並可以對應到其正確的位置。在擴展管理器中啟動該擴展時也會調用該函數。

對editor 型擴展，第一個參數是tab page元素，指示該擴展可以用之填充到自己的UI.Panel 對panel ，第一個參數應該給this.panel傳一個在Cloud9 UI的panel元素 (通常是window元素)。

enable 必須 前端啟用該擴展時調用。這個函數是通過在前端菜單中點擊某個panel擴展時被立即調用的(例如點擊完某個菜單項後顯現勾勾的這個動作)。不要與在擴展管理器中的啟用和禁用擴展混淆，啟禁擴展調用的是 destroy和init方法 disable 必須 前端停用擴展時調用。這個函數是通過在前端菜單中點擊隱藏panel擴展時被立即調用的(例如點擊完某個菜單項後勾勾不顯示的這個動作)。不要與在擴展管理器中的啟用和禁用擴展混淆，啟禁擴展調用的是 destroy和init方法 destroy 必須 注銷擴展時調用。注銷時清除引入的UI元素，事件處理器，和其他狀態等。在擴展管理器中禁用擴展時調用。