jQuery插件 jQuery extend()、jQuery.fn.extend()

一、jQuery extend()、jQuery.fn.extend() 简介

插件绑定（为jQuery对象增加函数），extend() 方法挂载在 jQuery 和 jQuery.fn 两个不同对象上，代码实现相同，功能却太一样：

• jQuery.extend()：把两个或者更多的对象合并到第一个文档中（$ .直接调用）；
• jQuery.fn.extend()：把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法（$ (selector).调用）。

做个类比，把jQuery当成类，jQuery.extend()扩展类的方法； jQuery.fn.extend()：拓展类的实例化的方法。

二、jQuery.extend()

注意：

• 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
• 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

1、jQuery.extend(object)添加的是全局函数（静态的，属于整个类族，用$直接调用），有三个方式：

 // 方法一：使用jQuery.extend(object)添加全局函数
        // $是jQuery的别名，用$或者用jQuery都行 
        jQuery.extend({
            oneFunction:function(){
                console.log("第一种方法：全局函数")
            }
        })
        jQuery.oneFunction();//就能直接调用

        // 方法二：直接扩展jQuery
        jQuery.twoFounction=function(){
            console.log("第二种方法：也是全局的")
        }
        $.twoFounction();

        // 方法三：命名空间(防止与jQuery自带的函数命名冲突，避免命名相同)
        jQuery.thisNameSpace={
            add:function(){
                console.log("命名空间中的第一个函数")
            }
        }
        $.thisNameSpace.add();

2、案例：写一个插件，能够实现加减乘除简单功能

$.extend({
    operator:function(data1,opt,data2){
        switch(opt){
            case "+":return data1+data2;
            case "-":return data1-data2;
            case "*":return data1*data2;
            case "/":return data1/data2;
        }
    }
})
console.log($.operator(2,"*",9));
console.log($.operator(2,"-",9));

3、提个问题：如果在一个页面里面写了插件，在另外的页面里面也仍然能调用吗？
答案： 并不行，不能跨页面，必须有根据的提前定义。
解释：比如，exercise.html里面扩展了一个函数，在另一个页面try.html里面不经定义直接使用该函数，报错说该函数不存在。说明，exercise.html里面的函数扩展并没有被加入到jQuery底层代码中。

三、jQuery.fn.extend()

$.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

提示：jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

对象是类的实例化，例如$ ("#abc") ，$(div)；而jQuery.fn.extend拓展的方法，一般用在jQuery对象上面。

jQuery.fn = jQuery.prototype = {
      init:funtion(selector,context){
            //.....
     }
}

案例1： 点击button，调用自定义的jQuery对象插件，显示小方块

<button>点击变方块</button>
<div id="box"></div>
<script>
    $.fn.extend({
        changeColor:function() {
            $(this).css({
                backgroundColor: "tomato",
                width: 50,
                height: 50
            })
        }
    })

    $("button").click(function(){
        $("#box").changeColor();//用在jQuery对象上的
    })
</script>

案例2： 弹出框插件。

点击按钮，弹出对话框，每次都在最中间。考虑到是插件，所以，对话框的打开及关闭功能都写在一起，当被调用弹出框插件时，就能完整的引入，不需要再进行其他设置。

<style>
    #window{
        width: 350px;
        height: 200px;
        background: tomato;
        position: absolute;
        color: white;
        text-align: right;
        display: none;
    }
</style>

<button id="start">开始</button>
<div id="window">我是对话框</div>

<script>
    $.fn.extend({
        popPlugin:function(){ //写插件
            let box=$(this)[0];
            console.log(this,$(this),$(this)[0]);
            let boxBtn=null;
            //移动弹出框到中心位置
            function setBoxPosition(){
                //要想获取offsetWidth display必须设置为block
				//必须现有元素才有宽高
                box.style.display="block";
                box.style.left=window.innerWidth/2-box.offsetWidth/2+"px";
                box.style.top=window.innerHeight/2-box.offsetHeight/2+"px";         
                createBtn();
            }
            // 创建窗口右上角的关闭按钮
            function createBtn(){
                // boxBtn=document.createElement("button");
                // $("<button id='end'>关闭</button>").appendTo(box).css({//因为是插件，所以不可避免有重名的情况，所以最好不要用id，改用对象的形式
                boxBtn=$("<button>关闭</button>");
                boxBtn.appendTo(box).css({
                    width:40,
                    height:30,
                   backgroundColor:"white",
                   border:"1px solid white",
                   margin:2,
                   fontSize:"12px"
                })
                closeBox();
            }
            // 点击关闭按钮，窗口隐藏
            function closeBox(){
	                // $("#end").click(function(){
	                //     box.style.display="none";
	                //     // $(box).css({
	                //     //     display:"none"
	                //     // })
	                // })
                boxBtn.click(function(){
                    box.style.display="none";
                })
            }
            setBoxPosition();
        }
    })

    // 页面内点击开始按钮
    $("button").click(function(){
        $("#window").popPlugin(); //用插件
    });
</script>

四、 jQuery extend()、jQuery.fn.extend() 的区别

1. 两者调用方式不同：
   jQuery.extend()，一般由传入的全局函数来调用，主要是用来拓展个全局函数，如 $ .init()，$ .ajax()；
   jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，如 $ .fn.each();
2. 两者的主要功能作用不同：
   jQuery.extend(object)      为扩展jQuery类本身，为自身添加新的方法；
   jQuery.fn.extend(object)  给jQuery对象添加方法。
3. 大部分插件都是用jQuery.fn.extend() 完成的。

五、第三方插件的引入

以jQuery的cookie插件为例，简单介绍下插件的引入及使用。

（一） jQuery cookie插件下载

下载与引入：先引入jquery，再引入jquery.cookie.js（jquery.cookie.js基于jquery）；
下载地址：http://plugins.jquery.com/cookie/

（二） 步骤

1、添加一个"会话cookie"：

$.cookie('the_cookie', 'the_value');

注意：这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。

2、创建一个cookie并设置有效时间为 7天：

$.cookie('the_cookie', 'the_value', { expires: 7 });

这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie（注意单位是：天）。

3、创建一个cookie并设置 cookie的有效路径：

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

4、读取cookie：

cookie('the_cookie');

5、删除cookie：

$.cookie('the_cookie', null, -1); //通过传递null作为cookie的值即可

6、可选参数：

$.cookie('the_cookie','the_value',{
    expires:7,  
    path:'/',
    domain:'jquery.com',
    secure:true
})　

• expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
• path：（String）创建该Cookie的页面路径；
• domain：（String）创建该Cookie的页面域名；
• secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS。