Pengenalan kepada fungsi tanpa nama dan enkapsulasi dalam kemahiran Javascript_javascript

Setelah mengelirukan enkapsulasi perpustakaan JS yang berbeza untuk seketika, akhirnya saya mendapat petunjuk. Secara kasar:

Salin kod Kod adalah seperti berikut:

Cipta fungsi tanpa nama panggilan sendiri, reka bentuk tetingkap parameter dan masukkan objek tetingkap.

Tujuan proses ini ialah,

Salin kod Kod adalah seperti berikut:

Ini memastikan bahawa kod anda sendiri tidak akan dicemari oleh kod lain, dan pada masa yang sama ia tidak akan mencemarkan kod lain.

pakej jQuery

Jadi saya menjumpai versi awal jQuery Nombor versi ialah 1.7.1 Kod enkapsulasi secara kasarnya seperti berikut

Salin kod Kod adalah seperti berikut:

(fungsi( tetingkap, tidak ditentukan ) {
var jQuery = (function() {console.log('hello');});
window.jQuery = window.$ = jQuery;
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
})( tingkap );

yang mana

Salin kod Kod adalah seperti berikut:

console.log('hello');

Ia digunakan untuk mengesahkan sama ada ia berfungsi seperti yang dinyatakan pada permulaan, jadi kita boleh memanggil jQuery
dalam tetingkap

Salin kod Kod adalah seperti berikut:

tingkap.$

Atau

Salin kod Kod adalah seperti berikut:

window.jQuery

Jadi kita boleh buat pakej yang serupa

Salin kod Kod adalah seperti berikut:

(fungsi(tetingkap, tidak ditentukan) {
var PH = function() {

}
})(tetingkap)

Berbanding di atas, hanya ada dua langkah yang kurang

1. Tentukan simbol jQuery dan panggilan global
2.Sokongan tak segerak

Jadi saya mencari pakej jQuery yang lebih awal, dan kaedahnya lebih kurang sama, kecuali. .

Salin kod Kod adalah seperti berikut:

if (typeof window.jQuery == "undefined") {
var jQuery = function() {};
Jika (jenis $ != "tidak ditentukan")
          jQuery._$ = $;

var $ = jQuery;
};

Ini adalah kaedah penghakiman yang ajaib sehingga kami tidak boleh menulis semula jQuery dalam langkah sebelumnya. Jadi saya terpaksa melihat rupa pakej jQuery terkini. Jadi saya membuka 2.1.1 dan mendapati bahawa selain menambah banyak fungsi, idea asasnya tetap sama

Salin kod Kod adalah seperti berikut:

(fungsi(global, kilang) {

    if (jenis modul === "objek" && jenis modul.eksport === "objek") {
        module.exports = global.document ?
            kilang(global, benar) :
            fungsi(w) {
                jika (!w.dokumen) {
                    throw new Error("jQuery memerlukan tetingkap dengan dokumen");
                }
                pulangkan kilang(w);
        };
    } lain {
        kilang(global);
    }

}(jenis tetingkap !== "tidak ditentukan" ? tetingkap : ini, fungsi(tetingkap, tiadaGlobal) {
    var jQuery = function() {
        console.log('jQuery');
    };
    if (typeof define === "function" && define.amd) {
        define("jquery", [], function() {
            kembalikan jQuery;
        });
    };
    strudefined = jenis undefined;
    if (jenis noGlobal === strudefined) {
        window.jQuery = window.$ = jQuery;
    };
    kembalikan jQuery;
}));

在使用浏览器的情况下

复制代码 代码如下:

jenis modul ="undefined"

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

Tulang Belakang 封装

打开了Backbone看了一下

复制代码 代码如下:

(fungsi(akar, kilang) {
    if (typeof define === 'function' && define.amd) {

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

    } jika tidak (jenis eksport !== 'tidak ditentukan') {

        var _ = memerlukan('garis bawah');
        kilang(root, eksport, _);

    } lain {

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

}(ini, fungsi(akar, Tulang Belakang, _, $) {

    Tulang belakang.$ = $;
    kembalikan Tulang Belakang;

}));

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

复制代码 代码如下:

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

表明tulang belakang是原生支持requirejs的。

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

复制代码 代码如下:

(function() {
var root = this;
var _ = function(obj) {
If (obj instanceof _) return obj;
Wenn (!(diese Instanz von _)) neues _(obj);
zurückgibt This._wrapped = obj;
};

if (typeof exports !== 'undefiniert') {
If (typeof module !== 'undefiniert' && module.exports) {
exports = module.exports = _;
}
exporte._ = _;
} sonst {
root._ = _;
}

if (typeof define === 'function' && define.amd) {
           define('underscore', [], function() {
              return _;
        });
}
}.call(this));

Im Allgemeinen handelt es sich fast ausschließlich um anonyme Funktionen, mit der Ausnahme, dass am Ende die Methode call() verwendet wird.