jquery之封装插件

今天就讲一下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://blog.csdn.net/clerk0324/article/details/22498633