2017-07-24 更新：增加單例模式。

?

jquery插件開發(fā)框架代碼：

/** 插件編寫說明：* 1、插件命名：jquery.[插件名].js，如jquery.plugin.js* 2、對象方法添加到j(luò)Query.fn上，全局方法添加到j(luò)Query對象本身上* 3、插件內(nèi)部的this指向通過選擇器獲取的jQuery對象* 4、可以使用this.each遍歷所有的元素* 5、所有的方法以分號結(jié)束；插件頭部先添加一個(gè)分號* 6、插件應(yīng)該返回一個(gè)jQuery對象，以保證插件的鏈?zhǔn)讲僮? 7、使用閉包形式，使用$作為jQuery的別名以避免沖突* 8、單例模式*///為了兼容性良好，開始前有個(gè)分號 ;//傳入jQuery是為了確保在匿名函數(shù)中正確的使用jQuery對象，防止多庫共存時(shí)$沖突 //傳入window、document并非必須，只不過為了更快的訪問window和document //獲得沒有未被修改的 'undefined',因?yàn)閷?shí)際并沒有傳遞這個(gè)參數(shù)。 (function($, win, doc, undefined) {var alertPlugin = function(opts) {//保存this變量var _self = this;//定義默認(rèn)參數(shù)_self.opts = {content: '彈出內(nèi)容'};//根據(jù)傳入的參數(shù)擴(kuò)展默認(rèn)參數(shù)if(opts && $.isPlainObject(opts)) {$.extend(_self.opts, opts);}//調(diào)用函數(shù)方法 _self.show(_self.opts);};//函數(shù)方法實(shí)現(xiàn)alertPlugin.prototype = {show: function(opts) {alert(opts.content);}}//擴(kuò)展插件 $.fn.extend({alertPlugin: function(opts) {//遍歷所有元素return this.each(function() {//單例模式var instance;if(!instance) {instance = new alertPlugin(opts);}});}}); })(jQuery, window, document); //jQuery，window，document作為實(shí)參

?

?

插件調(diào)用：

//未傳遞參數(shù)的調(diào)用 $('.a').alertPlugin(); //傳遞參數(shù)的調(diào)用 $('.a').alertPlugin({content: '新彈出內(nèi)容'});

?

轉(zhuǎn)載于:https://www.cnblogs.com/mengfangui/p/7211354.html

總結(jié)

以上是生活随笔為你收集整理的jquery插件开发通用框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。