jQuery插件机制

jQuery 有两种语法：
一、$(selector).action() jQuery的基本语法

二、($ . ) jQuery工具 语法
例如：
$.each 遍历对象和数组
$.isArray 判断一个数据是否是数组，返回一个布尔值
$.merge 合并数组
$.type 检测数据类型

jQuery的插件机制(这也是jQuery经久不衰的原因)

$.extend()
用来在jQuery命名空间添加函数
它是jQuery的核心函数
jQuery所有的工具 都是用这个方法来实现的 $.ajax $.get

1. $.extend 给jQuery添加工具

$.extend({
            PI: 3.14,
            max: function() {
                return Math.max.apply(Math, arguments);
            }
        });

console.log($.PI);//打印结果3.14
console.log($.max(4124, 56, 55, 1, 22, 43345, 234, 1, 13)); //打印结果43345

2. 合并对象
将后传入的对象的属性 合并到 第一个对象
（后传入的对象不发生改变，改变的是第一个对象）
如果后面对象的属性名 于前面的对象相同 则覆盖

var a = {
            username: 'zhangsan',
        }

        var b = {
            age: 20,
            username: 'lisi'
        }
        console.log($.extend( a, b ));//打印结果{username: "lisi", age: 20}

这是个浅拷贝 涉及引用类型时，直接赋值地址

当然还有深拷贝的情况，使用 extend进行对象属性合并时，第一个参数传入布尔值true，表示的是深拷贝，不再赋值地址，堆中的引用类型数据也同样拷贝走

接下来讲一下 $.fn.extend()

console.log($.extend === $.fn.extend);//结果为true

虽然打印的结果显示true，其实两个是不一样的东西

$ .fn.extend()： 在jQuery原型对象上扩展方法
思考：$.fn是什么？
回答：是jquery的原型

console.log($.fn);

打印结果为：

那么我们就可以在$.fn.extend()内封装属性或方法，然后通过实例访问原型上的属性或方法

举个例子：

封装一个选项卡（tabs）插件：
首先DOM结构必须是以这样的形式

类名可以随意

封装的jquery.tabs.js插件内容

!function($){//接受jQuery对象
    $.fn.extend({
        tabs:function(options){
            let defaults={//设置默认参数
                event:'click',
                btn:'actived',
                content:'show'
            };
            $.extend(defaults,options);//合并对象

            // console.log(this);//这里的this指代的就是实例化对象
            //是一个jQuery对象---$('#tabs')
            let oBtn=this.children('ul').children('li');
            let oDiv=this.children('div');
            oBtn.on(defaults.event,function(){
                let index=oBtn.index(this);//点击的li的索引
                $(this).addClass(defaults.btn).siblings().removeClass(defaults.btn);
                oDiv.eq(index).addClass(defaults.content).siblings().removeClass(defaults.content);
            })
        }
    })
}(jQuery);//传jQuery对象

在外面直接$(’#tabs’).tabs();调用即可