memperkenalkan
Artikel ini terutama memperkenalkan pola pembuatan objek. Menggunakan berbagai teknik dapat sangat menghindari kesalahan atau menulis kode yang sangat ramping.
Pola 1: Namespace
Namespaces dapat mengurangi jumlah penamaan global yang diperlukan untuk menghindari penamaan konflik atau berlebihan. Secara umum, ketika kita mendefinisikan tingkat objek, sering terlihat seperti ini:
Salinan kode adalah sebagai berikut:
var app = app || {};
app.modulea = app.modulea || {};
app.modulea.submodule = app.modulea.submodule || {};
app.modulea.submodule.methoda = function () {
console.log ("cetak a");
};
app.modulea.submodule.methodb = function () {
console.log ("cetak b");
};
Jika ada banyak level, kita harus terus seperti ini, yang sangat membingungkan. Pola namespace ada untuk menyelesaikan masalah ini. Mari kita lihat kodenya:
Salinan kode adalah sebagai berikut:
// tidak aman, itu mungkin menimpa objek myApp yang ada
var myapp = {};
// Bagus
if (typeof myapp === "tidak terdefinisi") {
var myapp = {};
}
// Cara yang lebih sederhana
var myapp = myapp || {};
// Tentukan metode umum
Myapp.namespace = function (ns_string) {
var bagian = ns_string.split ('.'),
induk = myapp,
Saya;
// Secara default, jika simpul pertama adalah myapp, itu akan diabaikan, seperti myapp.modulea
if (bagian [0] === "myapp") {
bagian = bagian.slice (1);
}
untuk (i = 0; i <parts.length; i += 1) {
// Jika properti tidak ada, buat
if (typeOf induk [bagian [i]] === "tidak terdefinisi") {
induk [bagian [i]] = {};
}
induk = induk [bagian [i]];
}
orang tua yang kembali;
};
Memanggil kode sangat sederhana:
Salinan kode adalah sebagai berikut:
// Setelah namespace, nilai pengembalian dapat ditetapkan ke variabel lokal
var module2 = myapp.namespace ('myapp.modules.module2');
console.log (module2 === myapp.modules.module2); // BENAR
// Lewati MyApp
Myapp.namespace ('Modules.module51');
// Nama yang sangat panjang
MyApp.namespace ('one.upon.a.time.there.was.this.long.nested.property');
Pola 2: mendefinisikan dependensi
Terkadang modul atau fungsi dapat merujuk pada beberapa modul atau alat pihak ketiga. Yang terbaik adalah mendefinisikan modul dependen ini di awal sehingga mereka dapat dengan mudah diganti di masa depan.
Salinan kode adalah sebagai berikut:
var myfunction = function () {
// Bergantung pada modul
var event = yahoo.util.event,
dom = yahoo.util.dom;
// Acara Variabel Lokal dan DOM digunakan dalam kode setelah fungsi lain
};
Pola 3: Properti Pribadi dan Metode Pribadi
JavaScript tidak memberikan sintaks khusus untuk mendukung properti pribadi dan metode pribadi, tetapi kami dapat mengimplementasikannya melalui penutupan, kode tersebut adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
fungsi gadget () {
// objek pribadi
var name = 'iPod';
// Fungsi Publik
this.getName = function () {
nama pengembalian;
};
}
var mainan = gadget baru ();
// Nama tidak ditentukan dan pribadi
console.log (Toy.name); // belum diartikan
// Nama Akses Metode Publik
console.log (toy.getname ()); // "iPod"
var myobj; // Tetapkan nilai ke myOBJ melalui fungsi pengendalian mandiri
(fungsi () {
// Objek GRATIS
var name = "my, oh my";
// Menerapkan bagian publik, jadi tidak ada var
myobj = {
// Metode otorisasi
getName: function () {
nama pengembalian;
}
};
} ());
Mode 4: Mode Wahyu
Ini juga tentang menyembunyikan metode pribadi, yang agak mirip dengan pola modul dalam "pemahaman mendalam tentang seri JavaScript (3): analisis komprehensif pola modul", tetapi ini bukan metode pengembalian, tetapi variabel dinyatakan secara eksternal dan kemudian ditugaskan metode publik ke variabel secara internal. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var myarray;
(fungsi () {
var astr = "[array objek]",
tostring = objek.prototype.toString;
fungsi isArray (a) {
return tostring.call (a) === astr;
}
indeks fungsi (tumpukan jerami, jarum) {
var i = 0,
max = haystack.length;
untuk (; i <max; i += 1) {
if (haystack [i] === jarum) {
Kembalikan i;
}
}
kembali -1;
}
// Melalui penugasan, semua detail di atas disembunyikan
myarray = {
IsArray: IsArray,
Indexof: Indexof,
Inarray: Indexof
};
} ());
// Kode uji
console.log (myarray.isarray ([1, 2])); // BENAR
console.log (myarray.isArray ({0: 1})); // PALSU
console.log (myarray.indexof (["a", "b", "z"], "z")); // 2
console.log (myarray.inarray (["a", "b", "z"], "z")); // 2
myarray.indexof = null;
console.log (myarray.inarray (["a", "b", "z"], "z")); // 2
Mode 5: Mode Rantai
Mode rantai memungkinkan Anda untuk memanggil metode objek secara terus menerus, seperti obj.add (1) .remove (2) .delete (4) .add (2). Gagasan implementasinya sangat sederhana, yaitu untuk mengembalikannya sebagaimana adanya. Kodenya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var obj = {
Nilai: 1,
increment: function () {
this.value += 1;
kembalikan ini;
},
tambahkan: function (v) {
this.value += v;
kembalikan ini;
},
SHOUT: function () {
Console.log (this.value);
}
};
// panggilan metode rantai
obj.increment (). Tambah (3) .shout (); // 5
// juga bisa dipanggil satu per satu
obj.increment ();
obj.add (3);
obj.shout ();
Meringkaskan
Artikel ini adalah artikel sebelumnya dari mode pembuatan objek, jadi tunggu saja artikel berikutnya besok.