Einführung in anonyme Funktionen und Kapselung in Javascript_Javascript-Kenntnisse

Nachdem ich eine Weile die Kapselung verschiedener JS-Bibliotheken verwirrt hatte, bekam ich endlich eine Ahnung. Ungefähr:

Code kopieren Der Code lautet wie folgt:

Erstellen Sie eine selbstaufrufende anonyme Funktion, entwerfen Sie das Parameterfenster und übergeben Sie das Fensterobjekt.

Der Zweck dieses Prozesses ist:

Code kopieren Der Code lautet wie folgt:

Dadurch wird sichergestellt, dass Ihr eigener Code nicht durch andere Codes verunreinigt wird und gleichzeitig andere Codes nicht verunreinigt werden.

jQuery-Paket

Also habe ich eine frühe Version von jQuery gefunden. Die Versionsnummer ist ungefähr wie folgt.

Code kopieren Der Code lautet wie folgt:

(Funktion( Fenster, undefiniert ) {
var jQuery = (function() {console.log('hello');});
window.jQuery = window.$ = jQuery;
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
})( Fenster );

davon

Code kopieren Der Code lautet wie folgt:

console.log('hello');

Es wird verwendet, um zu überprüfen, ob es wie eingangs erwähnt funktioniert, damit wir jQuery
im Fenster aufrufen können

Code kopieren Der Code lautet wie folgt:

Fenster.$

Oder

Code kopieren Der Code lautet wie folgt:

window.jQuery

Damit wir ein ähnliches Paket erstellen können

Code kopieren Der Code lautet wie folgt:

(Funktion(Fenster, undefiniert) {
var PH = function() {

}
})(Fenster)

Im Vergleich zum oben Gesagten fehlen nur noch zwei Schritte

1. Definieren Sie jQuery-Symbole und globale Aufrufe
2.Asynchrone Unterstützung

Also habe ich nach einem früheren jQuery-Paket gesucht und die Methode war ungefähr dieselbe, außer. .

Code kopieren Der Code lautet wie folgt:

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

var $ = jQuery;
};

Es ist eine so magische Beurteilungsmethode, dass wir die jQuery im vorherigen Schritt nicht neu schreiben können. Also musste ich einen Blick darauf werfen, wie das neueste jQuery-Paket aussieht. Also habe ich 2.1.1 geöffnet und festgestellt, dass neben dem Hinzufügen vieler Funktionen die Grundidee dieselbe geblieben ist

Code kopieren Der Code lautet wie folgt:

(Funktion(global, Fabrik) {

    if (typeof module === "object" && typeof module.exports === "object") {
        module.exports = global.document ?
            Fabrik(global, wahr) :
            Funktion(w) {
                if (!w.document) {
                    throw new Error("jQuery erfordert ein Fenster mit einem Dokument");
                }
                Rückgabe ab Werk(w);
        };
    } sonst {
        Fabrik (global);
    }

}(typeof window !== "undefiniert" ? window : this, function(window, noGlobal) {
    var jQuery = function() {
        console.log('jQuery');
    };
    if (typeof define === "function" && define.amd) {
        define("jquery", [], function() {
            jQuery zurückgeben;
        });
    };
    strundefiniert = Typ von undefiniert;
    if (typeof noGlobal === strundefiniert) {
        window.jQuery = window.$ = jQuery;
    };
    jQuery zurückgeben;
}));

在使用浏览器的情况下

复制代码 代码如下:

Typ des Moduls = „undefiniert“

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

Backbone 封装

打开了Backbone看了一下

复制代码 代码如下:

(Funktion(root, Factory) {

    if (typeof define === 'function' && define.amd) {
        define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
            root.Backbone = Factory(root, exports, _, $);
        });

    } else if (typeof exports !== 'undefiniert') {
        var _ = require('underscore');
        Fabrik(root, exporte, _);

    } sonst {
        root.Backbone = Factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
    }

}(this, function(root, Backbone, _, $) {
    Rückgrat.$ = $;
    return Backbone;

}));

Sie können auch jQuery verwenden und einen Unterstrich hinzufügen.

复制代码 代码如下:

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

Sie können die Backbone-Funktion „requirejs“ verwenden.

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

复制代码 代码如下:

(fonction() {
var racine = ceci;
var _ = fonction(obj) {
Si (obj instanceof _) renvoie obj;
Si (!(cette instance de _)) renvoie un nouveau _(obj);
This._wrapped = obj;
};

if (type d'exportations !== 'undefined') {
Si (type de module !== 'undéfini' && module.exports) {
exports = module.exports = _;
>
exporte._ = _;
} autre {
racine._ = _;
>

if (typeof Définir === 'fonction' && définir.amd) {
           definition('underscore', [], function() {
              return _;
        });
>
}.call(this));

De manière générale, ce sont presque toutes des fonctions anonymes, sauf que la méthode call() est utilisée à la fin.