Rumah > hujung hadapan web > tutorial js > Pemahaman mendalam tentang siri JavaScript (25): Penjelasan terperinci tentang corak tunggal corak reka bentuk_Pengetahuan asas

Pemahaman mendalam tentang siri JavaScript (25): Penjelasan terperinci tentang corak tunggal corak reka bentuk_Pengetahuan asas

WBOY
Lepaskan: 2016-05-16 16:11:30
asal
933 orang telah melayarinya

Pengenalan

Bermula dari bab ini, kami akan memperkenalkan secara beransur-ansur pelaksanaan pelbagai corak reka bentuk yang digunakan dalam JavaScript Di sini saya tidak akan memperkenalkan terlalu banyak tentang teori corak itu sendiri, tetapi hanya akan menumpukan pada pelaksanaan. OK, ia telah dimulakan secara rasmi.

Di mata jurutera pembangunan tradisional, satu-satu adalah untuk memastikan bahawa kelas hanya mempunyai satu contoh , cipta dan kembalikan Ini memastikan kelas A hanya mempunyai satu objek contoh. Dalam JavaScript, singleton bertindak sebagai penyedia ruang nama, menyediakan titik akses unik kepada objek daripada ruang nama global.

Teks

Dalam JavaScript, terdapat banyak cara untuk melaksanakan singleton Salah satu cara paling mudah ialah menggunakan literal objek, yang boleh mengandungi sejumlah besar sifat dan kaedah:

Salin kod Kod adalah seperti berikut:

var mySingleton = {
Harta1: "sesuatu",
Harta2: "sesuatu yang lain",
Kaedah1: fungsi () {
console.log('hello world');
}
};

Jika anda kemudian memanjangkan objek ini, anda boleh menambah ahli dan kaedah peribadi anda sendiri, dan kemudian menggunakan penutupan untuk merangkum pembolehubah dan pengisytiharan fungsi ini di dalamnya. Dedahkan hanya ahli awam dan kaedah yang anda ingin dedahkan Kod sampel adalah seperti berikut:
Salin kod Kod adalah seperti berikut:

var mySingleton = fungsi () {

/* Isytiharkan pembolehubah dan kaedah persendirian di sini */
var privateVariable = 'sesuatu yang peribadi';
Function showPrivate() {
console.log(privateVariable);
}

/* Pembolehubah dan kaedah awam (pembolehubah dan kaedah peribadi boleh diakses) */
Kembali {
         publicMethod: function () {
              showPrivate();
},
publicVar: 'orang ramai boleh melihat ini!'
};
};

var tunggal = mySingleton();
single.publicMethod(); // Output 'sesuatu yang peribadi'
console.log(single.publicVar); // Output 'orang ramai boleh melihat ini!'

Kod di atas sangat bagus, tetapi bagaimana jika kita mahu memulakannya hanya apabila ia digunakan? Untuk menjimatkan sumber, kita boleh memulakan kod ini dalam pembina lain, seperti berikut:

Salin kod Kod adalah seperti berikut:

var Singleton = (fungsi () {
var instantiated;
Fungsi init() {
/*Tentukan kod tunggal di sini*/
         kembali {
              publicMethod: function () {
console.log('hello world');
            },
             publicProperty: 'test'
        };
}

kembali {
         getInstance: function () {
                 jika (!instantiated) {
                         instantiated = init();
            }
             pulangan dibuat seketika;
}
};
})();

/*Panggil kaedah awam untuk mendapatkan contoh:*/
Singleton.getInstance().publicMethod();

Kami kini tahu cara melaksanakan singleton, tetapi dalam senario apakah singleton terbaik digunakan? Sebenarnya, singleton biasanya digunakan untuk menyelaraskan pelbagai mod komunikasi antara sistem Kod berikut adalah amalan terbaik untuk singleton:

Salin kod Kod adalah seperti berikut:

var SingletonTester = (fungsi () {

//Parameter: satu set parameter yang dihantar ke singleton
Fungsi Singleton(args) {

//Tetapkan pembolehubah args kepada parameter yang diterima atau kosongkan (jika tidak disediakan)
var args = args || {};
//Tetapkan parameter nama
This.name = 'SingletonTester';
//Tetapkan nilai pointX
This.pointX = args.pointX || 6; //Dapatkan daripada parameter yang diterima, atau tetapkan kepada nilai lalai
//Tetapkan nilai pointY
This.pointY = args.pointY || 10;

}

//Bekas contoh
contoh var;

var _statik = {
nama: 'SingletonTester',

//Kaedah untuk mendapatkan contoh
//Kembalikan instance Singleton
         getInstance: function (args) {
Jika (contoh === tidak ditentukan) {
                    contoh = Singleton(args) baharu;
            }
             contoh pulangan;
}
};
Kembalikan _statik;
})();

var singletonTest = SingletonTester.getInstance({ pointX: 5 });
console.log(singletonTest.pointX); // Output 5

Kaedah pelaksanaan lain

Kaedah 1:

Salin kod Kod adalah seperti berikut:

fungsi Universe() {

// Tentukan sama ada tika wujud
Jika (jenis Universe.instance === 'objek') {
         kembalikan Universe.instance;
}

// Kandungan lain
This.start_time = 0;
This.bang = "Besar";

// Cache
Universe.instance = ini;

// Mengembalikan ini secara tersirat
}

//Ujian
var uni = new Universe();
var uni2 = Universe baharu();
console.log(uni === uni2); // true

Kaedah 2:

Salin kod Kod adalah seperti berikut:

fungsi Universe() {

// contoh cache
var instance = ini;

// Kandungan lain
This.start_time = 0;
This.bang = "Besar";

// Gantikan pembina
Alam Semesta = fungsi () {
         contoh pulangan;
};
}

//Ujian
var uni = new Universe();
var uni2 = Universe baharu();
uni.bang = "123";
console.log(uni === uni2); // true
console.log(uni2.bang); // 123

Kaedah 3:

Salin kod Kod adalah seperti berikut:

fungsi Universe() {

// Contoh cache
contoh var;

// Fungsi pembina semula
Universe = fungsi Universe() {
         contoh pulangan;
};

// Sifat prototaip pasca pemprosesan
Universe.prototype = ini;

// Contoh
Instance = new Universe();

// Tetapkan semula penunjuk pembina
Instance.constructor = Alam Semesta;

// Fungsi lain
Instance.start_time = 0;
Instance.bang = "Besar";

kembali contoh;
}


// Ujian
var uni = new Universe();
var uni2 = Universe baharu();
console.log(uni === uni2); // true

//Tambah atribut prototaip
Universe.prototype.nothing = benar;

var uni = new Universe();

Universe.prototype.everything = benar;

var uni2 = new Universe();

console.log(uni.nothing); // benar
console.log(uni2.nothing); // benar
console.log(uni.everything); // benar
console.log(uni2.everything); // benar
console.log(uni.constructor === Universe); // true

Kaedah 4:

Salin kod Kod adalah seperti berikut:

var Universe;

(fungsi () {

var contoh;

Alam Semesta = fungsi Alam Semesta() {

jika (contoh) {
             contoh pulangan;
}

contoh = ini;

// Kandungan lain
This.start_time = 0;
This.bang = "Besar";
};
} ());

//Kod ujian
var a = new Universe();
var b = Alam Semesta baharu();
makluman(a === b); // benar
a.bang = "123";
makluman(b.bang); // 123

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan