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 相关文章推荐
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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
本地计算机无法启动Apache故障处理
2014/08/08 PHP
jQuery filter函数使用方法
2014/05/19 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python函数形参用法实例分析
2015/08/04 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
python super函数使用方法详解
2020/02/14 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
详解Python中第三方库Faker
2020/09/25 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
服务员态度差检讨书
2014/10/28 职场文书
三年级学生评语大全
2014/12/26 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
Python实现单例模式的5种方法
2021/06/15 Python