威尼斯www.9778.com-威尼斯正版官方网站

javascript设计模式之单体模式

日期:2019-12-25编辑作者:服务器&运维

单人体模型式 单体是在剧本加载时创建的,能将风流罗曼蒂克层层有关系的变量和措施组织为一个逻辑单元,逻辑单元里面包车型客车剧情通过单朝气蓬勃的变量进行探访; 叁个单体首要分为三局地 用于访谈内部消息的输入变量 属性(如:nickName/age/timeInfo) 方法 基本组织 复制代码 代码如下: var Sky = { /* * 功用意气风发,变量管理 */ nickName: "sky", age: "26", /* * 作用二,加载中最早化变量 * 在加载进度中进行并发轫化Sky.info */ timeInfo: function() { var _year = new Date; return _year; }(), /* * 效能三,函数处理,令你的函数看起来不再那么散乱 */ sayHello: function(卡塔尔国{ alert; } } //全数内部消息经过Sky那几个变量进行拜候; alert; 以下是更详实的验证,看完了那篇作品,相信您应该大约通晓了,网络海人民广播广播台湾大学王牌的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{ // width = w; // height = h;这种办法也正是概念了七个全局变量, // 并非对指标width和height的赋值 //下边是理之当然的 this.width = w; this.height = h; } }//box划分了一个命名空间,命名空间里的变量只在半空中里有效 上边的单体中的全数的分子甚至艺术都是公有的,也等于在单体的外界能够对他们进行任性的更换,那怎么说单体提供了一个命名空间啊? 我们继续: 复制代码 代码如下: var box = { width:0, height:0,//单体的变量 getArea:function(卡塔尔{ return width*height;//中的,width,height其实并不是单体的变量,而是在init中定义的大局变量 } init:function{ width = w; height = h; } }//init中width,height其实并非单体的变量 window.onload = function(卡塔尔{ var init = box.getArea; } 由于并没有对init中的width,height举办开首化,所以会报错,那样改一下: 复制代码 代码如下: var box = { width:0, height:0, getArea:function(卡塔尔{ return width*height; }, init:function{ width = w; height = h; } } window.onload = function(卡塔尔(英语:State of Qatar){ width = 0; height = 0; //or box.init; var init = box.getArea; } 发现可以了,由于init和 getArea所用的width和height并非归单体全部的变量,而是一个全局变量,所以我们得以在单体外面举行随机调用而不受影响 固然大家那样写一下就更掌握了: 复制代码 代码如下: var box = { width:0, height:0, getArea:function(卡塔尔国{ return width*height;//js中目标成的拜访必需是展现的,即this是无法轻便的 }, init:function{ width = w; height = h; } }//这里的width,height其实并不是单体的靶子 window.onload = function(卡塔尔国{ width = 0; height = 0; var width = box.getArea; } 这样写又会报错了,可知大家上述的方法对于全局变量并从未树立起叁个命名空间,全局变量为大家带给了危亡。所以最上边的写法是对的,大家来证实一下: 复制代码 代码如下: var box = { width:2, height:2, getArea:function(卡塔尔(英语:State of Qatar){ return this.width*this.height;//js中指标成的会见必得是显得的,即this是不可能大致的 }, init:function{ this.width = w; this.height = h; } } window.onload = function(卡塔尔(英语:State of Qatar){ width = 0; height = 0; var width = box.getArea; } 可以见到在window.onload中的width 和height已经未有侵扰了,因为单体为单体中的width和height组建了一个命名空间。 成员的质量: 研究完命名空间,我们来对单体变量和方法的性质做一下设定。学过其余语言的人都应有很精晓个中类成员的public和private, 即使在javascript中并未有那样严俊的面向对象,不过大家可以依靠闭包来扩充三个效仿,究竟有的变量设为public是很倒霉的。 复制代码 代码如下: var circle = { //pravite member! var r = 5; var pi = 3.1416;//后边用分号 return{//public member getArea:function(卡塔尔(قطر‎{ return r*r*pi;//访谈私有成员不要加this },//前面用逗号 //要是想改良r和pi的值,只可以通过设置多个国有的函数来完毕 init:function{ r = set安德拉; } } }卡塔尔国(卡塔尔 window.onload = function(卡塔尔{ circle.r = 0;//不可能访谈私有成员,约等于又为circle创立了叁个共有成员r alert; circle.init;//通过国有的工具函数便能够访谈了。 alert; }; 私家变量、方法是只读的,公有变量、方法是可读可写的 访问: 对于个体成员,直接访谈就能够,前边不用加此外修饰, 对于国有的拜谒在单体作用域内前边要抬高“this.”,在单体效能域外前边要加多“circle.” 呵呵,就像是不怎么味道了! .利用分支本领来来封装浏览器之间的差别注意的地点: a必必要用闭包,完毕即时绑定 b每一个分支之间用分号隔开分离c最终回来的是分支的名字 d调用的时候用单体名+分支的不二秘技名; 复制代码 代码如下: // 利用单体的分支技巧来定义XH中华V对象,必定要用闭包才具够兑现 var XH大切诺基 = { //The three branches var standard = { cXHEscort:function(卡塔尔(英语:State of Qatar){ return new XMLHttpRequest(卡塔尔; } }; var activeXNew = { cXHTiguan:function(卡塔尔{ return new ActiveXObject; } }; var activeXOld = { cXH奥德赛:function(卡塔尔{ return new ActiveXObject; } }; //To assign the branch, try each method;return whatever doesn't fail var testObject; try{ testObject = standard.cXH猎豹CS6(卡塔尔(قطر‎; return standard;// return this branch if no error was thrown }catch{ try{ testObject = activeXNew.cXH福特Explorer(卡塔尔(قطر‎; return activeXNew; }catch{ try{ testObject = activeXOld.cXHTiguan(卡塔尔; return activeXOld; }catch{ throw new Error('Create the XMLHttpRequestObject failed!'卡塔尔(英语:State of Qatar); } } } }卡塔尔(卡塔尔国; window.onload = function; } 最终再啰嗦几句: 对于单体据书上说是最常用的方式之一了,至于利弊嘛要在施行中慢慢的认识了,由于本身也是初学,所以未有太多的话语权,不足提议还忘高手指教

单体是贰个用来划分命名空间并将一堆有关的性格和格局协会在同步的对象,假使她能够被实例化,那么他一定要被实例化一次。
单人体模型式是javascript里面最基本但也是最可行的格局之大器晚成。
特点:
1.       能够来划分命名空间,进而扼杀全局变量所带给的义务险。
2.       利用分支技能来来封装浏览器之间的分裂。
3.       能够把代码组织的更为生龙活虎体,便于阅读和维护。
单体的着力结构(正确写法):
/*Basic Singleton*/
var Singleton = {

         attribute1:true,

         attribute2:10,

         method1:function(){},

     method2:function(){}

};
 
1分叉命名空间:
 1 var box = {
 2         width:0,
 3         height:0,
 4         getArea:function(){
 5             return this.width*this.height;//js中目标成的探访必得是显得的,即this是不可能大约的
 6         },
 7         init:function(w,h){
 8         //    width = w;
 9         //    height = h;这种措施也就是概念了五个全局变量,(没加var证明的变量为全局变量)
10         //    并不是对目的width和height的赋值
11         //上面是无可争辩的
12             this.width = w;
13             this.height = h;
14         }
15     }//box划分了三个命名空间,命名空间里的变量只在半空里有效
16
上边包车型地铁单体中的全体的成员甚至艺术都以公有的(public),也正是在单体的外表能够对她们开展随机的转移,那干什么说单体提供了一个命名空间吗?
 
我们一连:
 1 var box = {
 2         width:0,
 3         height:0,//单体的变量
 4         getArea:function(){
 5             return width*height;//中的,width,height其实并非单体的变量,而是在init中定义的全局变量
 6         }
 7         init:function(w,h){
 8             width = w;
 9             height = h;
10         }
11     }//init中width,height其实而不是单体的变量
12 window.onload = function(){
13         var init = box.getArea();
14     alert(init);
15 }
鉴于未有对init中的width,height进行初阶化,所以会报错,那样改一下:
 1 var box = {
 2         width:0,
 3         height:0,
 4         getArea:function(){
 5             return width*height;
 6         },
 7         init:function(w,h){
 8             width = w;
 9             height = h;
10         }
11     }
12 window.onload = function(){
13         width = 0;
14         height = 0;
15         //or box.init(0,0);
16         var init = box.getArea();
17     alert(init);
18 }
发现能够了,由于init和 getArea所用的width和height实际不是归单体全数的变量,而是二个全局变量,所以我们得以在单体外面进行随机调用而不受影响
 
尽管我们这样写一下就更明亮了:
 1 var box = {
 2         width:0,
 3         height:0,
 4         getArea:function(){
 5             return width*height;//js中指标成的拜访必需是显得的,即this是不能差相当少的
 6         },
 7         init:function(w,h){
 8             width = w;
 9             height = h;
10         }
11     }//这里的width,height其实并非单体的靶子
12 window.onload = function(){
13         width = 0;
14         height = 0;
15         var width = box.getArea();
16     alert(width);
17 }
如此写又会报错了,可以预知大家上述的主意对于全局变量并不曾成立起叁个命名空间,全局变量为大家带来了危殆。所以最上边的写法是对的,大家来证澳优(Ausnutria Hyproca卡塔尔(英语:State of Qatar)下:
 1 var box = {
 2         width:2,
 3         height:2,
 4         getArea:function(){
 5             return this.width*this.height;//js中指标成的拜望必需是呈现的,即this是无法大约的
 6         },
 7         init:function(w,h){
 8             this.width = w;
 9             this.height = h;
10         }
11     }
12 window.onload = function(){
13         width = 0;
14         height = 0;
15         var width = box.getArea();
16     alert(width);
17 }
看得出在window.onload中的width 和height已经未有震撼了,因为单体为单体中的width和height构建了一个命名空间。
 
2成员的习性:
评论完命名空间,我们来对单体变量和艺术的质量做一下设定。学过任何语言的人(java,c++,c#...)都应该很精晓此中类成员的public和private,
虽说在javascript中尚无这么严酷的面向对象(oop卡塔尔(英语:State of Qatar),不过大家能够依靠闭包来进行三个仿照,毕竟有的变量设为public是十分不佳的。
 1 var circle = (function(){
 2 //pravite member!
 3     var r = 5;
 4     var pi = 3.1416;//前面用分号
 5     return{//public member
 6         getArea:function(){
 7             return r*r*pi;//访谈私有成员不要加this
 8  &

单人体模型式是...

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:javascript设计模式之单体模式

关键词:

javascript中的变量是传值还是传址的?_javascript技巧_脚本之家

这个标题念起来有点拗口,但却是理解数据结构的关键。标题中的4个术语,对应的英文分别是:shallowcopy、deep copy、...

详细>>

比较详细的javascript DOM 学习笔记第1/2页_javascript技巧_脚本之家

DOM添加元素,使用节点属性 元素(你应该明白这是该文件的document元素),你可以使用document的documentElement特性:varo...

详细>>

JS 事件绑定函数代码_javascript技巧_脚本之家威尼斯www.9778.com

主要解决了 浏览器兼容,现在可以兼容IE6 7 8 FF 谷歌IE浏览器里,this指向问题。 直接上代码吧! 复制代码 代码如下...

详细>>

javascript browser浏览器类型以及版本判断代码_javascript技巧_脚本之

return borwser比如当前浏览器类型是ie6.0,那么borwser的值应该是[“ie”,"6","6.0"]数组的第一个值表示浏览器的类型,第二...

详细>>