这段时间在写一个预览图片的插件,
被我老大说了无数次了,不多说啥,说多了都是泪
昨天看着我的代码他说你用了extend,那你知道是什么意思吗
我只知道是扩展的意思,瞬间觉得自己弱爆了
真的
然后今天看深究深究吧
$.extend():可以合并多个对象,不行你看,这个也用到过
今天在看ES6,然后加上最近一个review我发现web端可以用jQuery,来扩展对象,那因为我最近也在写小程序,就发现小程序并不能用jQuery,那我要是想扩展合并对象的话要怎么办呢,今天刚好看到一个Object.assign()
var target={a:}
var srouce={a:,b:,c:} var obj=Object.assign({},target,source)
最后得到的obj是等于{a:,b:,c:}
也是跟extend一样的效果,也是碰到相同的属性的时候,后面的属性会覆盖前面的属性
我前面加了一个{}空对象,也是跟extend一样,其实加不加都无所谓
var defaults={
multis:
};
var options = $.extend(opts,defaults, {});
console.log(options.multis);
opts = jQuery.extend({
imgType: ["gif", "jpeg", "jpg", "bmp", "png"], // 布局方式 默认方式是平铺
present: 'full-fill',
multi: ,
width: '',
height: '',
}, opts || {});
options可以拿到defaults和opts的值
这个要说明一下,要是重复的属性,会被覆盖掉
var defaults={
multis:,
multi:
};
var options = $.extend(opts,defaults, {});
console.log(options.multi);
opts = jQuery.extend({
imgType: ["gif", "jpeg", "jpg", "bmp", "png"], // 布局方式 默认方式是平铺
present: 'full-fill',
multi: ,
width: '',
height: '',
}, opts || {});
这样的时候options.multi会等于10,后面的值会覆盖前面的
还有一个深层合并的,加了一个true,这个还没有用到过
先是没有加true的:
var test=$.extend({name:'lei',location:{city:'beijing'}},{last:'wen',location:{state:'china'}});
console.log(test) 得到了 Object
last: "wen"
location: Object
state: "china"
__proto__: Object
name: "lei"
__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()
要是加了true呢
var test=$.extend(true,{name:'lei',location:{city:'beijing'}},{last:'wen',location:{state:'china'}});
console.log(test) Object
last:"wen"
location:
Object
city:"beijing"
state:"china"
__proto__ :Object
name :"lei"
__proto__:Object
$.extend(还可以添加静态方法)这就是jquery.fn.extend{imgPreview:function()}这个就是我现在用到的了
$.extend({ add:function(a,b){return a+b}, minu:function(a,b){return a-b} }) var num=$.add(,)+$.minu(,); console.log(num)//
然后刚才偶然间又看到某个大神的文章
然后上面有一段代码是这样的,我觉得特别通俗易懂
;(function($){
$.fn.extend({
Firstplus: function() {}
}); //这样写的话插件的使用方法就是:$('div').Firstplus(); $.extend({
Secondplus: function() {}
});
//这样写的话插件的使用方法就是:$.Secondplus();
})($);
这样就让我瞬间明白写插件的时候调用的方式