最近项目不太忙,难得有时间看看书,平时挺喜欢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. FreeSWITCH 安装配置的 各种坑, 填坑

    个人安装环境: OS:CentOS6.7 64位 FreeSWITCH Ver:1.6.17 一. 编译出错 安装 之前, 最好 先安装 这几个东西(如果有, 请忽略): yasm (有nasm的话 ...

  2. Linux -atime、mtime、ctime

    Linux中,文件都有其自身的atime.mtime.ctime,在不同的命令下,各时间发生相应的改变.下面,我们来简单的介绍一下: atime (access time):表示最后一次访问文件或目录 ...

  3. JavaEE开发之SpringMVC中的自定义消息转换器与文件上传

    上篇博客我们详细的聊了<JavaEE开发之SpringMVC中的静态资源映射及服务器推送技术>,本篇博客依然是JavaEE开发中的内容,我们就来聊一下SpringMVC中的自定义消息转发器 ...

  4. Windows7系统的封装

    系统装到虚拟机优化完成以后,可以装上自己想要装的软件,也可以不装做个纯净版的.今天用ES封装,首先打开一般我们只点这四项就够了,如下图 写上自己想写的,也可以不写系统默认,直接点“下一步”关闭设备管理 ...

  5. [ext4]010 磁盘布局 - 如何查找inode的磁盘位置

    在linux系统中,任何一个文件,都有一个inode与其对应,也就是说,在一个文件系统中,一个文件都有唯一的ino来标示他,那么在ext4系统中,ino是如何确定的哪? 当我们新创建的文件或目录时,会 ...

  6. [ext4]03 磁盘布局 – Flexible group分析

    Flexible Block Groups (flex_bg),我称之为"弹性块组",是EXT4文件系统引入的一个feature. 所谓Flexible Block Groups, ...

  7. 如何设置文本不换行省略号显示等CSS常用文本属性

    如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...

  8. java中使用fastjson、jackson、json-lib解析JSON-------------------妈妈再也不用担心JSON解析

    1.fastjson引入包<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjso ...

  9. iis7 安装laravel5.4环境

    laravel版本: Laravel5.4IIS版本:IIS7站点配置就不详细说啦,大家网上可以搜一坨很多的配置方法啦哈直接上图: 由于IIS没有像Apache.htaccess文件,创建一个Web. ...

  10. [笔记]cin、cout与scanf、printf的效率差异对比分析

    之前上传UVa227 puzzle时,好不容易AC了,但发现自己用时50(ms),而在VJ上看到人家都是40ms.20ms,于是打开一个20ms的代码查看人家强在哪里.但结果研究了半天感觉差不多,于是 ...