extend

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

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

昨天看着我的代码他说你用了extend，那你知道是什么意思吗

我只知道是扩展的意思，瞬间觉得自己弱爆了

真的

然后今天看深究深究吧

$.extend():可以合并多个对象，不行你看，这个也用到过

今天在看ES6，然后加上最近一个review我发现web端可以用jQuery，来扩展对象，那因为我最近也在写小程序，就发现小程序并不能用jQuery，那我要是想扩展合并对象的话要怎么办呢，今天刚好看到一个Object.assign()

var target={a:1}
var srouce={a:3,b:4,c:5}

var obj=Object.assign({},target,source)
最后得到的obj是等于{a:3,b:4,c:5}

也是跟extend一样的效果，也是碰到相同的属性的时候，后面的属性会覆盖前面的属性

我前面加了一个{}空对象，也是跟extend一样，其实加不加都无所谓

          var defaults={
                    multis:1
                };
                var options = $.extend(opts,defaults, {});
                console.log(options.multis);
                opts = jQuery.extend({
                    imgType: ["gif", "jpeg", "jpg", "bmp", "png"],

                    // 布局方式 默认方式是平铺
                    present: 'full-fill',
                    multi: 1,
                     '',
                    height: '',
                }, opts || {});

options可以拿到defaults和opts的值

这个要说明一下，要是重复的属性，会被覆盖掉

           var defaults={
                    multis:1,
                    multi:10
                };
                var options = $.extend(opts,defaults, {});
                console.log(options.multi);
                opts = jQuery.extend({
                    imgType: ["gif", "jpeg", "jpg", "bmp", "png"],

                    // 布局方式 默认方式是平铺
                    present: 'full-fill',
                    multi: 1,
                     '',
                    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(4,5)+$.minu(6,4);

console.log(num)//11

 然后刚才偶然间又看到某个大神的文章

然后上面有一段代码是这样的，我觉得特别通俗易懂

;(function($){
        $.fn.extend({
            Firstplus: function() {}
        });

        //这样写的话插件的使用方法就是：$('div').Firstplus();

        $.extend({
            Secondplus: function() {}
        });
        //这样写的话插件的使用方法就是：$.Secondplus();
    })($);

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