從jQuery拆出Framework的Skeleton自己用

 Fri, 06 Mar 2009 11:03:54 +0800

jQuery提供了一個用非常簡單的方式就可以做出可擴充framework的方法，我們可以用很簡單的方式偷過來用。用這樣的方法，可以動態擴充裡面的function，又不會影響global scope，也許在多人使用的環境下開發使用javascript的網頁，可以避免一些衝突的問題。

核心非常簡單：

(function(){
    var window = this;
    if(window.$F)
        window._$F = window.$F;
    var a = {};
    a.fn = a.prototype = {
        init: function(n) {this.node = n;return this;},
    };
    a.fn.extend = function(n,f) {
        if(!a.fn[n]) {
            a.fn[n] = f;
        }
    };
    a.fn.init.prototype = a.fn;
    window.$F = function(c) {
        return new a.fn.init(c);
    };
})();

這樣就可以透過$F來操作，例如：

$F().extend("html", function(m){this.node.innerHTML=m;return this;});
$F().extend("click",function(f){this.node.onclick=f;return this;});

這樣就為他擴充了兩個方法，html()可以修改傳入node的innerHTML，click可以給他加上onclick事件處理函數。例如：

$F(document.getElementById("target")).click(
function(){
    $F(this).html("done");
}
);

這樣就可以在傳入的node加上一個onclick函數，在點選時把innerHTML改為"done"。