单体模式

1. js最简单的单体模式

对象字面量:把一批有一定关联的方法和属性组织在一起

// 对象字面量
var Singleton = {
attr1: true,
attr2: 10,
method1: function() {},
method2: function(arg) {}
} // 配合命名空间
var GiantCorp = {}
GiantCorp.Singleton = {...}

2. 拥有私有成员的单体

2.1 使用下划线

下面实现一个单体用于对字符串进行分割并返回分割后字符串组成的数组,它有三个参数:(要分割的字符串, 分割的标志字符串, [是否先对字符串进行去空格符处理]),这个例子下面也会用到

GiantCrop.DataParser = {
// private methods
_stripWitespace: function(str) { // 去空格符处理
return str.replace(/\s+/g, '');
},
_stringSplit: function(str, delimiter) { // 字符串分割处理
return str.split(delimiter);
}, // public method
stringToArray: function(str, delimiter, stripWS) {
if(stripWS) {
str = this._stripWitespace(str)
}
var outputArray = this._stringSplit(str, delimiter);
return outputArray
}
} // 里面使用 this 来访问私有方法有一定风险,因为 this 不一定是指向 GiantCrop.DataParser,所以最好使用 GiantCrop.DataParser 来访问私有方法

2.2 使用闭包

GiantCrop.DataParser = (function() {
// private attribute
var whilespaceRegex = /\s+/g;
// private methods
function stripWitespace(str) {
return str.replace(whilespaceRegex, '');
}
function stringSplit(str, delimiter) {
return str.split(delimiter);
} return {
// public method
stringToArray: function(str, delimiter, stripWS) {
if(stripWS) {
str = stripWitespace(str)
}
var outputArray = stringSplit(str, delimiter);
return outputArray
}
}
})()

3. 惰性实例化

GiantCrop.DataParser = (function() {

    var uniqueInstance = null;

    function constructor() {        //控制实例化函数,外部无法访问到
// private attribute
var whilespaceRegex = /\s+/g;
// private methods
function stripWitespace(str) {
return str.replace(whilespaceRegex, '');
}
function stringSplit(str, delimiter) {
return str.split(delimiter);
} return {
// public method
stringToArray: function(str, delimiter, stripWS) {
if(stripWS) {
str = stripWitespace(str)
}
var outputArray = stringSplit(str, delimiter);
return outputArray
}
}
} return {
getInstance: function() {
if(!uniqueInstance) { // 判断是否已初始化实例
uniqueInstance = constructor()
}
return uniqueInstance
}
} })() // usage
GiantCrop.DataParser.getInstance().stringToArray('ss sabb bb', 'a', true)

4. 分支

在前端开发中,有时实现同一个功能需要去设配不同浏览器,比如进行 Ajax 请求,下面这个例子就是通过分支技术设配不同浏览器获得 XMLHttpRequest 对象

// 一起来就立即执行获得对应浏览器支持的 xhr 对象
var SimpleXhrFactory = (function() {
// 三个分支
var standard = {
createXhrObject: function() {
return new XMLHttpRequest();
}
}
var activeXNew = {
createXhrObject: function() {
return new ActiveXObject('Msxml2.XMLHTTP');
}
}
var activeXOld = {
createXhrObject: function() {
return new ActiveXObject('Microsoft.XMLHTTP')
}
} // 使用 try catch 检查每个分支,并返回不报错的分支
var testObject = null;
try {
testObject = standard.createXhrObject();
return standard
}catch(err) {
try{
testObject = activeXNew.createXhrObject();
return activeXNew
}catch(err) {
try{
testObject = activeXOld.createXhrObject();
return activeXOld
}catch(err) {
throw new Error('No XHR object found in this environment')
}
}
}
})() // usage
SimpleXhrFactory.createXhrObject()

5. 单体的利弊

1. 利

  • 不会被多次实例化
  • 使代码的调试和维护变的轻松
  • 描述性的命名空间可以增强代码的自我说明性,有利于新手阅读和理解
  • 可防止你的方法被其他程序员误改
  • 使用惰性实例化技术可提升性能
  • 使用分支技术可以创建出为特定环境量身定做的方法,这种方法不会在每次调用时再浪费时间去检查运行环境

2. 弊

  • 单点访问,它有可能导致模块间的强耦合(有时创建一个可实例化的类比较可取,哪怕它只有被实例化一次)
  • 强耦合不利于单元测试
  • 当体最好留给定义命名空间和实现分支型方法这些用途
  • 有时某些更高级的模式会更符合任务的需要,不能因为单体够用了就不适用其他模式

注意

转载、引用,但请标明作者和原文地址

Javascript设计模式(2)-单体模式的更多相关文章

  1. javascript设计模式之单体模式

    一入前端深似海,刚入前端,以为前端只是div+css布局外加jquery操作DOM树辣么简单.伴随着对前端学习的深入,发现前端也是博大精深,而且懂得越多,才发现自己越无知,所以一定不能停下脚步的学习. ...

  2. javascript --- 设计模式之单体模式(一)

    单体是一个用来划分命名空间并将一些相关的属性与方法组织在一起的对象,如果她可以被实例化的话,那她只能被实例化一次(她只能嫁一次,不能二婚). 单体模式是javascript里面最基本但也是最有用的模式 ...

  3. javascript设计模式(单体模式)

    主要内容: js中最基本.应用最广的模式就是单体模式,实现原理是将代码组织为一个逻辑单元,这个逻辑单元中的代码可以通过单一的变更进行访问,确保对象只存在一份实例. 单体模式的特点: 在网页中使用全局变 ...

  4. javascript --- 设计模式之单体模式(二)

    在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法: var her = { property1: 'someing', ...

  5. JS设计模式——5.单体模式

    JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html   单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...

  6. JavaScript设计模式之----组合模式

    javascript设计模式之组合模式 介绍 组合模式是一种专门为创建Web上的动态用户界面而量身制定的模式.使用这种模式可以用一条命令在多个对象上激发复杂的或递归的行为.这可以简化粘合性代码,使其更 ...

  7. JS设计模式之单体模式(Singleton)

    单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对 ...

  8. 从ES6重新认识JavaScript设计模式(三): 建造者模式

    1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...

  9. JavaScript 设计模式之----单体(单例)模式

    设计模式之--单体(单例)模式 1.介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工 ...

随机推荐

  1. BZOJ 2809: [Apio2012]dispatching [主席树 DFS序]

    传送门 题意:查询树上根节点值*子树中权值和$\le m$的最大数量 最大值是多少 求$DFS$序,然后变成区间中和$\le m$最多有几个元素,建主席树,然后权值线段树上二分就行了 $WA$:又把边 ...

  2. iPad Pro 10.5+Apple Pencil之专注文献阅读与笔记效率的App综述

    先谈谈我对笔记类App的几点要求--原则是取其精华,略其糟粕,毕竟开发者们还在,App就会不断地被改进: 增删快捷方便:如完美支持Apple Pencil,特定场景下强大的录音功能,单词或短句涂改即可 ...

  3. 浅析Xilinx 三速以太网MAC IP核

    之前在使用Altera的三速以太网MAC IP的基础上,完成了UDP协议数据传输.此次为了将设计移植到xilinx FPGA上,需要用到xilinx的三速以太网MAC IP核,当然也可以自己用HDL编 ...

  4. HTML 5.2 新特性介绍

    本文译自 What's New in HTML 5.2? 作者 Ire Aderinokun,是一位前端开发者和 UI 设计师. 就在不到一个月之前,HTML 5.2 成为了 W3C 的官方推荐规范( ...

  5. javascript 数字字母组合的随机数

    Math.random()方法用于生成,结果为0-1间的一个伪随机数(包括0,不包括1) ,通常的办法是结合parseInt().Math.floor() 或者 Math.ceil()进行四舍五入处理 ...

  6. python爬虫(7)——BeautifulSoup

    今天介绍一个非常好用的python爬虫库--beautifulsoup4.beautifulsoup4的中文文档参考网址是:http://beautifulsoup.readthedocs.io/zh ...

  7. iOS 使用NTP时间同步服务

    githup上有相关开源库, ios-ntp 导入即可使用 NetworkClock *netClock = [NetworkClock sharedNetworkClock]; netClock.n ...

  8. 数据库之mac上mysql root密码忘记或权限错误的解决办法

    [转自  http://blog.csdn.net/u014410695/article/details/50630233] 以下方法亲测有效,过程使用的工具只有mac的终端无需workbench 当 ...

  9. 微信小程序内嵌网页 网站生成小程序

    1. 进入小程序后台 - 设置 - 开发设置 2. 添加业务域名(小程序只支持https) 3. 小程序代码 <web-view src="网址"></web-v ...

  10. CSS3总结(干货)

    1.css3中好用的选择器 :target //突出显示活动的HTML锚 ::after / ::before{content:" ";} //content必须有,若无内容,用空 ...