JavaScript设计模式之单体模式全面解析


Posted in Javascript onSeptember 09, 2016

单体是一个用来划分命名空间并将一些相关的属性与方法组织在一起的对象,如果她可以被实例化的话,那她只能被实例化一次(她只能嫁一次,不能二婚)。

单体模式是javascript里面最基本但也是最有用的模式之一。

特点:

1. 可以用来划分命名空间,从而清除全局变量所带来的危险或影响。

2. 利用分支技术来来封装浏览器之间的差异。

3. 可以把代码组织的更为一体,便于阅读和维护。

单体模式的基本写法:

/* 最基本的单体模式 */ 
var her = {
name: 'Anna',
sex: 'women',
say: function(){
// 一些处理逻辑......
},
doing: function(){
// 另一些处理函数......
} 
}

1. 划分命名空间:

var box = {
width: 0,
height: 0,
getArea: function(){
return this.width * this.width; // 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建立了一个命名空间。

2. 成员的属性:

虽然在javascript中没有这么严格的面向对象(oop),但是我们可以借助闭包来进行一个模仿,毕竟有的变量设为public是很不好的。

var her = (function(){
var name = 'Anna';
var sex = 'women';
return {
getArea: function(){
return name + 'is a' + sex;
},
init:function(b){
name = b;
}
}
})();
window.onload = function(){
her.name = 'Jock'; // 无法访问
alert(ger.getArea());
her.init('Lous');
alert(her.getArea());
}

私有变量、方法是只读的,公有变量、方法是可读可写的。

访问:

对于私有成员,直接访问即可,前面不用加任何修饰,
对于公有的访问在单体作用域内前面要加上“this.”,在单体作用域外前面要加上“her.”(单体名字.)

3.利用分支技术来来封装浏览器之间的差异

注意的地方:

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());
}

以上所述是小编给大家介绍的JavaScript设计模式之单体模式全面解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
原生js编写2048小游戏
Mar 17 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 #Javascript
全面解析Bootstrap表单样式的使用
Sep 09 #Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 #Javascript
JS与jQuery实现隔行变色的方法
Sep 09 #Javascript
jQuery层次选择器用法示例
Sep 09 #Javascript
jQuery基本过滤选择器用法示例
Sep 09 #Javascript
jQuery可见性过滤选择器用法示例
Sep 09 #Javascript
You might like
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
跟老齐学Python之print详解
2014/09/28 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
公务员培训自我鉴定
2014/02/01 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
企业贷款委托书格式
2014/09/12 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
营销经理工作检讨书
2014/11/03 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
铁路安全反思材料
2014/12/24 职场文书
老公出轨后的保证书
2015/05/08 职场文书
消防验收申请报告
2015/05/15 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs