无为清净楼资源网 Design By www.qnjia.com
单体模式(singleton)
单体是在脚本加载时创建的,能将一系列有关联的变量和方法组织为一个逻辑单元,逻辑单元里面的内容通过单一的变量进行访问;
一个单体主要分为三部分
用于访问内部信息的入口变量(如:Sky)
属性(如:nickName/age/timeInfo)
方法(如:sayHello)
基本结构
复制代码 代码如下:
var Sky = {
/*
* 作用一,变量管理
*/
nickName: "sky",
age: "26",
/*
* 作用二,加载中初始化变量
* 在加载过程中执行并初始化Sky.info
*/
timeInfo: function()
{
var _year = new Date().getFullYear();
return _year;
}(),
/*
* 作用三,函数管理,让你的函数看起来不再那么散乱
*/
sayHello: function()
{
alert("hello,world!");
}
}
//所有内部信息通过Sky这个变量进行访问;
alert(Sky.timeInfo);
以下是更详细的说明,看完了这篇文章,相信你应该差不多了解了,网上好多高手的js写法了,单体模式很常用。
单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象,如果他可以被实例化,那么他只能被实例化一次。
单体模式是javascript里面最基本但也是最有用的模式之一。
特点:
. 可以来划分命名空间,从而清除全局变量所带来的危险。
. 利用分支技术来来封装浏览器之间的差异。
. 可以把代码组织的更为一体,便于阅读和维护。
单体的基本结构(正确写法):
复制代码 代码如下:
/*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;这种方式相当于定义了两个全局变量,(没加var声明的变量为全局变量)
// 并不是对对象width和height的赋值
//下面是正确的
this.width = w;
this.height = h;
}
}//box划分了一个命名空间,命名空间里的变量只在空间里有效
上面的单体中的所有的成员以及方法都是公有的(public),也就是在单体的外部可以对他们进行任意的改动,那为什么说单体提供了一个命名空间呢?
我们继续:
复制代码 代码如下:
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);
}
发现可以了,由于init和 getArea所用的width和height并不是归单体所有的变量,而是一个全局变量,所以我们可以在单体外面进行随意调用而不受影响
如果我们这样写一下就更明白了:
复制代码 代码如下:
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已经没有干扰了,因为单体为单体中的width和height建立了一个命名空间。
成员的属性:
讨论完命名空间,我们来对单体变量和方法的属性做一下设定。学过其他语言的人(java,c++,c#...)都应该很了解其中类成员的public和private,
虽然在javascript中没有这么严格的面向对象(oop),但是我们可以借助闭包来进行一个模仿,毕竟有的变量设为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的值,只能通过设置一个公有的函数来实现
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0;//无法访问私有成员,相当于又为circle创建了一个共有成员r
alert(circle.getArea());
circle.init(0);//通过公有的工具函数便可以访问了。
alert(circle.getArea());
};
私有变量、方法是只读的,公有变量、方法是可读可写的
访问:
对于私有成员,直接访问即可,前面不用加任何修饰,
对于公有的访问在单体作用域内前面要加上“this.”,在单体作用域外前面要加上“circle.”(单体名字.)
呵呵,似乎有点味道了!
.利用分支技术来来封装浏览器之间的差异
注意的地方:
a一定要用闭包,实现即时绑定
b每个分支之间用分号隔开
c最后返回的是分支的名字
d调用的时候用单体名+分支的方法名;
复制代码 代码如下:
// 利用单体的分支技术来定义XHR(XMLHttpRequest)对象,必须要用闭包才可以实现
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());
}
最后再啰嗦几句:
对于单体据说是最常用的模式之一了,至于利弊嘛要在实践中慢慢的体会了,由于本人也是初学,所以没有太多的发言权,不足指出还忘高手指教
单体是在脚本加载时创建的,能将一系列有关联的变量和方法组织为一个逻辑单元,逻辑单元里面的内容通过单一的变量进行访问;
一个单体主要分为三部分
用于访问内部信息的入口变量(如:Sky)
属性(如:nickName/age/timeInfo)
方法(如:sayHello)
基本结构
复制代码 代码如下:
var Sky = {
/*
* 作用一,变量管理
*/
nickName: "sky",
age: "26",
/*
* 作用二,加载中初始化变量
* 在加载过程中执行并初始化Sky.info
*/
timeInfo: function()
{
var _year = new Date().getFullYear();
return _year;
}(),
/*
* 作用三,函数管理,让你的函数看起来不再那么散乱
*/
sayHello: function()
{
alert("hello,world!");
}
}
//所有内部信息通过Sky这个变量进行访问;
alert(Sky.timeInfo);
以下是更详细的说明,看完了这篇文章,相信你应该差不多了解了,网上好多高手的js写法了,单体模式很常用。
单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象,如果他可以被实例化,那么他只能被实例化一次。
单体模式是javascript里面最基本但也是最有用的模式之一。
特点:
. 可以来划分命名空间,从而清除全局变量所带来的危险。
. 利用分支技术来来封装浏览器之间的差异。
. 可以把代码组织的更为一体,便于阅读和维护。
单体的基本结构(正确写法):
复制代码 代码如下:
/*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;这种方式相当于定义了两个全局变量,(没加var声明的变量为全局变量)
// 并不是对对象width和height的赋值
//下面是正确的
this.width = w;
this.height = h;
}
}//box划分了一个命名空间,命名空间里的变量只在空间里有效
上面的单体中的所有的成员以及方法都是公有的(public),也就是在单体的外部可以对他们进行任意的改动,那为什么说单体提供了一个命名空间呢?
我们继续:
复制代码 代码如下:
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);
}
发现可以了,由于init和 getArea所用的width和height并不是归单体所有的变量,而是一个全局变量,所以我们可以在单体外面进行随意调用而不受影响
如果我们这样写一下就更明白了:
复制代码 代码如下:
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已经没有干扰了,因为单体为单体中的width和height建立了一个命名空间。
成员的属性:
讨论完命名空间,我们来对单体变量和方法的属性做一下设定。学过其他语言的人(java,c++,c#...)都应该很了解其中类成员的public和private,
虽然在javascript中没有这么严格的面向对象(oop),但是我们可以借助闭包来进行一个模仿,毕竟有的变量设为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的值,只能通过设置一个公有的函数来实现
init:function(setR){
r = setR;
}
}
})()
window.onload = function(){
circle.r = 0;//无法访问私有成员,相当于又为circle创建了一个共有成员r
alert(circle.getArea());
circle.init(0);//通过公有的工具函数便可以访问了。
alert(circle.getArea());
};
私有变量、方法是只读的,公有变量、方法是可读可写的
访问:
对于私有成员,直接访问即可,前面不用加任何修饰,
对于公有的访问在单体作用域内前面要加上“this.”,在单体作用域外前面要加上“circle.”(单体名字.)
呵呵,似乎有点味道了!
.利用分支技术来来封装浏览器之间的差异
注意的地方:
a一定要用闭包,实现即时绑定
b每个分支之间用分号隔开
c最后返回的是分支的名字
d调用的时候用单体名+分支的方法名;
复制代码 代码如下:
// 利用单体的分支技术来定义XHR(XMLHttpRequest)对象,必须要用闭包才可以实现
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());
}
最后再啰嗦几句:
对于单体据说是最常用的模式之一了,至于利弊嘛要在实践中慢慢的体会了,由于本人也是初学,所以没有太多的发言权,不足指出还忘高手指教
标签:
设计模式,单体模式
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年11月17日
2024年11月17日
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】