jQuery 函数继承与插件

原型链中的都是成员函数而非静态方法

参考文章：

1. https://blog.csdn.net/dwb123456123456/article/details/83316471
2. https://blog.csdn.net/zhang__ao/article/details/79637583

乱入几个方法

1. $.each(obj,callback（index,val)):obj为需要遍历的对象和数组

jQuery函数继承：

$.extend({})、$.fn.extend({})、$.fn.funName=function(){}

2. $.extend({}):{}中内可添加函数，其中的所有函数扩展到jQuery类上，可以理解为添加静态方法。

3. $.fn.extend({}):{}内可添加函数，其中的所有函数添加为jQuery类的成员函数，jQuery类的实例可以使用这些方法

4. $.fn.funName = function(){}:该函数添加为jQuery类的成员函数，jQuery类的实例可以使用这些方法

5.将jQuery集合转换成数组形式

① 对象集合.get()
② $.makeArray(对象集合)
③ 对象集合.toArray()

6. $.map(obj,callBack):obj为对象、数组；

7. $.extend(obj1,obj2...)

1. 当使用extend合并对象时，对于相同属性，后面对象的该属性的值会将前面对象的该属性的取值覆盖。最终所有属性合并到第一个对象中。将后面所有对象属性、函数合并到第一个对象中（后面所有对象的相同属性的取值以越往后的对象的属性的取值为准），最终将该对象返回。
2. 若只有一个参数，并不打印任何对象的内容。
3. 当对象为数组时，后面的数组会将第一个数组同一位置的元素覆盖。
4. 实现浅拷贝
5. 对于嵌套对象，该方法是替换，而不是添加

//2
 var s={
        name:"李四",
        sex:"男",
        age:20,
        aa:111
    }
     var person=$.extend(s);
     console.log(person);//打印结果如下图1

图1：

8. es6 Object.assign()

1. 至少有两个参数，第一个参数为目标对象，第二个参数为源对象。
2. 若只有一个参数，则返回值为该参数。
3. 若传入参数不为对象，则系统自动先转成对象再赋值。
4. 对于相同属性取值，后面对象的值会把前面对象的值覆盖。
5. 由于undefined和null无法转成对象，所以如果它们作为目标参数，就会报错。
6. 若第一个参数为数组，第二个参数会从前向后覆盖数组的元素值。若第二个参数为字符串，则会将字符串拆分成一个个字符，分别从前向后覆盖数组中的值。且每一个元素都为字符类型。
7. 对于数字类型、bool类型、字符串类型，只有字符串类型作为源对象时才会添加到目标对象中，其余不会有替换/添加
8. 对于嵌套对象，该方法是替换，而不是添加
9. Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
10. 如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着， 如果undefined和null不在首参数，就不会报错。其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。

//2情况
 var s={
        name:"李四",
        sex:"男",
        age:20,
        aa:111
    }
var o=Object.assign(s)//o=s

//6情况
var a = [1,2,3]
var o=Object.assign(a,"111");//o为["1","1","1"]
var a = [1,2,3]
var o=Object.assign(a,"1");//o为["1",2,3]

//8情况
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source);//结果为 a: { b: 'hello' } 

//9情况
var object1 = { a: { b: 1 } };
var object2 = Object.assign({}, object1);
object1.a.b = 2;
console.log(object2.a.b);//2

jQuery插件

1. 对象级别开发插件

jquery官方给了一套对象级别开发插件的模板：

;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };

        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //实现功能的代码
        });
    };
})(jQuery);

1. 函数全部放在闭包里，外面的函数就调用不到里面的参数了,比较安全
2. 前面加分号,避免不必要的麻烦

2. 类级别开发插件：

1. 添加新的全局函数(1,2方法实际上是给jQuery添加静态函数)
2. 使用$.extend(obj)
3. 使用命名空间

//1.直接给jquer添加全局函数
jQuery.myAlert=function (str) {
    alert(str);
};

//2.用extend()方法。extend是jquery提供的一个方法，把多个对象合并起来，参数是object
jQuery.extend({
    myAlert2:function (str1) {
        alert(str1);
    },
    myAlert3:function () {
        alert(11111);
    }
});

//一定要注意两种类级别编写插件方式书写的区别。

//3.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突)
jQuery.yuqing={
    myAlert4:function (str) {
        alert(str);
    },
    centerWindow:function (obj) {
        obj.css({
            'top':($(window).height()-obj.height())/2,
            'left':($(window).width()-obj.width())/2
        });
        //必须进行返回对象的操作，否则就不能继续往下进行链式操作了。
        return obj;
    }
};

调用部分：

//调用自定义插件方法
  $('#btn').click(function () {
      $.myAlert('我是调用jquery编写的插件弹出的警告框');
      $.myAlert2('我是调用jquery的extend()方法编写的插件弹出的警告框');
      $.myAlert3();
      $.yuqing.myAlert4("调用使用了命名空间编写的插件方法");
  });
  
 $.yuqing.centerWindow($('#div1')).css('background','red');
// $('#div1').css('background','red');//若在上面方法没有返回对象，可再次开始一个链进行设置。