jQuery定義插件的方法
有些WEB開發者,會引用一個JQuery類庫,然後在網頁上寫一寫$("#"),$("."),寫了幾年就對別人説非常熟悉JQuery。我曾經也是這樣的人,直到有一次公司裏的技術交流,我才改變了自己對自己的看法。
擴展jquery的時候。最核心的方法是以下兩種:
$nd(object) 可以理解為jquery添加一個靜態方法
$nd(object) 可以理解為jquery實例添加一個方法
$nd(object)
例子:
/* $nd 定義與調用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$nd({ fun: function () { alert("執行方法一"); } });//定義$();//調用$ntd(object)/* $nd 定義與調用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$nd({ fun: function () { alert("執行方法"); } });$(this)();//等同於$ = function () { alert("執行方法三"); }$(this)();
定義jquery插件的基本結構
1. 定義作用域:
為插件定義一個私有作用域。外界代碼不能直接訪問插件內部。插件內部代碼不受外界干擾,也不會污染到全局變量。
//step 定義JQuery的作用域(function ($) {})(jQuery);
2. 為插件添加擴展方法:
//step01 定義JQuery的作用域(function ($) { //step02 插件的擴展方法名稱 $Slider = function (options) { }})(jQuery);
3. 設置默認值:
//step 定義JQuery的作用域(function ($) { //step-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴展方法名稱 $Slider = function (options) { //step-b 合併用户自定義屬性,默認屬性 var options = $nd(defaults, options); }})(jQuery);
其中:var options = $nd(defaults, options)的含義了。表示 options 去覆蓋了defaults的值,並把值賦給了options。
在插件環境中,就表示用户設置的值,覆蓋了插件的默認值;如果用户沒有設置默認值的屬性,還是保留插件的默認值。
4. 支持jquery選擇器:
//step 定義JQuery的作用域(function ($) { //step-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴展方法名稱 $Slider = function (options) { //step-b 合併用户自定義屬性,默認屬性 var options = $nd(defaults, options); //step 支持JQuery選擇器 (function () { }); }})(jQuery);
5 .支持JQuery的鏈接調用:
為了能達到鏈接調用的效果必須要把循環的每個元素return
//step 定義JQuery的'作用域(function ($) { //step-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的擴展方法名稱 $Slider = function (options) { //step-b 合併用户自定義屬性,默認屬性 var options = $nd(defaults, options); //step 支持JQuery選擇器 //step 支持鏈式調用 return (function () { }); }})(jQuery);
6. 插件裏的方法:
在插件裏定義的方法,外界不能直接調用,我在插件裏定義的方法也沒有污染外界環境。
//step01 定義JQuery的作用域(function ($) { //step03-a 插件的默認值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step06-a 在插件裏定義方法 var showLink = function (obj) { $(obj)nd(function () { return "(" + $(obj)("href") + ")" }); } //step02 插件的擴展方法名稱 $Slider = function (options) { //step03-b 合併用户自定義屬性,默認屬性 var options = $nd(defaults, options); //step4 支持JQuery選擇器 //step5 支持鏈式調用 return (function () { //step06-b 在插件裏定義方法 showLink(this); }); }})(jQuery);
通過以上內容給大家介紹了jQuery定義插件的方法,希望大家喜歡。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
如何獲取PHP數組的鍵與值呢
array_keys($array);//獲取數組(字典)的所有鍵值,返回一個鍵值數組。array_values($array)://獲取數組的所有value值,飯回一個數組。<?php$json='{"a":1,"b":2,"c":3,"d":4,"e":5}';//註明:value不帶雙引號時,其值只能是數字。【!!!注意:大括號兩邊只能是單引號,...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
php項目經理的職責表述7篇
php項目經理的職責表述11、負責售前技術支持。配合銷售人員作售前產品技術講解、演示;2、根據客户需求反饋研發,提供良好解決方案3、遠程現場技術支持4、網絡環境搭建和服務器配置;5、車載產品安裝調試;6、軟件平台安裝調試;7、負責區域售後技術支持;8、參與項...