jQuery插件开发方式主要有三种：
- 通过$.extend()来扩展jQuery
- 通过$.fn 向jQuery添加新的方法
- 通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。
而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用。
请看下面的例子。
|
1 2 3 4 5 6 7 |
$.extend({ sayHello : function(name){ console.log("extend方法输出：" + (name ? name:"czj")); } }); $.sayHello("chenzejiang"); $.sayHello(); |
再附上一个例子
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$.extend({ log: function(message){ var now = new Date(), y = now.getFullYear(), m = now.getMonth() + 1, // 月 从0 开始 d = now.getDate(), h = now.getHours(), min = now.getMinutes(), s = now.getSeconds(); alert(y + "/" + m + "/" + d + "/" + h + "/" + min +"/" + s + (message ? message : "")); } }) $.log("你好"); $.log(); |
到控制台看效果
但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。
现在开始介绍第二种开发方式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
;(function ($){ $.fn.cc = function(name,url,color,size,aligns){ var defaults = { cpBy:name, // 版权 url:url, // url color:color, // 颜色 fontSize:size, // 字体大小 aligns:aligns // 对齐方式 } var settings = $.extend({},defaults); var style = 'style="font-size:'+ defaults.fontSize + ";color:" + defaults.color + ";text-align:" + defaults.aligns + ';"'; var cpTxt = '<p' + ' ' + style + '>此文章版权归<a target="_blank" href="' + defaults.url + '">' + defaults.cpBy + "</a>所有</p>"; $(this).append(cpTxt); } })(jQuery) |
调用的方式
|
1 2 3 |
$(function(){ $("a").cc("czj","http://www.qq.com",'green','30px','right'); }) |
面向对象的插件开发
为什么要有面向对象的思维，因为如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。
还是老问题，不方便维护，也不够清晰。当然，这些问题在代码规模较小时是体现不出来的。
如果将需要的重要变量定义到对象的属性上，函数变成对象的方法，当我们需要的时候通过对象来获取，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
接着上面的例子，我们可以把这个插件抽象成创建版权的对象，当然对于这个例子抽象成对象有点小题大做，这里仅作演示用。
所以我们新建一个对象命名为bb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
;(function($){ var bb = function (ele,opt){ this.$element = ele; this.defaults = { cpBy:'czj', fontSize:'100px', url:'http://www.chenzejiang.com', color:'red' } this.option = $.extend({},this.defaults,opt); } bb.prototype = { cc: function(){ var style = 'style="font-size:' + this.option.fontSize + ";color:" + this.option.color + ';"'; var cpTxt = '<p' + ' ' + style + '>此文章版权归<a target="_blank" href="' + this.option.url + '">' + this.option.cpBy + '</a>所有</p>'; return this.$element.append(cpTxt); } } //在插件中使用bb对象 $.fn.dd = function(options) { //创建Beautifier的实体 var aa = new bb(this, options); //调用其方法 return aa.cc(); } })(jQuery, window, document); |
调用
|
1 2 3 |
$(function(){ $('a').dd(); }) |