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 相关文章推荐
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
使用python Django做网页
2013/11/04 Python
python3调用R的示例代码
2018/02/23 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python实现密码强度校验
2020/03/18 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
实习自我鉴定模板
2013/09/28 职场文书
公司面试感谢信
2014/02/01 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫