Introduction to anonymous functions and encapsulation in JavaScript _javascript tips

Confused for a moment after the different JS library encapsulation, finally have a clue. is roughly:

Copy Code code as follows:

Create a self-invocation anonymous function, design the parameter window, and pass in the Window object.

And the purpose of this process is to

Copy Code code as follows:

Make your own code not contaminated by other code, and you can not contaminate other code.

jQuery Encapsulation

So I found an earlier version of jquery, the version number is 1.7.1 inside the package code is roughly the following

Copy Code code 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);

of which

Copy Code code as follows:

Console.log (' Hello ');

is used to verify that the work is done at the beginning, so we can call jquery in window

Copy Code code as follows:

window.$

Or is

Copy Code code as follows:

Window.jquery

So we can create a similar package

Copy Code code as follows:

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

}
}) (window)

It's just two steps short of the top.

1. Define jquery symbols and global calls
2. Asynchronous support

So I found the encapsulation of the earlier jquery, which is roughly the same, except for.

Copy Code code as follows:

if (typeof window.jquery = = "undefined") {
var jQuery = function () {};
if (typeof $!= "undefined")
jquery._$ = $;

var $ = jQuery;
};

It's a magical way of judging that we can't rewrite the last jquery. So I had to look at the latest jquery encapsulation. So I opened the 2.1.1, and found that in addition to a lot of functions, basically the idea is still the same

Copy Code code as follows:

(function (global, factory) {

if (typeof module = = = "Object" && typeof module.exports = = "Object") {
Module.exports = global.document?
Factory (Global, true):
Function (W) {
if (!w.document) {
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;
}));

In the case of using a browser

Copy Code code as follows:

typeof module = "Undefined"

So the above is judged by the use of node.js and so on, which suggests that jquery is becoming bloated.

Backbone Package

Opened the backbone and looked.

Copy Code code as follows:

(function (root, factory) {

if (typeof define = = ' function ' && define.amd) {
define ([' Underscore ', ' jquery ', ' exports '], 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 embodies its reliance on jquery and underscore, hundred

Copy Code code as follows:

define ([' Underscore ', ' jquery ', ' exports '], function (_, $, exports) {
Root. Backbone = Factory (root, exports, _, $);
});

Indicates that backbone is a native support Requirejs.

Underscore package
so, and looked at the underscore, found that the library has occupied a symbol _

Copy Code code as follows:

(function () {
var root = this;
var _ = function (obj) {
if (obj instanceof _) return obj;
if (!) ( This is 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, and almost all anonymous functions, except for the Last Call () method.