基於jQuery開發的外掛程式及demo

2021-08-24 23:21:47 字數 1973 閱讀 7644

jquery外掛程式開發方式主要有三種:

(function($,window,document,undefined))(jquery,window,document);

//簡易的乙個例子

(function($, window, document,undefined) ,

this.options = $.extend({}, this.defaults, opt)

}//定義beautifier的方法

beautifier.prototype = );}}

//在外掛程式中使用beautifier物件

$.fn.myplugin = function(options)

})(jquery, window, document);

編寫中的注意事項:

外掛程式開發請使用物件導向思維

因為如果不這樣,你可能需要乙個方法的時候就去定義乙個function,當需要另外乙個方法的時候,再去隨便定義乙個function,同樣,需要乙個變數的時候,毫無規則地定義一些散落在**各處的變數

保護好預設引數

var defaults = ;

var settings = $.extend(defaults, options);

var defaults = ;

var settings = $.extend({},defaults, options);//將乙個空物件做為第乙個引數

讓外掛程式接收引數

乙個強勁的外掛程式是可以讓使用者隨意定製的,這要求我們提供在編寫外掛程式時就要考慮得全面些,盡量提供合適的引數

支援鏈式呼叫

要讓外掛程式不打破jquery支援鏈式呼叫的特性(選擇好dom元素後可以不斷地呼叫其他方法),只需return一下即可

基於jquery開發的快速操作cookie外掛程式,下面的僅僅做參考。

/**

* created by wolf mr.yu on 2017/11/26/ 18:30.

* * 請先引入jquery庫,否則外掛程式無法執行

* * 該檔案用於快速操作cookie

* * 呼叫說明 $.method()

* 例:$.setcookie('userid','74110',30);

* * */

try cookie名

* @param value 值

* @param time 有效時間(天)

* @return boolean

* ps: true 成功 false 失敗

* */

setcookie:function(cookiename,value,time)

return false;

},/**

* 獲取cookie

* @param cookiename cookie名

* @return string

* */

getcookie:function(cookiename)

return null;

},/**

* 清除指定cookie

* @param cookiename cookie名

* @return boolean

* ps: true 成功 false 失敗

* */

clearcookie:function(cookiename)

return false;

},/**

* 清除所有cookie

* @return boolean

* ps: true 成功 false 失敗

* */

clearallcookie:function()

}return true;

}catch(e)

}});

})(jquery,this)

}catch(e)

參考:

基於jQuery 的外掛程式開發

談到jquery,對於開發人員是再熟悉不過了,從其誕生發展到到目前,一路走來,歷經風雨變化十幾載,依舊是開發人員使用最廣泛 最常用 也是最成熟的js庫。但其再成熟也不可能開發出所有的功能,於是乎就用了外掛程式這麼一說,用來拓展和補充jquery 的功能。外掛程式開發最常用的兩種方法 1.擴充套件 j...

jQuery外掛程式的開發

jquery外掛程式開發方式主要有三種 通過 extend 來擴充套件jquery 通過 fn 向jquery新增新的方法 通過 widget 應用jquery ui的部件工廠方式建立 通常我們使用第二種方法來進行簡單外掛程式開發,說簡單是相對於第三種方式。第三種方式是用來開發更高階jquery部件...

基於jQuery編寫外掛程式

寫在前面 相信很多使用過框架的人都不會再想著用jquery庫去找選擇器,對dom樹進行複雜的操作了吧,但是用jquery去擴充套件外掛程式和方法還是很有用途的,最起碼對自己的程式設計基礎還是很有用的,jquery庫相對穩定,自己擴充套件出來的方法或函式方便後期維護和提高自己的開發效率。1.我們最常接...