jQuery-插件开发_jquery插件开发

1. 什么是Jquery插件

Jquery插件是对Jquery框架利用原型的一个扩充

插件通常是一个完备功能的封装，它是JQ功能的一个补充或者扩展

注意：开发JQ插件，必须先引入JQ插件，再引入想应插件

例子：

;(function () {
    function _color() {
        $(this).css('color', 'red');
    }
    jQuery.prototype.color = _color;
})();
1
2
3
4
5
6
7

1.1 插件种类

Jquery的插件种类主要分为三类：

1.1.1 封装对象方法的插件（原型拓展）

这是大多数采用的方法。操作原型，对Jquery框架侵入性较小，例如：parent()方法、append()方法和addcClass()方法等dom操作方法。

1.1.2 封装全局函数的插件（静态拓展）

常见如：$.trim()方法和$.now()方法，都是Jquery内部作为全局函数的插件附加到内核上去的

1.1.3 选择器插件

虽然jQuery的选择器功能十分强大，但有时用户的特殊需求，还是会扩展一些自己喜欢的 选择器，例如用：color(‘red’)来把选择器匹配的元素的文字样式一次性设置为红色。

1.2命名规范

通常情况下，Jquery插件采用下面的模式进行命名：

JQuery.插件名称.js//开发模式
1

min版也采用上面类似的命名规范，并添加一个min标记：

JQuery.插件名称.min.js //产品模式，无bug调试，删除了多余的空间
1

2. Jquery插件让渡（冲突）

在我们编写jQuery插件时，插件内容多多少少也会用到jQuery框架自身的特性。但是如果我们当前环境，不单 单只有jQuery框架，还有其他的一些框架。更巧合的是其他框架的核心对象也使用的$…(那么我们框架实现起来就 困难了)。

这时，我们要把$的控制权让渡给第一个实现它的那个库。jQuery官方API是这样说：

这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$(“div p”)的地方，就必须换成jQuery(“div p”)。 ‘’‘注意:’’‘这个函数必须在你导入jQuery文件 之后，并且在导入另一个导致冲突的库’’‘之前’’'使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后 一个导入的。

jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
1
2
3
4
5

当然，也可以创建一个新的别名用以在接下来的库中使用jQuery对象。（常用于深度让渡）

// 解绑后给jQuery对象，取一个新的别名
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';
1
2
3
4
5
6

3. Jquery 插件中的闭包

关于闭包，是指在一个函数内部，调用函数以外的变量方式。

利用闭包的特性，既可以避免临时变量影响全局空间，又可以在插件内部继续使用$作为Jquery。

常见的插件形式：

;(function(){
    // 这里方式代码
})();
1
2
3

当然这里也可以传递参数进去，以供内部函数调用：

// 为了有更好的兼容性，开始前有一个分号
;(function($){
// 这里放代码
alert($);
})(jQuery);

1
2
3
4
5
6

例子

;(function (){
    function tt($) {
        console.log('我是jquery插件');
    }
    var clo='clo';
    $.fn.tt=tt;
    $.fn.clo=clo;
})(jQuery)
1
2
3
4
5
6
7
8

插件中使用闭包的优点：

1. 使用匿名函数，减少了全局变量的污染
2. 使用闭包，对内部信息进行了保护
3. 在定义完毕之后，把新函数挂在jQuery上，完成插件开发

4.Jquery 的插件机制

jQuery中主要提供了两种扩展方法：

第一种：原型扩展

第二种：静态扩展

4.1 原型扩展

jQuery源码中是这样使用原型扩展的：

jQuery.fn = jQuery.prototype = {
。。。
}
1
2
3

因此我们可以写出以下实例：

在原型上绑定单个方法

;(
    // 在原型上绑定单个方法
    function ($) {
        $.fn.changesize=function(w,h) {
            $(this).height(h)
            $(this).width(w)
        }
    }
)(jQuery)
1
2
3
4
5
6
7
8
9

在这里了解到的扩展只是一种单一扩展，如果我们要扩展多个，一个个写过于麻烦。jQuery插件机制中js ，提供一种“批量”扩展，代码如下：

;(
    // 批量绑定
    $.fn.extend({
        getHTML:function () {
            return $(this).html();
        },

        setHTML:function (str) {
            $(this).html(str)
        }
    })
    }
)(jQuery)
1
2
3
4
5
6
7
8
9
10
11
12
13

4.1 静态扩展

jQuery.exend方法是jQuery插件机制默认自带的方法，可以方便的对jQuery对象本身进行扩展：

;(
    function () {
        $.extend({
            getdata: function (message) {
                var now = new Date(),
                    y = now.getFullYear(), // 获取年
                    m = now.getMonth() + 1, // JavaScript中月份是从0开始的，稍作处理！
                    d = now.getDate(), // 获取日期
                    h = now.getHours(),
                    min = now.getMinutes(),
                    s = now.getSeconds();
                var time = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s;
                console.log(message+'  '+time);
            }
        }
        )
    }
)()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用：

 $.getdata('tt');
1

5. this关键字

this通常用来指向执行当前上下文的对象。而在不同场景下，代表的意义又不一样。在jQuery开发中，this关 键字通常引用的是当前正在操作的DOM对象；

在插件开发中，应先this缓存起来。这个this指向的是对象本身。
this可以写成：this或$(this)

例如：

; (function ($) {
    var that;
    function color() {
        that=this;
        return that.css('color','blue');
    }
    $.fn.color=color
})(jQuery);
1
2
3
4
5
6
7
8

使用方法：

    $('.tt').color().css('background','red');
1

使插件返回本身的写法由以下模板：

   ;(function($){
      var that;
      $.fn.插件名 = function(){
        that = this;
        // 实现插件功能的代码
      }

      return that;
    })(jQuery);
1
2
3
4
5
6
7
8
9

或者

  ;(function($){
        var that;
        $.fn.extend = { 
          插件名1: function(){
            that = this;
            // 实现插件功能的代码
          },
          插件名2: function(){
            that = this;
            // 实现插件功能的代码
          },
          插件名3: function(){
            that = this;
            // 实现插件功能的代码
          },
          ...
        }
        return that;
      })(jQuery);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6.注意点

这里罗列一些插件开发的注意事项及其一些优化

6.1 参数配置

在我们只有插件接受一个参数时对我们的使用似乎没有什么影响，但是当要是一堆参数呢，我们还要继续使用顺序的参数配置模式吗？

这样无疑是增加了开发的难度，这时我们可以使用对象参数的形式来解决这个问题

看例子：

; (
    function ($) {
        var that;
        $.fn.setsomeattr=function setsomesttr(options) {
            that=this;
            that.css('color',options.color).css('width',options.width).css('height',options.height).css('font-size',options.fontsize).css('background',options.background)
            return that
        }
    }
)(jQuery)
1
2
3
4
5
6
7
8
9
10

使用

 $('.tt').setsomeattr({
        width:200,
        height:200,
        color:'red',
        fontsize:25,
        background:'green',
    });
1
2
3
4
5
6
7

这样一来我们大可不必再由参数配置而左右我们的代码

6.2 默认值设置

这里我们接着上一条看，如果我们不想给这个插件传参呢？是不是会报错，所以这里我们需要设置一些默认值来处理这些问题，这里的原理其实是用到了extend方法来讲传进来的参数值覆盖默认值，这样一来，就可以解决此问题。

来看例子：

;(
    function ($) {
        var that;
        $.fn.setsomeattr=function setsomesttr(options) {
            that=this;
            var val={width:100,
                height:100,
                color:'black',
                fontsize:18,
                background:'red'};
            var setting=$.extend({},val,options);
            that.css('color',setting.color).css('width',setting.width).css('height',setting.height).css('font-size',setting.fontsize).css('background',setting.background)
            return that
        }
    }
)(jQuery)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用方法：

 $('.tt').setsomeattr();
1

6.3 命名空间

现在的插件开发，成本越来越低。这也导致部分人们在命名上经常会有冲突的情况。

为了解决这一问题我们可有以下策略：

把所有方法以私有方法定在命名空间下，然后再结合闭包把方法查 询表对外暴露出去。用第一参数，传入一个方法字符串；方法的第二个参数（开始），可以指定是这个方法所需的 参数。

看以下实例：

;(
    function ($) {
        var that;
        var obj={
            init:function(options){
                console.log('init');
                this.html('hahahahaha');
                console.log(options);
            },
            show:function(){
                console.log('show');
            },
            undate:function(){
                console.log('undate');
            },
            delete:function(){
                console.log('delete');
            },
            add:function(){
                console.log('add');
            }
        }
        $.fn.spacename = function (options) {
            that=this;
            //obj[options.fn].call(that,options);
            obj[options.fn].apply(that,arguments);
            return that;
        }

    }
)(jQuery)
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
27
28
29
30
31

使用方法:

    $('.tt').spacename({fn:'init',tex:'hahaha'});
1