Decoding a common code in JavaScript component encapsulation

There is a picture of the truth, first.

Believe that a lot of people want to study the source of the small partner must be this code to frighten, directly to eliminate the idea of downward look down. I just started to see a little confused, this is something so long, but slowly analysis you will find the mystery, and listen to my slowly come.

First, let's look at the overall structure. (function (global, factory) {}) (This, (function () {})), which is still a little bit confused, that (function (a, b) {Console.log (A)}) (A, B) You're not going to be a stranger to this. The two parameters, A and B, are passed to the previous function, and then a series of subsequent operations are performed in the function. That you understand, the beginning of the code is not a good idea, is to use this and (function () {}) as two parameters to the previous parenthesis, and then with the global, and factory these two parameters to receive, So the factory in the preceding function is the function that is passed in, and global is the value represented by this, which is typically the Window object at the time of the call. The whole structure is clear, and look at what the function means.

First glance in the past JS should be a ternary operation expression (do not understand it is OK, I will explain), but why there are several ":" and "?" , let's first look at a standard structure 1&&2. Console.log ("a"): Console.log ("B"), the standard ternary operation expression, that is, if the 1&&2 evaluates to true, the first statement executes if False the second statement is executed. What about this 1&&2? Console.log ("a"): 0&&1? Console.log ("B"): Console.log ("C") is not so difficult to understand. is to replace the second execution statement with a ternary expression. That is, when the first judge is really executing the first statement console.log ("a") and if the judgment is false then the second ternary expression is executed and then the Console.log ("B") is executed if true, and Console.log ("C") is executed if False. Well, the bedding has already gone, let's look at the original expression, this time the small partner is not able to understand.

That is, the first judge exports is the object and the module is not undefined this time through the Module.exports will factory (this is the function that is passed back, do not be ignorant) function export (compatible with COMMONJS notation), if this judgment is not established and then execute the next sentence to Judge D Efined is function and DEFINE.AMD exists, is about to factory into defined (compatible with AMD mode), if it is not, assign factory to the Vue object and bind Vue to the Global (Window object) so that it can be called globally, this Is the method that we call when we are introduced directly through the script tag.

Finally explained, small partners can be happy to do the source analysis .....

Decoding a common code in JavaScript component encapsulation