最近项目不太忙,难得有时间看看书,平时挺喜欢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;
};
//--执行getSingleton
var createUserDiv = getSingleton(createLoginUser);
createUserDiv();
createUserDiv(); //--执行getSingletonVip
getSingletonVip(createLoginUser);
getSingletonVip(createLoginUser);
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

JavaScript设计模式_01_单例模式的更多相关文章

  1. JavaScript设计模式之单例模式【惰性单例】

    在提高开发水平,往中高级前端工程师中,利用设计模式是必不可少的一条道路.掌握设计模式的思想远远比硬套重要,因为设计模式是一种思想,不局限于开发语言.但实际上由于语言的特性不同,往往在实现的时候会有不少 ...

  2. 再起航,我的学习笔记之JavaScript设计模式10(单例模式)

    单例模式 单例模式(Singleton) : 又被称为单体模式,是只允许实例化一次的对象类.一个类有且仅有一个实例,并且自行实例化向整个系统提供. 命名空间 单例模式可能是JavaScript中我们最 ...

  3. [JavaScript设计模式]惰性单例模式

    惰性单例模式 之前介绍了JS中类的单例模式,这次我们讨论下单例模式的应用.在众多网站中,登录框的实现方式就是一个单例,点击一次就展示一次,所以我们可以在页面加载好的时候就创建一个登录框,点击页面上的登 ...

  4. JavaScript设计模式,单例模式!

    单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点.有些对象只需要一个,这时可用单例模式. 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance ...

  5. 第一章 --- 关于Javascript 设计模式 之 单例模式

    首先我们对单例模式先进行理论上的讲解,接下来,我们再通过具体的代码示例,来讲解,这个单例模式的使用场景和这种模式的优缺点 (这个系列的所有关于设计模式的都是面向Javascript) 一.理论定义: ...

  6. JavaScript设计模式之单例模式

    一.单例模式概念 单例就是保证一个类只有一个实例,实现方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在JavaScript里,单例作为一个 ...

  7. 「设计模式」JavaScript - 设计模式之单例模式与场景实践

    单例介绍 上次总结了设计模式中的module模式,可能没有真真正正的使用在场景中,发现效果并不好,想要使用起来却不那么得心应手, 所以这次我打算换一种方式~~从简单的场景中来看单例模式, 因为Java ...

  8. JavaScript 设计模式之单例模式

    一.单例模式概念解读 1.单例模式概念文字解读 单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在Ja ...

  9. JavaScript设计模式-7.单例模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. FarPoint.Win.Spread 自定义表头

    最近C/S项目中用到FarPoint.Win.Spread,想在表头加个全选的checkbox,实现效果如图:   列的设置大家都清楚,直接可视化视图中设置该列CellType为CheckBox类型即 ...

  2. 使用vue-cli构建多页面应用+vux(三)

    上节中,我们成功的将vue-cli改造成了多入口,既然用了上简单的脚手架,那就希望用个合适的UI组件,去搜索了几个以后,最后选择了使用vux 贴上其vux的github地址  https://gith ...

  3. css grid学习材料整理

    2017-04-18 19:59:02 由浅入深: 什么是网格布局:http://www.w3cplus.com/css3/what-is-css-grid-layout.html 浏览器如何开启网格 ...

  4. linux 内核的futex

    futex是linux内核为用户空间实现锁等同步机制而设计的同步排队(队列queueing)服务.在futex.c的注释中,futex起源于"Fast Userspace Mutex&quo ...

  5. Lamp环境搭建Linux CentOS6.5编译安装mysql5.6

    经典web开发组合Lamp环境搭建之mysql安装详解 安装前准备 通过rpm命令检查centos上是否已经安装mysql,然后卸载已经存在的mysql版本 [root@localhost src]# ...

  6. Java常见快捷键

    1.Alt+/ 补充代码 2.shift+d 删除选中代码同时删除空格 3.shift+alt+R 改变所有与选中部分相同的字符串 4.ctrl+S 保存代码 5.ctrl+shift+F 格式化代码 ...

  7. 如何用jQuery实现div随鼠标移动而移动(详解)?----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  8. Arduino UNO +ESP8266采集数据上传到贝壳网

    集成电路设计大赛赛程将至,我现在还是毫无头绪,然后又报了一个互联网+,比赛报了,东西就必须出来,时间很紧的情况下,所以选择了开源的arduino的进行完成.从开始接触Arduino到完成工程,前前后后 ...

  9. VR全景是市场价值及前景

    消费者视角痛点:比如酒店消费行业,很多消费者在预订酒店过程中,都遇到过这样的场景:网上照片里酒店房间看着宽敞明亮,格调不凡,感觉非常喜欢,等真正推开房门插上房卡一看,却大失所望.在酒店行业,网上照片和 ...

  10. Day5模块-os和sys模块

    os模块:操作系统调用的接口 ------------------------------------------------------------------------------------- ...