Extend, extent

Extend, extent

During this time, I am writing a plug-in to preview images,

I have been told by my boss for countless times. If I don't talk much about it, it's tears.

Looking at my code yesterday, he said you used extend. Do you know what it means?

I only know what expansion means. I instantly feel that I am weak.

True

Let's take a deeper look today.

$. Extend (): Multiple objects can be merged. You can't see it. This is also used.

Var defaults = {multis: 1}; var options = $. extend (opts, defaults, {}); console. log (options. multis); opts = jQuery. extend ({imgType: ["gif", "jpeg", "jpg", "bmp", "png"], // The default Layout mode is tiled present: 'Full-Fill', multi: 1, width: '', height:'',}, opts || {});

Options can get the values of ults and opts.

It should be noted that duplicate attributes will be overwritten.

Var defaults = {multis: 1, multi: 10}; var options = $. extend (opts, defaults, {}); console. log (options. multi); opts = jQuery. extend ({imgType: ["gif", "jpeg", "jpg", "bmp", "png"], // The default Layout mode is tiled present: 'Full-Fill', multi: 1, width: '', height:'',}, opts || {});

In this case, options. multi will be equal to 10, and the subsequent values will overwrite the previous

 

There is also a deep merge, with a true value, which has not been used yet

First, true is not added:

Var test = $. extend ({name: 'lei', location: {city: 'beijing' }}, {last: 'wen', location: {state: 'China '}}); console. log (test) obtains the 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 () toLocaleString: toLocaleString () toString: toString () valueOf: valueOf () get _ proto __: _ proto _ () set _ proto __: _ proto __()

 

What if true is added?

  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 (you can also add static methods). This is jquery. fn. extend {imgPreview: function ()}. This is what I used now.

$.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

 

Then I accidentally saw another article by a great god.

Then there is a piece of code on it, which is very easy to understand.

; (Function ($) {$. fn. extend ({Firstplus: function () {}}); // In this case, the plug-in is used: $ ('div '). firstplus (); $. extend ({Secondplus: function () {}}); // In this case, the plug-in is used: $. secondplus () ;}) ($ );

 

In this way, I can instantly understand how the plug-in is called when being written.