hujung hadapan web
tutorial js
javascript 設(shè)計(jì)模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)_js面向?qū)ο?/span>
javascript 設(shè)計(jì)模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)_js面向?qū)ο?/h1>
May 16, 2016 pm 06:29 PM
corak reka bentuk
單體是在腳本加載時(shí)創(chuàng)建的，能將一系列有關(guān)聯(lián)的變量和方法組織為一個(gè)邏輯單元，邏輯單元里面的內(nèi)容通過單一的變量進(jìn)行訪問；
一個(gè)單體主要分為三部分
用于訪問內(nèi)部信息的入口變量（如：Sky）
屬性（如：nickName/age/timeInfo）
方法（如：sayHello）
基本結(jié)構(gòu)
var Sky = {
/*
* 作用一，變量管理
*/
nickName: "sky",
age: "26",
/*
* 作用二，加載中初始化變量
* 在加載過程中執(zhí)行并初始化Sky.info
*/
timeInfo: function()
????{
var _year = new Date().getFullYear();
return _year;
}(),
/*
* 作用三，函數(shù)管理，讓你的函數(shù)看起來不再那么散亂
*/
sayHello: function()
????{
alert("hello,world!");
}
}
//所有內(nèi)部信息通過Sky這個(gè)變量進(jìn)行訪問；
alert(Sky.timeInfo);
以下是更詳細(xì)的說明，看完了這篇文章，相信你應(yīng)該差不多了解了，網(wǎng)上好多高手的js寫法了，單體模式很常用。
單體是一個(gè)用來劃分命名空間并將一批相關(guān)的屬性和方法組織在一起的對(duì)象，如果他可以被實(shí)例化，那么他只能被實(shí)例化一次。
單體模式是javascript里面最基本但也是最有用的模式之一。
特點(diǎn)：
. 可以來劃分命名空間，從而清除全局變量所帶來的危險(xiǎn)。
. 利用分支技術(shù)來來封裝瀏覽器之間的差異。
. 可以把代碼組織的更為一體，便于閱讀和維護(hù)。
單體的基本結(jié)構(gòu)（正確寫法）：
/*Basic Singleton*/
var Singleton = ｛
attribute1：true,
attribute2:10,
method1:function(){},
method2:function(){}
｝;
劃分命名空間：
var box = {
width:0,
height:0,
getArea:function(){
return this.width*this.height;//js中對(duì)象成的訪問必須是顯示的，即this是不能省略的
},
init:function(w,h){
// width = w;
// height = h;這種方式相當(dāng)于定義了兩個(gè)全局變量，（沒加var聲明的變量為全局變量）
// 并不是對(duì)對(duì)象width和height的賦值
//下面是正確的
this.width = w;
this.height = h;
}
}//box劃分了一個(gè)命名空間，命名空間里的變量只在空間里有效
上面的單體中的所有的成員以及方法都是公有的（public），也就是在單體的外部可以對(duì)他們進(jìn)行任意的改動(dòng)，那為什么說單體提供了一個(gè)命名空間呢？
我們繼續(xù)：
var box = {
width:0,
height:0,//單體的變量
getArea:function(){
return width*height;//中的,width，height其實(shí)并不是單體的變量，而是在init中定義的全局變量
}
init:function(w,h){
width = w;
height = h;
}
}//init中width，height其實(shí)并不是單體的變量
window.onload = function(){
var init = box.getArea();
alert(init);
}
由于沒有對(duì)init中的width，height進(jìn)行初始化，所以會(huì)報(bào)錯(cuò)，這樣改一下：
var box = {
width:0,
height:0,
getArea:function(){
return width*height;
},
init:function(w,h){
width = w;
height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
//or box.init(0,0);
var init = box.getArea();
alert(init);
}
發(fā)現(xiàn)可以了，由于init和 getArea所用的width和height并不是歸單體所有的變量，而是一個(gè)全局變量，所以我們可以在單體外面進(jìn)行隨意調(diào)用而不受影響
如果我們這樣寫一下就更明白了：
var box = {
width:0,
height:0,
getArea:function(){
return width*height;//js中對(duì)象成的訪問必須是顯示的，即this是不能省略的
},
init:function(w,h){
width = w;
height = h;
}
}//這里的width，height其實(shí)并不是單體的對(duì)象
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}
這樣寫又會(huì)報(bào)錯(cuò)了，可見我們以上的方式對(duì)于全局變量并沒有建立起一個(gè)命名空間，全局變量為我們帶來了危險(xiǎn)。所以最上面的寫法是對(duì)的，我們來驗(yàn)證一下：
var box = {
width:2,
height:2,
getArea:function(){
return this.width*this.height;//js中對(duì)象成的訪問必須是顯示的，即this是不能省略的
},
init:function(w,h){
this.width = w;
this.height = h;
}
}
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}
可見在window.onload中的width 和height已經(jīng)沒有干擾了，因?yàn)閱误w為單體中的width和height建立了一個(gè)命名空間。
成員的屬性：
討論完命名空間，我們來對(duì)單體變量和方法的屬性做一下設(shè)定。學(xué)過其他語言的人（java，c++，c#...）都應(yīng)該很了解其中類成員的public和private，
雖然在javascript中沒有這么嚴(yán)格的面向?qū)ο?oop)，但是我們可以借助閉包來進(jìn)行一個(gè)模仿，畢竟有的變量設(shè)為public是很不好的。
var circle = (function(){
//pravite member!
var r = 5;
var pi = 3.1416;//后面用分號(hào)
return{//public member
getArea:function(){
return r*r*pi;//訪問私有成員不要加this
},//后面用逗號(hào)
//如果想改變r(jià)和pi的值，只能通過設(shè)置一個(gè)公有的函數(shù)來實(shí)現(xiàn)
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0;//無法訪問私有成員,相當(dāng)于又為circle創(chuàng)建了一個(gè)共有成員r
alert(circle.getArea());
circle.init(0);//通過公有的工具函數(shù)便可以訪問了。
alert(circle.getArea());
};
私有變量、方法是只讀的，公有變量、方法是可讀可寫的
訪問：
對(duì)于私有成員，直接訪問即可，前面不用加任何修飾，
對(duì)于公有的訪問在單體作用域內(nèi)前面要加上“this.”，在單體作用域外前面要加上“circle.”（單體名字.）
呵呵，似乎有點(diǎn)味道了！
.利用分支技術(shù)來來封裝瀏覽器之間的差異
注意的地方：
a一定要用閉包，實(shí)現(xiàn)即時(shí)綁定
b每個(gè)分支之間用分號(hào)隔開
c最后返回的是分支的名字
d調(diào)用的時(shí)候用單體名+分支的方法名；
// 利用單體的分支技術(shù)來定義XHR（XMLHttpRequest）對(duì)象,必須要用閉包才可以實(shí)現(xiàn)
var XHR = (function(){
//The three branches
var standard = {
cXHR:function(){
return new XMLHttpRequest();
}
};
var activeXNew = {
cXHR:function(){
return new ActiveXObject('Msxml2.XMLHttp');
}
};
var activeXOld = {
cXHR:function(){
return new ActiveXObject('Microsoft.XMLHttp');
}
};
//To assign(分配) the branch, try each method;return whatever doesn't fail
var testObject;
try{
testObject = standard.cXHR();
return standard;// return this branch if no error was thrown
}catch(e){
try{
testObject = activeXNew.cXHR();
return activeXNew;
}catch(e){
try{
testObject = activeXOld.cXHR();
return activeXOld;
}catch(e){
throw new Error('Create the XMLHttpRequestObject failed!');
}
}
}
})();
window.onload = function(){
alert(XHR.cXHR());
}
最后再啰嗦幾句：
對(duì)于單體據(jù)說是最常用的模式之一了，至于利弊嘛要在實(shí)踐中慢慢的體會(huì)了，由于本人也是初學(xué)，所以沒有太多的發(fā)言權(quán)，不足指出還忘高手指教
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Perbezaan antara corak reka bentuk dan corak seni bina dalam rangka kerja Java
Jun 02, 2024 pm 12:59 PM
Dalam rangka kerja Java, perbezaan antara corak reka bentuk dan corak seni bina ialah corak reka bentuk mentakrifkan penyelesaian abstrak kepada masalah biasa dalam reka bentuk perisian, memfokuskan pada interaksi antara kelas dan objek, seperti corak kilang. Corak seni bina mentakrifkan hubungan antara struktur sistem dan modul, memfokuskan pada organisasi dan interaksi komponen sistem, seperti seni bina berlapis.
Corak Reka Bentuk PHP: Pembangunan Dipacu Ujian dalam Amalan
Jun 03, 2024 pm 02:14 PM
TDD digunakan untuk menulis kod PHP berkualiti tinggi Langkah-langkahnya termasuk: menulis kes ujian, menerangkan fungsi yang diharapkan dan menjadikannya gagal. Tulis kod supaya hanya kes ujian lulus tanpa pengoptimuman yang berlebihan atau reka bentuk terperinci. Selepas kes ujian lulus, optimumkan dan faktorkan semula kod untuk meningkatkan kebolehbacaan, kebolehselenggaraan dan kebolehskalaan.
Aplikasi corak reka bentuk dalam rangka kerja Guice
Jun 02, 2024 pm 10:49 PM
Rangka kerja Guice menggunakan beberapa corak reka bentuk, termasuk: Corak Singleton: memastikan kelas hanya mempunyai satu tika melalui anotasi @Singleton. Corak kaedah kilang: Cipta kaedah kilang melalui anotasi @Provides dan dapatkan contoh objek semasa suntikan pergantungan. Mod strategi: Bungkus algoritma ke dalam kelas strategi yang berbeza dan nyatakan strategi khusus melalui anotasi @Named.
Bagaimana corak reka bentuk menangani cabaran penyelenggaraan kod
May 09, 2024 pm 12:45 PM
Corak reka bentuk menyelesaikan cabaran penyelenggaraan kod dengan menyediakan penyelesaian yang boleh digunakan semula dan boleh diperluas: Corak Pemerhati: Membenarkan objek melanggan acara dan menerima pemberitahuan apabila ia berlaku. Corak Kilang: Menyediakan cara terpusat untuk mencipta objek tanpa bergantung pada kelas konkrit. Corak Singleton: memastikan bahawa kelas hanya mempunyai satu contoh, yang digunakan untuk mencipta objek yang boleh diakses secara global.
Analisis Corak Penghias dalam Corak Reka Bentuk Java
May 09, 2024 pm 03:12 PM
Corak penghias ialah corak reka bentuk struktur yang membolehkan penambahan dinamik fungsi objek tanpa mengubahsuai kelas asal. Ia dilaksanakan melalui kerjasama komponen abstrak, komponen konkrit, penghias abstrak dan penghias konkrit, dan boleh mengembangkan fungsi kelas secara fleksibel untuk memenuhi keperluan yang berubah-ubah. Dalam contoh ini, penghias susu dan mocha ditambahkan pada Espresso untuk jumlah harga $2.29, menunjukkan kuasa corak penghias dalam mengubah suai gelagat objek secara dinamik.
Penggunaan indah corak penyesuai dalam corak reka bentuk Java
May 09, 2024 pm 12:54 PM
Corak Penyesuai ialah corak reka bentuk struktur yang membolehkan objek yang tidak serasi berfungsi bersama Ia menukar satu antara muka kepada yang lain supaya objek boleh berinteraksi dengan lancar. Penyesuai objek melaksanakan corak penyesuai dengan mencipta objek penyesuai yang mengandungi objek yang disesuaikan dan melaksanakan antara muka sasaran. Dalam kes praktikal, melalui mod penyesuai, pelanggan (seperti MediaPlayer) boleh memainkan media format lanjutan (seperti VLC), walaupun ia sendiri hanya menyokong format media biasa (seperti MP3).
Aplikasi corak reka bentuk dalam rangka kerja Spring MVC
Jun 02, 2024 am 10:35 AM
Rangka kerja SpringMVC menggunakan corak reka bentuk berikut: 1. Mod Singleton: mengurus bekas Spring 2. Mod fasad: koordinat pengawal, paparan dan interaksi model 3. Mod strategi: memilih pengendali permintaan berdasarkan permintaan; : menerbitkan dan mendengar acara aplikasi. Corak reka bentuk ini meningkatkan fungsi dan fleksibiliti SpringMVC, membolehkan pembangun mencipta aplikasi yang cekap dan boleh diselenggara.
Apakah kelebihan dan kekurangan menggunakan corak reka bentuk dalam rangka kerja java?
Jun 01, 2024 pm 02:13 PM
Kelebihan menggunakan corak reka bentuk dalam rangka kerja Java termasuk: kebolehbacaan kod yang dipertingkatkan, kebolehselenggaraan dan kebolehskalaan. Kelemahan termasuk kerumitan, overhed prestasi dan keluk pembelajaran yang curam akibat penggunaan berlebihan. Kes praktikal: Mod proksi digunakan untuk malas memuatkan objek. Gunakan corak reka bentuk dengan bijak untuk memanfaatkan kelebihannya dan meminimumkan kelemahannya.
