javascript 設(shè)計模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)_js面向?qū)ο?/h1>
May 16, 2016 pm 06:29 PM
Designmuster
單體是在腳本加載時創(chuàng)建的，能將一系列有關(guān)聯(lián)的變量和方法組織為一個邏輯單元，邏輯單元里面的內(nèi)容通過單一的變量進行訪問；
一個單體主要分為三部分
用于訪問內(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這個變量進行訪問；
alert(Sky.timeInfo);
以下是更詳細(xì)的說明，看完了這篇文章，相信你應(yīng)該差不多了解了，網(wǎng)上好多高手的js寫法了，單體模式很常用。
單體是一個用來劃分命名空間并將一批相關(guān)的屬性和方法組織在一起的對象，如果他可以被實例化，那么他只能被實例化一次。
單體模式是javascript里面最基本但也是最有用的模式之一。
特點：
. 可以來劃分命名空間，從而清除全局變量所帶來的危險。
. 利用分支技術(shù)來來封裝瀏覽器之間的差異。
. 可以把代碼組織的更為一體，便于閱讀和維護。
單體的基本結(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中對象成的訪問必須是顯示的，即this是不能省略的
},
init:function(w,h){
// width = w;
// height = h;這種方式相當(dāng)于定義了兩個全局變量，（沒加var聲明的變量為全局變量）
// 并不是對對象width和height的賦值
//下面是正確的
this.width = w;
this.height = h;
}
}//box劃分了一個命名空間，命名空間里的變量只在空間里有效
上面的單體中的所有的成員以及方法都是公有的（public），也就是在單體的外部可以對他們進行任意的改動，那為什么說單體提供了一個命名空間呢？
我們繼續(xù)：
var box = {
width:0,
height:0,//單體的變量
getArea:function(){
return width*height;//中的,width，height其實并不是單體的變量，而是在init中定義的全局變量
}
init:function(w,h){
width = w;
height = h;
}
}//init中width，height其實并不是單體的變量
window.onload = function(){
var init = box.getArea();
alert(init);
}
由于沒有對init中的width，height進行初始化，所以會報錯，這樣改一下：
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并不是歸單體所有的變量，而是一個全局變量，所以我們可以在單體外面進行隨意調(diào)用而不受影響
如果我們這樣寫一下就更明白了：
var box = {
width:0,
height:0,
getArea:function(){
return width*height;//js中對象成的訪問必須是顯示的，即this是不能省略的
},
init:function(w,h){
width = w;
height = h;
}
}//這里的width，height其實并不是單體的對象
window.onload = function(){
width = 0;
height = 0;
var width = box.getArea();
alert(width);
}
這樣寫又會報錯了，可見我們以上的方式對于全局變量并沒有建立起一個命名空間，全局變量為我們帶來了危險。所以最上面的寫法是對的，我們來驗證一下：
var box = {
width:2,
height:2,
getArea:function(){
return this.width*this.height;//js中對象成的訪問必須是顯示的，即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)沒有干擾了，因為單體為單體中的width和height建立了一個命名空間。
成員的屬性：
討論完命名空間，我們來對單體變量和方法的屬性做一下設(shè)定。學(xué)過其他語言的人（java，c++，c#...）都應(yīng)該很了解其中類成員的public和private，
雖然在javascript中沒有這么嚴(yán)格的面向?qū)ο?oop)，但是我們可以借助閉包來進行一個模仿，畢竟有的變量設(shè)為public是很不好的。
var circle = (function(){
//pravite member!
var r = 5;
var pi = 3.1416;//后面用分號
return{//public member
getArea:function(){
return r*r*pi;//訪問私有成員不要加this
},//后面用逗號
//如果想改變r和pi的值，只能通過設(shè)置一個公有的函數(shù)來實現(xiàn)
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0;//無法訪問私有成員,相當(dāng)于又為circle創(chuàng)建了一個共有成員r
alert(circle.getArea());
circle.init(0);//通過公有的工具函數(shù)便可以訪問了。
alert(circle.getArea());
};
私有變量、方法是只讀的，公有變量、方法是可讀可寫的
訪問：
對于私有成員，直接訪問即可，前面不用加任何修飾，
對于公有的訪問在單體作用域內(nèi)前面要加上“this.”，在單體作用域外前面要加上“circle.”（單體名字.）
呵呵，似乎有點味道了！
.利用分支技術(shù)來來封裝瀏覽器之間的差異
注意的地方：
a一定要用閉包，實現(xiàn)即時綁定
b每個分支之間用分號隔開
c最后返回的是分支的名字
d調(diào)用的時候用單體名+分支的方法名；
// 利用單體的分支技術(shù)來定義XHR（XMLHttpRequest）對象,必須要用閉包才可以實現(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());
}
最后再啰嗦幾句：
對于單體據(jù)說是最常用的模式之一了，至于利弊嘛要在實踐中慢慢的體會了，由于本人也是初學(xué)，所以沒有太多的發(fā)言權(quán)，不足指出還忘高手指教
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Der Unterschied zwischen Entwurfsmustern und Architekturmustern im Java-Framework
Jun 02, 2024 pm 12:59 PM
Im Java-Framework besteht der Unterschied zwischen Entwurfsmustern und Architekturmustern darin, dass Entwurfsmuster abstrakte L?sungen für h?ufige Probleme beim Softwaredesign definieren und sich dabei auf die Interaktion zwischen Klassen und Objekten konzentrieren, beispielsweise Fabrikmuster. Architekturmuster definieren die Beziehung zwischen Systemstrukturen und Modulen und konzentrieren sich auf die Organisation und Interaktion von Systemkomponenten, wie z. B. eine geschichtete Architektur.
PHP-Entwurfsmuster: Testgetriebene Entwicklung in der Praxis
Jun 03, 2024 pm 02:14 PM
TDD wird verwendet, um hochwertigen PHP-Code zu schreiben. Die Schritte umfassen: Testf?lle schreiben, die erwartete Funktionalit?t beschreiben und sie zum Scheitern bringen. Schreiben Sie Code so, dass nur die Testf?lle ohne überm??ige Optimierung oder detailliertes Design erfolgreich sind. Nachdem die Testf?lle bestanden wurden, optimieren und überarbeiten Sie den Code, um die Lesbarkeit, Wartbarkeit und Skalierbarkeit zu verbessern.
Anwendung von Designmustern im Guice-Framework
Jun 02, 2024 pm 10:49 PM
Das Guice-Framework wendet eine Reihe von Entwurfsmustern an, darunter: Singleton-Muster: Durch die @Singleton-Annotation wird sichergestellt, dass eine Klasse nur eine Instanz hat. Factory-Methodenmuster: Erstellen Sie eine Factory-Methode über die Annotation @Provides und rufen Sie die Objektinstanz w?hrend der Abh?ngigkeitsinjektion ab. Strategiemodus: Kapseln Sie den Algorithmus in verschiedene Strategieklassen und geben Sie die spezifische Strategie über die Annotation @Named an.
Analyse des Decorator-Musters in Java-Entwurfsmustern
May 09, 2024 pm 03:12 PM
Das Dekoratormuster ist ein strukturelles Entwurfsmuster, das das dynamische Hinzufügen von Objektfunktionen erm?glicht, ohne die ursprüngliche Klasse zu ?ndern. Es wird durch die Zusammenarbeit von abstrakten Komponenten, konkreten Komponenten, abstrakten Dekoratoren und konkreten Dekoratoren implementiert und kann Klassenfunktionen flexibel erweitern, um sich ?ndernden Anforderungen gerecht zu werden. In diesem Beispiel werden Milch- und Mokka-Dekoratoren zu Espresso für einen Gesamtpreis von 2,29 $ hinzugefügt, was die Leistungsf?higkeit des Dekoratormusters bei der dynamischen ?nderung des Verhaltens von Objekten demonstriert.
Anwendung von Entwurfsmustern im Spring MVC-Framework
Jun 02, 2024 am 10:35 AM
Das SpringMVC-Framework verwendet die folgenden Entwurfsmuster: 1. Singleton-Modus: verwaltet den Spring-Container; 2. Fassadenmodus: koordiniert Controller-, Ansichts- und Modellinteraktion; 3. Strategiemodus: w?hlt einen Anforderungshandler basierend auf der Anforderung aus; : Ver?ffentlicht und wartet auf Anwendungsereignisse. Diese Entwurfsmuster verbessern die Funktionalit?t und Flexibilit?t von SpringMVC und erm?glichen Entwicklern die Erstellung effizienter und wartbarer Anwendungen.
Was sind die Vor- und Nachteile der Verwendung von Entwurfsmustern im Java-Framework?
Jun 01, 2024 pm 02:13 PM
Zu den Vorteilen der Verwendung von Entwurfsmustern in Java-Frameworks geh?ren: verbesserte Lesbarkeit, Wartbarkeit und Skalierbarkeit des Codes. Zu den Nachteilen geh?ren Komplexit?t, Leistungsaufwand und eine steile Lernkurve aufgrund überm??iger Nutzung. Praktischer Fall: Der Proxy-Modus wird zum verz?gerten Laden von Objekten verwendet. Setzen Sie Entwurfsmuster mit Bedacht ein, um ihre Vorteile zu nutzen und ihre Nachteile zu minimieren.
PHP-Entwurfsmuster: Muster, die zur L?sung spezifischer Softwareprobleme verwendet werden
Jun 01, 2024 am 11:07 AM
PHP-Entwurfsmuster bieten bekannte L?sungen für h?ufige Probleme in der Softwareentwicklung. Zu den g?ngigen Mustertypen geh?ren sch?pferische Muster (z. B. Fabrikmethodenmuster), strukturelle Muster (z. B. Dekorationsmuster) und Verhaltensmuster (z. B. Beobachtermuster). Entwurfsmuster sind besonders nützlich, wenn es darum geht, sich wiederholende Probleme zu l?sen, die Wartbarkeit zu verbessern und die Teamarbeit zu f?rdern. In E-Commerce-Systemen kann das Beobachtermuster automatische Aktualisierungen zwischen Warenkorb- und Bestellstatus realisieren. Insgesamt sind PHP-Entwurfsmuster ein wichtiges Werkzeug zum Erstellen robuster, skalierbarer und wartbarer Anwendungen.
Die Beziehung zwischen Entwurfsmustern und testgetriebener Entwicklung
May 09, 2024 pm 04:03 PM
TDD und Entwurfsmuster verbessern die Codequalit?t und Wartbarkeit. TDD stellt die Testabdeckung sicher, verbessert die Wartbarkeit und verbessert die Codequalit?t. Entwurfsmuster unterstützen TDD durch Prinzipien wie lose Kopplung und hohe Koh?sion und stellen sicher, dass Tests alle Aspekte des Anwendungsverhaltens abdecken. Es verbessert auch die Wartbarkeit und Codequalit?t durch Wiederverwendbarkeit, Wartbarkeit und robusteren Code.
