memperkenalkan
Beberapa mode yang kami perkenalkan dalam artikel ini disebut mode inisialisasi dan mode kinerja, yang terutama digunakan untuk inisialisasi dan peningkatan kinerja. Beberapa mode telah disebutkan sebelumnya, jadi di sini hanya ringkasan.
Fungsi yang segera dieksekusi
Dalam bab ke -4 dari seri ini, "Ekspresi Fungsi Disebut Sekarang", kami telah menggambarkan fungsi yang sama secara rinci. Di sini kami hanya akan memberikan dua contoh sederhana untuk diringkas.
Salinan kode adalah sebagai berikut:
// Setelah mendeklarasikan fungsi, segera jalankan fungsi
(fungsi () {
Console.log ('Watch Out!');
} ());
// fungsi yang dinyatakan dengan cara ini juga dapat dieksekusi segera
!fungsi () {
Console.log ('Watch Out!');
} ();
// Metode berikut juga ok
~ function () { / * code * /} ();
-function () { / * code * /} ();
+function () { / * code * /} ();
Segera mengeksekusi inisialisasi objek
Pola ini berarti bahwa ketika suatu objek dinyatakan (bukan fungsi), salah satu metode dalam objek akan segera dieksekusi untuk melakukan pekerjaan inisialisasi. Biasanya, pola ini dapat digunakan dalam kode yang dieksekusi sekaligus.
Salinan kode adalah sebagai berikut:
({
// Di sini Anda dapat mendefinisikan konstanta dan menetapkan nilai lainnya
Maxwidth: 600,
Maxheight: 400,
// Tentu saja, Anda juga dapat mendefinisikan metode utilitas
gimmemax: function () {
kembalikan this.maxwidth + "x" + this.maxheight;
},
// Inisialisasi
init: function () {
console.log (this.gimmemax ());
// lebih banyak kode ...
}
}). init (); // ini memulai inisialisasi
Inisialisasi Cabang
Inisialisasi cabang mengacu pada inisialisasi kode yang berbeda sesuai dengan kondisi yang berbeda (skenario), yang merupakan penugasan pernyataan bersyarat. Sebelumnya, ketika kami melakukan pemrosesan acara, kami biasanya menggunakan kode seperti berikut:
Salinan kode adalah sebagai berikut:
var utils = {
addListener: function (el, type, fn) {
if (typeof window.addeventListener === 'function') {
el.addeventlistener (tipe, fn, false);
} lain jika (typeof document.attachevent! == 'tidak terdefinisi') {
el.attachevent ('on' + type, fn);
} kalau tidak {
el ['on' + type] = fn;
}
},
Removelistener: function (el, type, fn) {
}
};
Mari kita tingkatkan. Pertama, kita perlu mendefinisikan dua antarmuka, satu untuk pegangan acara tambahan dan yang lainnya untuk menghapus pegangan acara. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var utils = {
addlistener: null,
Removelistener: Null
};
Kode implementasi adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
if (typeof window.addeventListener === 'function') {
utils.addlistener = function (el, type, fn) {
el.addeventlistener (tipe, fn, false);
};
} lain jika (typeof document.attachevent! == 'tidak terdefinisi') {// yaitu
utils.addlistener = function (el, type, fn) {
el.attachevent ('on' + type, fn);
};
utils.removeListener = function (el, type, fn) {
el.detachevent ('on' + type, fn);
};
} else {// browser lama lainnya
utils.addlistener = function (el, type, fn) {
el ['on' + type] = fn;
};
utils.removeListener = function (el, type, fn) {
el ['on' + type] = null;
};
}
Bukankah sangat nyaman untuk digunakan? Kode ini jauh lebih elegan.
Fungsi deklaring diri
Secara umum, kode fungsi dengan nama yang sama ditulis ulang di dalam fungsi, seperti:
Salinan kode adalah sebagai berikut:
var scareme = function () {
waspada ("boo!");
scarme = function () {
peringatan ("Double Boo!");
};
};
Kode semacam ini sangat membingungkan. Pertama -tama mari kita lihat hasil eksekusi dari contoh:
Salinan kode adalah sebagai berikut:
// 1. Tambahkan atribut baru
Scarme.property = "benar";
// 2. Scareme memberikan nilai baru
var prank = scarme;
// 3. Panggilan sebagai metode
var spooky = {
Boo: Scarme
};
// panggil dengan nama variabel baru
prank (); // "Huuu!"
prank (); // "Huuu!"
Console.log (Prank.Property); // "dengan baik"
// panggil menggunakan metode ini
spooky.boo (); // "Huuu!"
spooky.boo (); // "Huuu!"
console.log (spooky.boo.property); // "dengan baik"
Melalui hasil eksekusi, dapat ditemukan bahwa menetapkan fungsi ke variabel baru (atau metode internal), kode tidak menjalankan kode Scarme yang kelebihan beban, dan contoh berikut ini sebaliknya:
Salinan kode adalah sebagai berikut:
// Gunakan fungsi deklaring diri
Scarme (); // boo ganda!
Scarme (); // boo ganda!
console.log (Scareme.property); // belum diartikan
Saat menggunakan model ini, Anda harus sangat berhati -hati, jika tidak hasil sebenarnya mungkin berbeda dari hasil yang Anda harapkan. Tentu saja, Anda juga dapat menggunakan khusus ini untuk melakukan beberapa operasi khusus.
Optimasi memori
Pola ini terutama menggunakan karakteristik atribut fungsi untuk menghindari sejumlah besar perhitungan berulang. Formulir kode yang biasa adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var myfunc = function (param) {
if (! myfunc.cache [param]) {
var result = {};
// ... operasi yang kompleks ...
myfunc.cache [param] = hasil;
}
return myfunc.cache [param];
};
// penyimpanan cache
myfunc.cache = {};
Namun, ada masalah dengan kode di atas. Jika parameter yang ditularkan adalah ToString atau beberapa metode umum yang mirip dengan objek, masalahnya akan terjadi. Pada saat ini, Anda perlu menggunakan metode HasownProperty legendaris, kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var myfunc = function (param) {
if (! myfunc.cache.hasownproperty (param)) {
var result = {};
// ... operasi yang kompleks ...
myfunc.cache [param] = hasil;
}
return myfunc.cache [param];
};
// penyimpanan cache
myfunc.cache = {};
Atau jika Anda lulus dalam beberapa parameter, Anda dapat menggunakan metode Stringify JSON untuk menghasilkan nilai cacheKey untuk penyimpanan. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var myfunc = function () {
var cacheKey = json.stringify (array.prototype.slice.call (argumen)),
hasil;
if (! myfunc.cache [CacheKey]) {
hasil = {};
// ... operasi yang kompleks ...
myfunc.cache [CacheKey] = hasil;
}
return myfunc.cache [CacheKey];
};
// penyimpanan cache
myfunc.cache = {};
Atau beberapa parameter, Anda juga dapat menggunakan fitur argumen. Callee:
Salinan kode adalah sebagai berikut:
var myfunc = function (param) {
var f = argumen.callee,
hasil;
if (! f.cache [param]) {
hasil = {};
// ... operasi yang kompleks ...
f.cache [param] = hasil;
}
return f.cache [param];
};
// penyimpanan cache
myfunc.cache = {};
Meringkaskan
Tidak perlu meringkas, lihat saja kode dengan cermat