jquery的自定义插件的学习

jquery提供的自定义插件方法

jQuery可以很好地让开发者参与扩展开发插件的过程中来，形成自己常用的工具平台，满足自己公司的特定需要，作为新手需要详细了解其自定义插件的2种方式。其实有三种方式：

• 通过$.extend()来扩展jQuery：这是最简单又方便的方式，但是不能操作绑定DOM。
• 通过$.fn 向jQuery添加新的方法：这是最常用的方式，大部分的插件都是通过这种方式完成的。
• 通过$.widget()应用jQuery UI的部件工厂方式创建：这是用来开发更高级的JQuery插件，新手了解就行。

1、通过$.extend()来扩展jQuery

这是最简单的一种方式，只是在jquery的命名空间上添加一个静态方法（通俗的理解）而已。不能使用在DOM上，即只能以$.myPlugin(param)形式出现，不能以$(selector).myPlugin()的形式。这不是我们经常使用的方式。
（1）编写格式

第一种方式：

//第一种方式
$.extend({
"插件名":function(自定义参数){  
//Your plugin code
}

第二种方式：这种方式更加好记，但缺少了extend关键字。

//第二种方式
$.插件名 = function{
//Your plugin code
}

（2）具体例子

在编写例子之前，首先你得准备自己的myPlugin.js文件还有引入jquery.js文件，这里注意一定要先引入jquery.js文件再引入你自己定义的插件（这是作为新手我容易犯的错误或者不会注意的细节，跟bootstrap的引入有点类似）

<script src="sc/jquery/jquery-3.2.1.js"></script>
<script src="sc/jquery/myPlugin-1.1.js"></script>

在myPlugin.js中编写简单的输出日期格式的插件dataFormat

$.dateFormat = function(message){
    //dateFormat:function(message){
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, 
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(message+': '+time);
    //}     
};

之后在test.html页面中测试：

$.dateFormat('Lijian');//传入参数'Lijian'

输出结果为：

2、通过$.fn.extend()来扩展jQuery

这是开发插件者最常用的方式，其中涉及的部分有点多，下面将简单一一来记录以此来加深自己的记忆。

（1）编写格式

其格式也有两种方式

$.fn.插件名 = function(){
//Your plugin code
}

或者

$.fn.extend({
    "插件名":function(){
    //Your plugin code
    }
)}

（2）具体例子

其功能为：将所选div元素的背景颜色改为黄色

test.html:

<div>
     Lijian Hellworld!
 </div>
 <div id="div">
     Zhangsan Helloworld!
 </div>
 <div>
     Lisi Helloworld!
 </div>

//myPlugin.js
$.fn.myPlugin = function(){
    this.css('background','yellow');
}

这里重点要讲的是关键字this，这里的this是指我们所选的元素，比如：

//this就是我们所选的$('div')的DOM
$('div').myPlugin()

但是所选的元素很大可能是个集合，$('div')就是body中所有的div集合，那么我们怎么需要遍历找到其中的每一个呢？这就需要用到$(selector).each(function(){......})。

$.fn.myPlugin = function(){
    //这里的this指div集合
    this.css('background','yellow');//所以的div背景变为黄色
    this.each(function(){
        //这里的this就是指body中每一个div，并不是指整个div集合
        this.css('color','red');//每一个div的文字内容都变为红色
    })
 }

这里要清楚明白这里的两种不同的this，后面才会理解。

（3）实现链式操作

我们所有的很多插件都会支持Jquery的链式操作，所有我们自然而然也需要在开发插件的时候关注这点，而实现这点很简单，只需要return 即可

$.fn.myPlugin = function(){
    this.css('background','yellow');
    //返回的是整个div DOM集合，如果需要指定特定的元素，需要再筛选过滤
    retrun this;
 }

//链式操作找到返回div集合中id='div'的div元素，并且字体变为红色
$('div').myPlugin().filter('#div').css('color','red');

我们可以也返回每一个元素集合中的元素，就会减少遍历查找特定元素的步骤

$.fn.myPlugin = function(){
    this.css('background','yellow');
    //返回的是整个div DOM集合每一个匹配的div元素
    retrun this.each(function(){
    });
 }

//链式操作对每个div进行文字变红色的操作，也可以过滤出来id='div'的div元素
$('div').myPlugin().css('color','red');
//$('div').myPlugin().filter('#div').css('color','red');

（4）实现接收参数

插件的强大之处就是在于可以根据使用者的需要任意达到某种效果，就好比我们所举的例子，我们需要将所选元素背景颜色改为黄色，但这是在代码中是被固定的，现在我门需要使用者自定义。那么就需要传入适当的参数给使用者，这样就会大大增加了灵活性。

$.fn.myPlugin = function(options){
//默认的样式 
var defaults = {
    'color':'red',
    'backgroud':'yellow'
 };
//使用$.extend合并，关于$.extend()的用法下面会介绍
var settings = $.extend(defaults,options)
     return this.each(function(){
        'color':setting.color,
        'backgroud':setting.backgroud
     });
}

• 首先我们创建第一个对象defaults(defaults一定要拼写正确，更不能少了s，不然会报错)是用来用户定义插件所选元素中默认的样式，这样使用者就可以不传递参数也可以有默认的参数来实现默认的样式。
• 其次再创建第二个对象settings是用来合并用户传入的参数与默认参数对象的，比如用户传入的参数{'color':'red','backgroud','green'}，其中字体颜色是相同的red，而背景是不同的绿色green。相同的属性color与background，第二个对象参数option会覆盖第一个默认参数default的属性，得到{'color':'red','bakgourd':'green'}，但是这样多的缺点就是：会改变默认值default对象的属性值，也就达不到默认的效果。可以通过传入空的对象来解决这个问题。
• 最后$.extend()函数是用于将一个或多个对象的内容合并到目标对象（第一个对象）,如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

（5）解决默认参数会被改变的问题

通常使用传入空参数{}作为目标第一个对象参数来保护默认对象不会被改变。因为后面可能还会用到默认对象defaut，我们希望它不会被随意改变。

$.fn.myPlugin = function(option){
//默认的样式 
var defaults = {
    'color':'red',
    'backgroud':'yellow'
 };
//使用$.extend合并到第一个空对象中，保护好默认对象
var settings = $.extend({},defaults,options)
console.log(settings);
      return this.each(function(){
        'color':setting.color,
        'backgroud':setting.backgroud
     });
}

使用者传入参数：

$('div').myPlugin1({
        'color':'red',
	'backgroud':'green'
});

输出合并后的settings如下：

（6）jquery对象保持好元素

同样地，我们希望在插件中我们一开始选择的元素即第一个出现的this将在之后的代码中会用到，但是后面的代码会反复出现很多的this，每个this代表的元素可能不一样，那么我们怎么将最初的元素保持好呢，这时候只需要创建jquery对象(jquery对象常常用$开头，DOM对象没有$，两者是可以转换的)即可。

$.fn.myPlugin2 = function(){
    //jquery对象获得一开始我们选择的div集合，后面可能会用到$this
    var $this = $(this);
    console.log($this.length);
    this.each(function(){
        //这里的$(this)是div集合中每一个div
        console.log($(this).length);
    });
 }

div集合的中的元素个数为3个，一目了然。