extend

时间:2023-11-12 15:46:20

这段时间在写一个预览图片的插件,

被我老大说了无数次了,不多说啥,说多了都是泪

昨天看着我的代码他说你用了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();
})($);

 这样就让我瞬间明白写插件的时候调用的方式