memperkenalkan
Artikel ini terutama memperkenalkan artikel berikutnya dari pola pembuatan objek. Menggunakan berbagai teknik dapat sangat menghindari kesalahan atau menulis kode yang sangat ramping.
Pola 6: Fungsi gula sintaksis
Fungsi Sintaks Sugar adalah ekstensi untuk menambahkan metode (fungsi) dengan cepat ke suatu objek. Ini terutama menggunakan karakteristik prototipe. Kode ini relatif sederhana. Pertama -tama mari kita lihat kode implementasi:
Salinan kode adalah sebagai berikut:
if (typeof function.prototype.method! == "function") {
Function.prototype.method = function (name, implementasi) {
this.prototype [name] = implementasi;
kembalikan ini;
};
}
Saat memperluas objek, Anda dapat menggunakannya seperti ini:
Salinan kode adalah sebagai berikut:
var person = function (name) {
this.name = name;
}
.method ('getName',
fungsi () {
kembalikan nama ini;
})
.method ('setName', function (name) {
this.name = name;
kembalikan ini;
});
Dengan cara ini, kami menambahkan dua metode: getName dan setName ke fungsi orang. Selanjutnya, mari kita verifikasi hasilnya:
Salinan kode adalah sebagai berikut:
var a = orang baru ('Adam');
console.log (a.getName ()); // 'Adam'
console.log (a.setname ('eve'). getName ()); // 'Malam'
Pola 7: Konstanta Objek
Konstanta objek adalah perwujudan dari berbagai metode yang disediakan dengan set, dapatkan, ditentukan dalam suatu objek. Selain itu, metode yang ditetapkan hanya akan mempertahankan set objek pertama, dan pengaturan selanjutnya akan tidak valid, yang telah mencapai tujuan orang lain tidak dapat kelebihan beban. Kode implementasi adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
var constant = (function () {
var constants = {},
ownProp = object.prototype.hasownproperty,
// Hanya ketiga jenis nilai ini yang diizinkan
diizinkan = {
String: 1,
Nomor: 1,
Boolean: 1
},
awalan = (math.random () + "_"). Slice (2);
kembali {
// Atur properti dengan nama nama
set: function (name, value) {
if (this.isdefined (name)) {
mengembalikan false;
}
if (! OwnProp.call (diizinkan, TypeOf nilai)) {
mengembalikan false;
}
konstanta [awalan + nama] = nilai;
Kembali Benar;
},
// Tentukan apakah ada nama bernama properti
isDefined: function (name) {
return ownprop.call (konstanta, awalan + nama);
},
// Dapatkan atribut bernama nama
get: function (name) {
if (this.isdefined (name)) {
Return Constants [awalan + nama];
}
kembali nol;
}
};
} ());
Kode verifikasi adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
// periksa apakah itu ada
console.log (constant.isdefined ("maxwidth")); // PALSU
// definisi
console.log (constant.set ("maxwidth", 480)); // BENAR
// menguji ulang
console.log (constant.isdefined ("maxwidth")); // BENAR
// Cobalah untuk mendefinisikan kembali
console.log (constant.set ("maxwidth", 320)); // PALSU
// Tentukan apakah definisi asli masih ada
console.log (constant.get ("maxwidth")); // 480
Mode 8: Mode Sandbox
Mode Sandbox menyediakan konteks terpisah untuk satu atau lebih modul tanpa mempengaruhi konteks modul lain. Misalnya, ada kotak pasir dengan tiga metode Metode, DOM, dan AJAX. Jika dua dari mereka dipanggil untuk membentuk lingkungan, tidak ada gangguan dengan tiga lingkungan. Kode implementasi kotak pasir adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
fungsi sandbox () {
// Konversi parameter menjadi array
var args = array.prototype.slice.call (argumen),
// parameter terakhir adalah panggilan balik
callback = args.pop (),
// Kecuali untuk parameter terakhir, semua modul lain yang akan dipilih
modul = (args [0] && typeof args [0] === "string")? args: args [0],
Saya;
// paksa operator baru
if (! (Instance dari kotak pasir ini)) {
mengembalikan kotak pasir baru (modul, panggilan balik);
}
// Tambahkan properti
this.a = 1;
this.b = 2;
// Tambahkan modul ke objek ini
// Jika tidak ada modul atau parameter yang dilewatkan adalah "*", maka semua modul dilewatkan
if (! Modul || modul == '*') {
modul = [];
untuk (i in sandbox.modules) {
if (sandbox.modules.hasownproperty (i)) {
modules.push (i);
}
}
}
// inisialisasi modul yang diperlukan
untuk (i = 0; i <modules.length; i += 1) {
Sandbox.modules [modul [i]] (ini);
}
// Panggil panggilan balik
callback (ini);
}
// Tambahkan objek prototipe secara default
Sandbox.prototype = {
Nama: "Aplikasi saya",
Versi: "1.0",
getName: function () {
kembalikan nama ini;
}
};
Kemudian kami mendefinisikan modul awal default:
Salinan kode adalah sebagai berikut:
Sandbox.modules = {};
Sandbox.modules.dom = function (box) {
box.getElement = function () {
};
box.getstyle = function () {
};
box.foo = "bar";
};
Sandbox.modules.event = function (box) {
// akses ke prototipe kotak pasir jika diperlukan:
// box.constructor.prototype.m = "mmmm";
box.attachevent = function () {
};
box.detachevent = function () {
};
};
Sandbox.modules.ajax = function (box) {
box.makeRequest = function () {
};
box.getResponse = function () {
};
};
Metode panggilan adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
// Metode panggilan
Sandbox (['Ajax', 'Event'], Function (box) {
console.log (typeof (box.foo));
// tidak ada pilihan dom, jadi box.foo tidak ada
});
Sandbox ('Ajax', 'Dom', Function (Box) {
console.log (typeof (box.attachevent));
// Tidak ada peristiwa yang dipilih, sehingga lampiran yang ditentukan dalam acara tersebut juga tidak ada
});
Sandbox ('*', function (box) {
console.log (kotak); // Semua metode yang didefinisikan di atas dapat diakses
});
Melalui tiga metode panggilan yang berbeda, kita dapat melihat bahwa konteks tiga metode berbeda. Yang pertama tidak memiliki foo; Yang kedua tidak memiliki lampiran, karena hanya Ajax dan Dom yang dimuat, tetapi peristiwa tidak dimuat; Yang ketiga tidak memuat semuanya.
Pola 9: Anggota Statis
Anggota statis hanyalah properti statis yang disediakan oleh suatu fungsi atau objek, yang dapat dibagi menjadi pribadi dan publik, seperti statis statis dan pribadi publik di C# atau Java.
Pertama -tama mari kita lihat anggota publik. Anggota publik sangat sederhana. Metode dan fungsi yang kami nyatakan biasanya bersifat publik, seperti:
Salinan kode adalah sebagai berikut:
// konstruktor
var gadget = function () {
};
// Metode statis publik
Gadget.isshiny = function () {
Kembalikan "Anda bertaruh";
};
// Metode normal untuk ditambahkan pada prototipe
Gadget.prototype.setPrice = function (harga) {
this.price = harga;
};
// Panggil metode statis
console.log (gadget.isshiny ()); // "kamu bertaruh"
// Buat instance dan panggil metode
var iPhone = gadget baru ();
iPhone.setPrice (500);
console.log (typeof gadget.setPrice); // "belum diartikan"
console.log (tipe iPhone.isshiny); // "belum diartikan"
Gadget.prototype.isshiny = gadget.isshiny;
console.log (iPhone.isshiny ()); // "kamu bertaruh"
Sedangkan untuk anggota statis pribadi, kami dapat menggunakan fitur penutupan mereka untuk mengimplementasikannya. Berikut ini adalah dua metode implementasi.
Metode implementasi pertama:
Salinan kode adalah sebagai berikut:
var gadget = (function () {
// Variabel/properti statis
var counter = 0;
// Penutupan Mengembalikan implementasi baru konstruktor
return function () {
console.log (penghitung += 1);
};
} ()); // Jalankan segera
var g1 = gadget baru (); // log 1
var g2 = gadget baru (); // log 2
var g3 = gadget baru (); // log 3
Dapat dilihat bahwa meskipun itu adalah objek baru setiap saat, jumlahnya masih bertambah, mencapai tujuan anggota statis.
Metode kedua:
Salinan kode adalah sebagai berikut:
var gadget = (function () {
// Variabel/properti statis
var counter = 0,
Newgadget;
// Implementasi Konstruktor Baru
NewGadget = function () {
penghitung += 1;
};
// otorisasi akses ke metode
Newgadget.prototype.getLastId = function () {
counter kembali;
};
// Timpa konstruktor
mengembalikan Newgadget;
} ()); // Jalankan segera
var iPhone = gadget baru ();
iPhone.getLastId (); // 1
var ipod = gadget baru ();
ipod.getLastId (); // 2
var ipad = gadget baru ();
ipad.getLastId (); // 3
Jumlahnya juga bertambah, yang dicapai dengan menggunakan fitur penutupan metode otorisasi internal.
Meringkaskan
Ini adalah artikel berikutnya dari mode pembuatan objek. Dua artikel bersama -sama memiliki 9 pola. Mereka adalah mode pembuatan objek yang sering kita gunakan dalam pemrograman JavaScript harian. Skenario yang berbeda memainkan peran yang berbeda. Saya harap semua orang akan memilih mode yang berlaku sesuai dengan kebutuhan masing -masing.