jquery外掛程式開發一般通過兩種框架方式:
一種是在jquery物件上直接定義新成員,形成外掛程式;
另一種是封裝完整的外掛程式**,然後將jqeury作為引數自身呼叫,達到給jquery物件擴充套件功能目的,形成外掛程式。
其實兩種方式都是給jqeury物件擴充套件成員來實現外掛程式功能的,所以本質上功能相同。下面逐一分析兩種架構。
1、在jquery物件上直接定義新成員
這種開發方式可以理解為給jquery類新增靜態方法。典型的例子就是$.ajax()這個函式,將函式定義於jquery的命名空間中。可以採用如下幾種形式進行擴充套件:
1.1、新增乙個新的全域性函式
新增乙個全域性函式,我們只需如下定義:
jquery.foo = function() ;
1.2、增加多個全域性函式
新增多個全域性函式,可採用如下定義:
jquery.foo = function() ;
jquery.bar = function(param) ;
呼叫時和乙個函式的一樣的:jquery.foo();jquery.bar();或者$.foo();$.bar('bar'
);
1.3、使用jquery.extend(object)
jquery.extend(,
bar: function(param)
});
1.4、為了避免與其他js指令碼或外掛程式命名上發生衝突,可以
將自己定義的**放到乙個命名空間下
。jquery.myplugin = ,
bar:function(param)
}; 採用命名空間的函式仍然是全域性函式,呼叫時採用的方法:
$.myplugin.foo();
$.myplugin.bar('baz'
);
2、封裝打包式的外掛程式開發
形式1:
(function($)
}) })(jquery);
形式2:
(function($) ;
})(jquery);
上面定義了乙個jquery函式,形參是$,函式定義完成之後,把jquery這個實參傳遞進去.立即呼叫執行。這樣的好處是,我們在寫jquery外掛程式時,也可以使用$這個別名,而不會與prototype引起衝突.
3、定義可通過selector選擇器呼叫的外掛程式函式
$.fn.hilight = function() ;
我們的外掛程式通過這樣被呼叫:
$('#mydiv'
).hilight();
4、多引數定義
// plugin definition
$.fn.hilight = function(options) ;
// extend our default options with those provided.
var opts = $.extend(defaults, options);
// our plugin implementation code goes here.
}; 我們的外掛程式可以這樣被呼叫:
$('#mydiv'
).hilight();
4.1、物件方式定義外掛程式引數
$.fn.hilight = function(options) , $.fn.hilight.defaults, options);
// **內容
};
$.fn.hilight.defaults = ;
現在使用者可以包含像這樣的一行在他們的指令碼裡:
//這個只需要呼叫一次,且不一定要在ready塊中呼叫
$.fn.hilight.defaults.foreground = 'blue';
接下來我們可以像這樣使用外掛程式的方法,結果它設定藍色的前景色:
$('#mydiv').hilight();
jQuery 外掛程式開發
一 類級別的外掛程式開發 即給jquery新增新的全域性函式,相當於給jquery類本身新增方法,jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...
jquery 外掛程式開發
自定義主要通過兩種方式實現 extend fn.extend 呼叫的方法分別是 aa this aa 注意 建立函式時不要放在 function 中,呼叫時候要放在事件裡面 this click function jquery.extend 函式詳解 jquery的extend擴充套件方法 jque...
jQuery外掛程式開發
jquery外掛程式開發分為兩種 1 類級別 類級別你可以理解為拓展jquery類,最明顯的例子是.a jax 相當於靜 態方法。開發擴充套件 其方法時 使用.extend方法,即jquery.extend object extend minus function a,b 頁面中呼叫 var i a...