Setelah bingung untuk sementara waktu, saya akhirnya mendapat petunjuk. Itu kira -kira:
Salinan kode adalah sebagai berikut:
Buat fungsi anonim mandiri, rancang jendela parameter, dan lewati di objek jendela.
Tujuan dari proses ini adalah,
Salinan kode adalah sebagai berikut:
Buat kode Anda sendiri tidak terkontaminasi oleh kode lain, dan pada saat yang sama, tidak dapat mencemari kode lain.
enkapsulasi jQuery
Jadi saya menemukan versi jQuery sebelumnya, dan kode enkapsulasi dalam nomor versi adalah 1.7.1 kira -kira adalah berikut
Salinan kode adalah sebagai berikut:
(fungsi (jendela, tidak terdefinisi) {
var jQuery = (function () {console.log ('hello');});
window.jQuery = window. $ = jQuery;
if (typeOf define === "fungsi" && define.amd && define.amd.jQuery) {
define ("jQuery", [], function () {return jQuery;});
}
}) (jendela);
Di antara mereka
Salinan kode adalah sebagai berikut:
console.log ('halo');
Ini digunakan untuk memverifikasi apakah berfungsi seperti yang disebutkan di awal, jadi kita dapat memanggil jQuery di jendela
Salinan kode adalah sebagai berikut:
jendela. $
Atau
Salinan kode adalah sebagai berikut:
window.jQuery
Jadi kita bisa membuat paket serupa
Salinan kode adalah sebagai berikut:
(fungsi (jendela, tidak terdefinisi) {
var ph = function () {
}
})(jendela)
Dibandingkan dengan yang di atas, hanya ada dua langkah yang hilang
1. Tentukan simbol dan panggilan global jQuery
2. Dukungan asinkron
Jadi saya menemukan enkapsulasi jQuery sebelumnya, yang kira -kira sama dalam hal metode, kecuali. .
Salinan kode adalah sebagai berikut:
if (typeof window.jQuery == "tidak terdefinisi") {
var jQuery = function () {};
if (typeof $! = "tidak terdefinisi")
jQuery ._ $ = $;
var $ = jQuery;
};
Ini sangat ajaib sehingga kita tidak dapat menulis ulang langkah sebelumnya. Jadi saya harus melihat seperti apa enkapsulasi jQuery terbaru. Jadi saya membuka 2.1.1 dan menemukan bahwa kecuali untuk menambahkan banyak fungsi, ide -ide saya pada dasarnya tidak berubah.
Salinan kode adalah sebagai berikut:
(fungsi (global, pabrik) {
if (typeof module === "objek" && typeof module.exports === "objek") {
Module.Exports = Global.Document?
Pabrik (Global, Benar):
function (w) {
if (! W.Document) {
Lempar kesalahan baru ("JQuery membutuhkan jendela dengan dokumen");
}
Return Factory (W);
};
} kalau tidak {
pabrik (global);
}
} (typeof window! == "tidak terdefinisi"? window: this, function (window, noglobal) {
var jQuery = function () {
console.log ('jQuery');
};
if (typeof define === "function" && define.amd) {
define ("jQuery", [], function () {
mengembalikan jQuery;
});
};
strundefined = tipe dari tidak terdefinisi;
if (typeof noglobal === strundefined) {
window.jQuery = window. $ = jQuery;
};
mengembalikan jQuery;
}));
Saat menggunakan browser
Salinan kode adalah sebagai berikut:
typeof module = "tidak terdefinisi"
Jadi situasi di atas dinilai saat menggunakan node.js, dll., Yang juga menunjukkan bahwa jQuery menjadi kembung.
Paket Backbone
Buka tulang punggung dan periksa
Salinan kode adalah sebagai berikut:
(function (root, factory) {
if (typeOf define === 'function' && define.amd) {
Tentukan (['underscore', 'jQuery', 'Exports'], function (_, $, Exports) {
root.backbone = pabrik (root, ekspor, _, $);
});
} lain jika (typeof ekspor! == 'tidak terdefinisi') {
var _ = membutuhkan ('underscore');
pabrik (root, ekspor, _);
} kalau tidak {
root.backbone = factory (root, {}, root._, (root.jQuery || root.zepto || root.ender || root. $));
}
} (this, function (root, backbone, _, $) {
Backbone. $ = $;
Return Backbone;
}));
Selain dukungan asinkron, ia juga mencerminkan ketergantungannya pada jQuery dan garis bawah.
Salinan kode adalah sebagai berikut:
Tentukan (['underscore', 'jQuery', 'Exports'], function (_, $, Exports) {
root.backbone = pabrik (root, ekspor, _, $);
});
Ini menunjukkan bahwa tulang punggung didukung secara asli oleh kebutuhan.
Paket Garis Besar
Jadi, saya melihat garis bawah lagi dan menemukan bahwa perpustakaan ini menempati simbol lain
Salinan kode adalah sebagai berikut:
(fungsi() {
var root = ini;
var _ = fungsi (obj) {
if (obj instance dari _) mengembalikan obj;
if (! (Contoh ini _)) mengembalikan _ baru (obj);
this._wrapped = obj;
};
if (typeof ekspor! == 'tidak terdefinisi') {
if (typeof module! == 'tidak terdefinisi' && module.exports) {
Ekspor = Module.Exports = _;
}
Exports._ = _;
} kalau tidak {
root._ = _;
}
if (typeOf define === 'function' && define.amd) {
define ('underscore', [], function () {
kembali _;
});
}
} .call (ini));
Secara keseluruhan, mereka hampir merupakan fungsi anonim, kecuali bahwa metode panggilan () digunakan pada akhirnya.