Introduction to anonymous functions and encapsulation in Javascript_javascript skills

After confusing the encapsulation of different JS libraries for a while, I finally got a clue. Roughly:

Copy code The code is as follows:

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

The purpose of this process is,

Copy code The code is as follows:

This ensures that your own code will not be polluted by other codes, and at the same time it will not pollute other codes.

jQuery package

So I found an early version of jQuery. The version number is 1.7.1. The encapsulation code is roughly as follows

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

of which

Copy code The code 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 the window

Copy code The code is as follows:

window.$

Or

Copy code The code is as follows:

window.jQuery

So we can create a similar package

Copy code The code is as follows:

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

}
})(window)

Compared to the above, there are only two steps missing

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

So I looked for an earlier jQuery package, and the method was roughly the same, except. .

Copy code The code is as follows:

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

var $ = jQuery;
};

It’s such a magical judgment method that we can’t rewrite the jQuery in the previous step. So I had to take a look at what the latest jQuery package looks like. So I opened 2.1.1 and found that in addition to adding a lot of functions, the basic idea remains the same

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

在使用浏览器的情况下

复制代码 代码如下:

typeof module ="undefined"

所以上面的情况是针对于使用Node.js等的情况下判断的，这也表明jQuery正在变得臃肿。

Backbone 封装

打开了Backbone看了一下

复制代码 代码如下:

(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;

}));

除了异步支持，也体现了其对于jQuery和underscore的依赖，百

复制代码 代码如下:

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

表明backbone是原生支持requirejs的。

Underscore 封装
于是，又看了看Underscore，发现这个库又占领了一个符号 _

复制代码 代码如下:

(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));

Generally speaking, they are almost all anonymous functions, except that the call() method is used at the end.