原型链中的都是成员函数而非静态方法
参考文章:
- https://blog.csdn.net/dwb123456123456/article/details/83316471
- 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...)
- 当使用extend合并对象时,对于相同属性,后面对象的该属性的值会将前面对象的该属性的取值覆盖。最终所有属性合并到第一个对象中。将后面所有对象属性、函数合并到第一个对象中(后面所有对象的相同属性的取值以越往后的对象的属性的取值为准),最终将该对象返回。
- 若只有一个参数,并不打印任何对象的内容。
- 当对象为数组时,后面的数组会将第一个数组同一位置的元素覆盖。
- 实现浅拷贝
- 对于嵌套对象,该方法是替换,而不是添加
//2
var s={
name:"李四",
sex:"男",
age:20,
aa:111
}
var person=$.extend(s);
console.log(person);//打印结果如下图1
图1:
8. es6 Object.assign()
- 至少有两个参数,第一个参数为目标对象,第二个参数为源对象。
- 若只有一个参数,则返回值为该参数。
- 若传入参数不为对象,则系统自动先转成对象再赋值。
- 对于相同属性取值,后面对象的值会把前面对象的值覆盖。
- 由于undefined和null无法转成对象,所以如果它们作为目标参数,就会报错。
- 若第一个参数为数组,第二个参数会从前向后覆盖数组的元素值。若第二个参数为字符串,则会将字符串拆分成一个个字符,分别从前向后覆盖数组中的值。且每一个元素都为字符类型。
- 对于数字类型、bool类型、字符串类型,只有字符串类型作为源对象时才会添加到目标对象中,其余不会有替换/添加
- 对于嵌套对象,该方法是替换,而不是添加
- Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。
- 如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着, 如果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);
- 函数全部放在闭包里,外面的函数就调用不到里面的参数了,比较安全
- 前面加分号,避免不必要的麻烦
2. 类级别开发插件:
- 添加新的全局函数(1,2方法实际上是给jQuery添加静态函数)
- 使用$.extend(obj)
- 使用命名空间
//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');//若在上面方法没有返回对象,可再次开始一个链进行设置。