JavaScript设计模式之单例模式详解


Posted in Javascript onJune 09, 2017

最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言。也看过很多高级教程,觉得自己还是比较热衷于js的设计模式。这一次重温一下《JavaScript设计模式与开发实践》,开篇为单例模式。

/**
 * pre 单例模式
 * 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点
 * 应用:单例模式是一种常用的模式,有一些对象我们往往只需要一个,
 * 比如线程池、全局缓存、浏览器中的 window 对象等。
 */
//--------------singleton-01-------------
/*写法1*/
var Singleton = function(name){
 this.name = name;
 this.instance = null;
};

Singleton.prototype.getName = function(){
 alert(this.name);
};

Singleton.getInstance = function(){
 if(!this.instance){
  this.instance = new Singleton(name);
 }
 return this.instance;
};

var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);

// ------------singleton-02----------------
/*写法2*/
var Singleton = function(name){
 this.name = name;
}
Singleton.prototype.getName = function(){
 return this.name;
}

Singleton.getInstance = (function(){
 var instance = null;
 return function(name){
  if(!instance){
   instance = new Singleton(name);
  }
  return instance;
 }
})();

var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);

// ------------singleton03-----------
/*写法3*/
var Singleton = (function(){
 var instance;
 return function(name){
  if(instance){
   return instance;
  }
  this.name = name;
  instance = this;
 }
})();
var a = new Singleton("amy");
var b = new Singleton("ben");
alert(a === b);

//---------------- 示例 ---------------
var getSingleton = function(fn) {
 var result;
 return function() {
  if(!result) {
   result = fn.apply(this, arguments);
  }
  return result;
 }
};

var getSingletonVip = (function() {
 var instance;
 return function(fn) {
  return instance || (instance = fn.apply(this, arguments));
 }
})();

var createLoginUser = function() {
 var div = document.createElement("div");
 div.innerHTML = '这是登录框';
 document.body.appendChild(div);
 return div;
};

var createInfoGrid = function() {
 var div = document.createElement("div");
 div.innerHTML = '这是列表信息框';
 document.body.appendChild(div);
 return div;
};
//--执行singleton1 
var createUserDiv = getSingleton(createLoginUser);
createUserDiv();
createUserDiv();

//--执行singleton2
getSingletonVip(createLoginUser);
getSingletonVip(createLoginUser);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 #Javascript
JavaScript设计模式之策略模式详解
Jun 09 #Javascript
Bootstrap Table使用整理(三)
Jun 09 #Javascript
Bootstrap Table使用整理(二)
Jun 09 #Javascript
Bootstrap Table使用整理(一)
Jun 09 #Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 #Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 #Javascript
You might like
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 文件管理实例详解
2015/11/10 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
基于python中theano库的线性回归
2018/08/31 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
实习鉴定范文
2013/12/19 职场文书
高一军训的心得体会
2014/09/01 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
英语复习计划
2015/01/19 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python