jquery插件开发的几种方式

2019独角兽企业重金招聘Python工程师标准>>>

插件编写的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护。

一、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

转载于:https://my.oschina.net/u/2428791/blog/658222