jquery之封装插件

男娘i 2022-07-11 11:09 346阅读 0赞

今天就讲一下jquery封装插件的方法吧，看完这个，你就会认识到jquery里面好多功能的由来，以后也不用对jquery那么陌生了，会有一种亲近感了，嘻嘻。  
不过我们现在还是用人家现成的插件，以后有时间一定要通读一遍源码。  
好了，回到正题，今天主要讲`jQuery.extend()和jQuery.fn.extend()`两种方法的用法。

一、首先讲一下jQuery封装的插件：  
1.封装对象方法的插件  
例：`$(element).text()`  
2.封装全局函数的插件  
例：`$.trim()`  
3.选择器插件  
例：`color(red)`选择所有红色字的元素；  
封装插件的要点：  
1.jquery插件的命名为jquery.\[插件名\].js；  
2.所有的对象方法即上面的（1）附加到jQuery.fn对象上，而所有的全局函数附加到jQuery对象本身上；  
3.插件内部，this指的是选择器获取的jQuery对象，而非click（）方法内部指的是dom元素。  
4.所有的方法和函数插件都应该以分号结尾，以方便压缩，前面可以也加个分号；当然一般使用闭包来解决；  
5.插件应该返回一个Jquey对象，一遍链式操作  
链式操作：即`$(element).css().attr()`  
6.避免在插件内部使用$作为jQuery对象的别名，使用完整的jQuery来表示，以避免冲突；  
7.这两种封装方法传递进来的应该是纯正的object形式，即”函数或方法名/函数主体”；  
不规范：

var cc = 2;
    var jQuery = function(cc){ 
         $ = jQuery;
        alert(cc);
    }
    $(function(){ 
        jQuery();
    });

规范：

(function($){ alert(1); })(jQuery);

二、jquery插件的机制  
该机制的主要优点是：添加新选项也不必影响到以前已经定义好的方法；  
另外还可以设置插件方法的一系列参数。

var setting = {
       id:1,name:"tom",age:"30"};
    var options={
       id:2,name:"Bob"};
    var newOptions = jQuery.extend(setting,options);

结果为 newOptions =\{id:2,name:”Bob”,age:”30”\}；  
因此我们以后调用函数的参数时可以这么用：

function foo(options){ 
        options=jQuery.extend({
            name:"",
            id:1,
            age:12//默认参数
        },options);
    }

三、编写jQuery插件  
1.封装jquery对象的插件  
封装模板

;(function($){ })(jQuery);

实现：

;(function($){ 
        $.fn.extend({
            "color":function(value){ 
            return this.css("color",value);
        }
        });
    })(jQuery);
    
    //调用
    $(element).color(red);

2.封装全局函数的插件

;(function($){ 
        $.extend(){
            "ltrim1":function(text){ 
                return (text);
            },
            "ltrim2":function(text){ 
            return (text);
            },
        }
    })(jQuery);
    
    //调用
    $.ltrim1("abc");
    $.ltrim2("abc");

3.自定义选择器  
原理：jquery选择符解析器首先会使用一组正则表达式来解析选择器，然后正对解析出的每个选择符执行一个函数，成为选择器函数，最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素。  
直接举个例子吧

;(function($){ 
        $.extend($.expr[":"],{
            between:function(a,i,m){ 
                var tmp = m[3].split(",");
                return tmp[0]-0<i&&i<tmp[1]-0;
            }
        });
    })(jQuery);
    
    //应用
    $("div:between(2,5)").css("display","none");

四、其它

`$.fn.function`用于添加单个方法  
`$.fn.extend` 用于添加多个方法  
`$.fn`是一个命名空间（命名空间的主要作用是防止变量名混淆），也是一个对象，其实`jQuery.fn =jQuery.fn.init.prototype`，所以它本身而言肯定是可以直接添加方法的了，这是js规定的了；而$.fn.extend只是规范的封装了一种添加对象方法的方式。（不用纠结）

$.fn.aaa = function() { }
    $.fn.extend({
        aaa: function() { }
    });

jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype

需要理解一下这个：  
参考：[http://www.2cto.com/kf/201506/404398.html][http_www.2cto.com_kf_201506_404398.html]  
[http://blog.csdn.net/clerk0324/article/details/22498633][http_blog.csdn.net_clerk0324_article_details_22498633]

[http_www.2cto.com_kf_201506_404398.html]: http://www.2cto.com/kf/201506/404398.html
[http_blog.csdn.net_clerk0324_article_details_22498633]: http://blog.csdn.net/clerk0324/article/details/22498633