After being confused for a while, I finally got a clue. It is roughly:
The code copy is as follows:
Create a self-call anonymous function, design the parameter window, and pass it in the window object.
The purpose of this process is,
The code copy is as follows:
Make your own code not contaminated by other codes, and at the same time, it can not contaminate other codes.
jQuery encapsulation
So I found an earlier version of jQuery, and the encapsulation code in the version number is 1.7.1 is roughly the following
The code copy 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 );
Among them
The code copy is as follows:
console.log('hello');
It is used to verify whether it works as mentioned at the beginning, so we can call jQuery in window
The code copy is as follows:
window.$
Or
The code copy is as follows:
window.jQuery
So we can create a similar package
The code copy is as follows:
(function(window, undefined) {
var PH = function() {
}
})(window)
Compared to the above, there are only two steps missing
1. Define the symbols and global calls of jQuery
2. Asynchronous support
So I found the earlier jQuery encapsulation, which was roughly the same in terms of method, except. .
The code copy is as follows:
if (typeof window.jQuery == "undefined") {
var jQuery = function() {};
if (typeof $ != "undefined")
jQuery._$ = $;
var $ = jQuery;
};
It's so magical that we can't rewrite the previous step jQuery. So I had to see what the latest jQuery encapsulation looks like. So I opened 2.1.1 and found that except for adding a lot of functions, my ideas are basically unchanged.
The code copy is 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;
}));
When using a browser
The code copy is as follows:
typeof module ="undefined"
So the above situation is judged when using Node.js, etc., which also indicates that jQuery is becoming bloated.
Backbone Package
Open Backbone and check it out
The code copy is 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 reflects its dependence on jQuery and underscore.
The code copy is as follows:
define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
root.Backbone = factory(root, exports, _, $);
});
It indicates that backbone is natively supported by requirejs.
Underscore Package
So, I looked at Underscore again and found that this library occupied another symbol_
The code copy 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));
Overall, they are almost anonymous functions, except that the call() method is used in the end.