1. Namespace :
Namespace di JS diperluas menggunakan sifat objek. Misalnya, pengguna mendefinisikan objek A, dengan atribut B dan atribut C di bawah objek A, dan atribut B dan atribut C adalah objek. Oleh karena itu, a = {b: {}, c: {}}, maka pengguna dapat menentukan metode dan atribut yang sama dalam objek B dan objek C. Oleh karena itu, B dan C milik ruang nama yang berbeda. Ketika kita memanggil metode dalam objek B dan C, kita dapat memanggilnya melalui abloike () dan ac like (). Tentu saja A adalah properti di objek jendela.
Tetapi ada situasi, misalnya: halaman boke.js memperkenalkan jQuery.js dan prototipe.js (mereka akan menambahkan $ atribut ke objek jendela), dan konflik terjadi.
Oleh karena itu, ada noconflict () di jQuery.js untuk menangani konflik. Proses eksekusi: Halaman pertama kali memperkenalkan prototipe. Pada saat ini, prototipe akan menempati atribut $ jendela. Kemudian ketika jQuery diperkenalkan, JQuery akan menyimpan atribut $ dari jendela sebelumnya di _ $, dan kemudian menggunakan atribut $ dengan sendirinya. Saat ini, Anda dapat memanggil metode jQuery melalui $. Ketika Anda tidak perlu menggunakan jQuery tetapi ingin menggunakan prototipe, Anda dapat menghubungi $ .noconflict (), dan kemudian $ akan dikembalikan ke objek prototipe. Saat ini, Anda dapat menggunakan metode prototipe melalui $.
Salinan kode adalah sebagai berikut:
var _ $ = window. $, _jQuery = window.jQuery;
noconflict: function (deep) {
jendela. $ = _ $;
if (Deep) window.jQuery = _jQuery;
mengembalikan jQuery; // Nilai pengembalian, Anda dapat memberikan nilai ke nama variabel lainnya, seperti Chaojidan, sehingga Anda dapat memanggil metode di jQuery melalui Chaojidan.
}
2. Ekstensi Objek :
Jika objek namespace memiliki, kita perlu memperluas fungsi. Misalnya: Saya perlu menyalin semua properti dan metode objek A ke objek B. Saya tidak perlu menulis kode satu per satu di obyek.
Salinan kode adalah sebagai berikut:
Fungsi campuran (target, sumber) {
var args = [] .slice.call (argumen), i = 1,
iscover = typeof args [args.length-1] == "boolean"? args.pop (): true; // Tidak ditulis, default benar, default ditimpa.
if (args.length == 1) {
target =! this.window? ini:{};
// Jika hanya ada satu parameter objek, rentangkan objek ini. Sebagai contoh: Saya memanggil campuran (b) dalam konteks objek A, maka ini adalah A saat ini, sehingga properti dan metode B akan ditambahkan ke objek A. Namun, jika campuran (b) dipanggil di jendela, properti dan metode dalam objek B akan ditambahkan ke objek kosong dan mengembalikan objek kosong ini untuk mencegah properti dan metode yang sama dengan nama yang sama di objek jendela. (Hanya objek jendela yang memiliki properti jendela)
i = 0;
}
while ((source = args [i ++])) {
untuk (kunci dalam sumber) {
if (isCover ||! (Kunci di target)) // Jika ditimpa, langsung tetapkan nilainya. Jika tidak ditimpa, pertama -tama tentukan apakah kunci ada di objek target. Jika ada, tidak ada nilai yang akan ditetapkan.
{
target [key] = sumber [key];
}
}
}
target pengembalian;
}
Pewawancara dari perusahaan besar suka memeriksa array. Anda dapat memeriksanya. Setiap item dalam array dapat menjadi objek, dan bahkan jika objek A dan objek B memiliki sifat dan metode yang sama, mereka tidak sama. String dan angka, seperti 123 dan "123", dapat ditemukan secara lengkap dengan mencari online.
3.rayisasi :
Ada banyak objek array kelas di browser, argumen, document.forms, document.links, form.elements, document.getElementsbytagname, childnodes, dll. (HTMLCollection, nodeList).
Ada juga objek khusus dengan gaya penulisan khusus
Salinan kode adalah sebagai berikut:
var array like = {
0: "A",
1: "B",
Panjang: 2
}
Objek ini ditulis sebagai objek jQuery.
Kita perlu mengubah objek array kelas yang disebutkan di atas menjadi objek array.
[] .slice.call Metode dapat diselesaikan. Namun, htmlcollection dan nodelist dalam versi lama IE bukan subclass objek, dan metode [] .slice.call tidak dapat digunakan.
Oleh karena itu kita dapat mengganti metode irisan.
Salinan kode adalah sebagai berikut:
A.slice = window.dispatchevent? function (node, start, end) {return [] .slice.call (node, start, end); }
// Jika jendela memiliki properti SRIPATCHEVENT, itu membuktikan bahwa itu mendukung metode [] .slice.call dan deteksi kemampuan.
: function (node, start, end) {
var ret = [], n = node.length;
if (end == tidak terdefinisi || typeof end === "nomor" && isfinite (end)) {// && prioritas lebih tinggi dari ||, jadi end tidak ditulis, atau end adalah angka yang terbatas dan masukkan
start = parseInt (start, 10) || 0; // Jika mulai tidak ada atau bukan angka, maka nilainya ditetapkan ke 0.
end = end == tidak terdefinisi? n: parseint (end, 10); // Jika akhir tidak ada, nilainya adalah n.
if (mulai <0) mulai + = n;
if (end <0) end + = n;
if (end> n) end = n;
untuk (var i = start; i <end; i ++) {
ret [i-start] = node [i]; // Versi Rendah IE Menggunakan Formulir Penugasan Array
}
}
kembali kembali;
}
4. Ketik penilaian :
Ada lima tipe data sederhana dari JS: null, tidak terdefinisi, boolean, angka, string.
Ada juga tipe data yang kompleks: objek, fungsi, regexp, tanggal, objek khusus, seperti: orang, dll.
Tipeof umumnya digunakan untuk menilai boolean, angka, string, instance dari umumnya digunakan untuk menilai jenis objek. Tetapi mereka semua memiliki kekurangan. Sebagai contoh: instance array dalam fireme bukanlah instance array di jendela induk, instance panggilan akan mengembalikan false. (Pertanyaan ini diajukan selama perekrutan kampus 360). Tipeof boolean baru (true) // "objek", bungkus objek. Boolean, angka, dan string adalah tiga jenis objek pengemasan, yang dibahas dalam pemrograman program lanjutan JS.
Banyak orang menggunakan Dokumen TypeOf. Semua untuk menentukan apakah itu IE. Bahkan, ini sangat berbahaya. Karena Google dan Firefox juga menyukai properti ini, situasi ini terjadi di bawah Google Chrome: TypeOf Document.all // tidak terdefinisi namun, document.all // htmlallcollection, menggunakan TypeOf untuk menentukannya tidak terdefinisi, tetapi nilai properti ini dapat dibaca.
Tetapi sekarang Anda dapat menggunakan metode object.prototype.toString.call untuk menentukan jenisnya. Metode ini dapat secara langsung menghasilkan [[kelas]] di dalam objek. Namun, IE8 dan di bawah objek jendela tidak dapat menggunakan metode ini. Anda dapat menggunakan Window == Dokumen // Dokumen True == Window // FALSE IE6,7,8.
nodetype (1: elemen 2: atribut 3: teks teks 9: dokumen)
Metode untuk menilai jenis di jQuery:
Salinan kode adalah sebagai berikut:
class2Type = {}
jQuery.each ("Boolean Number String Function Array Tanggal Regexp Object" .split (""), function (i, name) {
class2Type ["[objek" + name + "]"] = name.tolowercase ();
// class2type = {"[objek boolean]": boolean, "[nomor objek]": angka, "[string objek]": string, "[fungsi objek]": fungsi, "[array objek]": array ......}
});
jQuery.type = function (obj) {// Jika obj adalah nol, tidak terdefinisi, dll., String "null", "tidak terdefinisi". Jika tidak, hubungi metode ToString, menilai apakah itu dapat dipanggil, dan jika mungkin, kembalikan objek (jendela, DOM dan objek ActiveXObject lainnya dalam versi yang lebih rendah dari IE)
Kembalikan obj == NULL? String (OBJ): class2Type [tostring.call (obj)] || "obyek";
}
5.Domready
Saat mengoperasikan Node Dom oleh JS, halaman harus membangun pohon DOM. Oleh karena itu, metode Window.onload biasanya digunakan. Namun, metode Onload tidak akan dieksekusi setelah semua sumber daya dimuat. Untuk membuat halaman merespons operasi pengguna lebih cepat, kita hanya perlu menggunakan operasi JS setelah pohon DOM dibangun. Alih -alih menunggu semua sumber daya dimuat (gambar, flash).
Oleh karena itu, peristiwa DOMContentloaded terjadi, yang dipicu setelah pohon DOM dibangun. Namun, versi lama IE tidak mendukungnya, jadi ada peretasan.
Salinan kode adalah sebagai berikut:
if (document.readystate === "complete") {// Jika file JS dimuat hanya setelah dokumen DOM dimuat. Pada saat ini, metode FN (metode yang ingin Anda jalankan) dieksekusi melalui penilaian ini. Karena setelah dokumen dimuat, nilai dokumen.
setTimeout (fn); // Jalankan secara tidak sinkron, biarkan kode di belakangnya dieksekusi terlebih dahulu. Ini adalah penggunaan di jQuery, Anda tidak perlu memahaminya.
}
lain if (document.addeventlistener) {// mendukung acara domcontentloaded
document.addeventlistener ("domContentloaded", fn, false); // Bubbles
window.addeventlistener ("muat", fn, false); // Jika file JS dimuat setelah pohon DOM dibangun. Kali ini, acara DOMContentLoaded tidak akan dipicu (pemicu telah selesai), itu hanya akan memicu acara beban
}
kalau tidak{
document.attachevent ("onreadystatechange", function () {// Untuk keamanan iframes di bawah IE, eksekusi onload akan diberikan prioritas, dan kadang -kadang tidak.
if (document.readystate === "complete") {
fn ();
}
});
window.attachevent ("onload", fn); // Ini akan selalu berperan jika peristiwa mendengarkan lainnya tidak diambil, jadi setidaknya metode FN dapat dipicu oleh acara Onload.
var top = false; // lihat apakah ada di iframe
Coba {// window.frameElement adalah objek iframe atau bingkai yang berisi halaman ini. Jika tidak, itu nol.
top = window.frameElement == null && document.documentElement;
} catch (e) {}
if (top && top.doscroll) {// jika tidak ada iframe, dan itu yaitu
(function doscrollcheck () {
mencoba{
top.doscroll ("kiri"); // di IE, jika pohon DOM dibangun, Anda dapat memanggil metode doscroll HTML
} catch (e) {
kembalikan setTimeout (DosCrollCheck, 50); // Jika belum dibangun, terus dengarkan
}
fn ();
})
}
}
Metode FN harus berisi menghilangkan semua acara yang mengikat.
Tentu saja, IE juga dapat menggunakan Skrip Degrer Hack. Prinsipnya adalah: skrip yang ditentukan oleh penundaan akan dieksekusi hanya setelah pohon DOM dibangun. Namun, ini membutuhkan penambahan file JS tambahan dan jarang digunakan di perpustakaan yang terpisah.
Prinsip Penggunaan: Tambahkan tag skrip ke dokumen dan gunakan skrip.src = "xxx.js" untuk mendengarkan acara OnReadyStateChange Script. Saat ini.
Dengan kata lain, hanya setelah DOM dibangun akan xxx.js dieksekusi, dan this.readystate akan menjadi lengkap.
Di atas adalah catatan bacaan untuk bab pertama dari desain kerangka kerja JavaScript. Kontennya relatif sederhana, yang memudahkan semua orang untuk lebih memahami konten dasar bab ini.