Introduction to anonymous functions and encapsulation in Javascript _ javascript skills

This article mainly introduces anonymous functions and encapsulation in Javascript. This article analyzes jQuery encapsulation, Backbone encapsulation, Underscore encapsulation, and so on, if you need it, you can refer to it and get confused about the encapsulation of different JS libraries. Generally:

The Code is as follows:

Create a self-called anonymous function, design the window parameter, and input the window object.

The purpose of this process is,

The Code is as follows:

So that your code will not be contaminated by other code, but also can not be contaminated with other code.

JQuery Encapsulation

So I found an earlier version of jQuery. The encapsulated code in version 1.7.1 is roughly as follows:

The Code is as follows:

(Function (window, undefined ){
Var jQuery = (function () {console. log ('hello ');});
Window. jQuery = window. $ = jQuery;
If (typeof define = "function" & define. amd & define. amd. jQuery ){
Define ("jquery", [], function () {return jQuery ;});
}
}) (Window );

The

The Code is as follows:

Console. log ('hello ');

It is used to verify whether to start with jQuery, so we can call jQuery in the window.

The Code is as follows:

Window. $

Or

The Code is as follows:

Window. jQuery

So we can create a similar encapsulation.

The Code is as follows:

(Function (window, undefined ){
Var PH = function (){

}
}) (Window)

It is only two steps less than above

1. Define jQuery symbols and global calls
2. asynchronous support

So I found the earlier jQuery encapsulation. The method is roughly the same ..

The Code is as follows:

If (typeof window. jQuery = "undefined "){
Var jQuery = function (){};
If (typeof $! = "Undefined ")
JQuery. _ $ = $;

Var $ = jQuery;
};

This is so amazing that we cannot rewrite jQuery in the previous step. So I had to look at the latest jQuery encapsulation. So I opened 2.1.1 and found that in addition to a lot of functions, the idea remains unchanged.

The Code is as follows:

(Function (global, factory ){

If (typeof module = "object" & typeof module. exports = "object "){
Module. exports = global.doc ument?
Factory (global, true ):
Function (w ){
If (! W.doc ument ){
Throw new Error ("jQuery requires a window with a document ");
}
Return factory (w );
};
} Else {
Factory (global );
}

} (Typeof window! = "Undefined "? Window: this, function (window, noGlobal ){
Var jQuery = function (){
Console. log ('jquery ');
};
If (typeof define = "function" & define. amd ){
Define ("jquery", [], function (){
Return jQuery;
});
};
Strundefined = typeof undefined;
If (typeof noGlobal === strundefined ){
Window. jQuery = window. $ = jQuery;
};
Return jQuery;
}));

When using a browser

The Code is as follows:

Typeof module = "undefined"

Therefore, the above situation is determined when Node. js is used. This also indicates that jQuery is becoming bloated.

Backbone Encapsulation

Opened Backbone and checked it.

The Code is as follows:

(Function (root, factory ){

If (typeof define ==== 'function' & define. amd ){
Define (['underscore ', 'jquery', 'export'], function (_, $, exports ){
Root. Backbone = factory (root, exports, _, $ );
});

} Else if (typeof exports! = 'Undefined '){
Var _ = require ('underscore ');
Factory (root, exports ,_);

} Else {
Root. Backbone = factory (root, {}, root. _, (root. jQuery | root. Zepto | root. ender | root. $ ));
}

} (This, function (root, Backbone, _, $ ){
Backbone. $ = $;
Return Backbone;

}));

In addition to asynchronous support, it also reflects its dependence on jQuery and underscore.

The Code is as follows:

Define (['underscore ', 'jquery', 'export'], function (_, $, exports ){
Root. Backbone = factory (root, exports, _, $ );
});

It indicates that backbone supports requirejs native.

Underscore Encapsulation
So I looked at Underscore and found that the library occupied another symbol _

The Code is as follows:

(Function (){
Var root = this;
Var _ = function (obj ){
If (obj instanceof _) return obj;
If (! (This instanceof _) return new _ (obj );
This. _ wrapped = obj;
};

If (typeof exports! = 'Undefined '){
If (typeof module! = 'Undefined' & module. exports ){
Exports = module. exports = _;
}
Exports. _ = _;
} Else {
Root. _ = _;
}

If (typeof define ==== 'function' & define. amd ){
Define ('underscore ', [], function (){
Return _;
});
}
}. Call (this ));

In general, they are almost all anonymous functions, except the call () method.