從jQuery拆出Framework的Skeleton自己用
Fri, 06 Mar 2009 11:03:54 +0800jQuery提供了一個用非常簡單的方式就可以做出可擴充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"。