首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:51:47
字体:
来源:转载
供稿:网友

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

单体模式是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);}

这样写又会报错了,可见我们以上的方式对于全局变量并没有建立起一个命名空间,全局变量为我们带来了危险。所以最上面的写法是对的,我们来验证一下:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选