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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
JS实现简易日历效果
Jan 25 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
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python判断文件和字符串编码类型的实例
2017/12/21 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Django中create和save方法的不同
2019/08/13 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
python列表推导式入门学习解析
2019/12/02 Python
应届实习生的自我评价范文
2014/01/05 职场文书
办理退休介绍信
2014/01/09 职场文书
社区八一活动方案
2014/02/03 职场文书
经理助理岗位职责
2014/03/05 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
医德考评自我评价
2014/09/14 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python