插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护。
一、jQuery插件开发方式
1、通过$.extend()来扩展jQuery
2、通过$.fn 向jQuery添加新的方法
3、通过$.widget()应用jQuery UI的部件工厂方式创建
二、三种jQuery插件开发方式说明
1、$.extend()相对简单,一般很少能够独立开发复杂插件,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。
2、我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction()),而不需要选中DOM元素($('#example').myfunction())。
3、$.widget()是一种高级的开发模式,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等
4、$.fn则是一般插件开发用到的方式,可以利用jQuery强大的选择器带来的便利,以及将插件更好地运用于所选择的元素身上,使用的插件也大多是通过此种方式开发。
三、$.extend()扩展jQuery的实例
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'aaa') + '!');
}
})
$.sayHello(); //Hello,aaa
$.sayHello('bbb'); //Hello,bbb
说明:上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。
四、$.fn方式插件开发
1、定义
$.fn.pluginName = function() { //your code here}
2、定义说明
基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。
3、简单实例
将页面上所有链接颜色转成红色,则可以这样写这个插件
$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
}
转载自:jquery插件开发的几种方式 http://www.studyofnet.com/news/1203.html