JavaScript实战

JavaScript之单例实战

一、概述

所谓单例模式,顾名思义即一个类只有一个实例。

所以,当我们创建一个实例时,就必须判断其是否已经存在了这个实例,如果已经存在了这个实例,那么就返回这个已经存在的实例,无需再创建一个单例模式嘛,核心就是一个类只有一个 实例;如果不存在,就创建这个实例咯。

好了,单例模式的核心思想以及创建流程大致搞清楚了,那么我们就开始看看,在Javascript的世界中,具体该怎么实现呢?

二、实战一

核心思路:利用Javascript的作用域,形成闭包,从而可以创建私有变量(假设我们将这个私有变量取名为instance),然后将创建的实例赋予这个私有变量instance就ok了。每当想创建这个类的实例时,先判断instance是否已经引用了存在的实例,如果没有引用,即这个类没有被创建实例,so创建一个实例,然后将其赋予给instance;如果instance已经引用,即已存在了该类的实例,so无需再创建,直接使用这个instance就ok了。

第一步:执行匿名函数,防止命名空间污染。在匿名函数中,首先定义个上述提到的私有变量instance以及一个类。这个类,我假设它有名字(name)和年龄(age)两个属性字段以及一个输出他们名字的方(displayInfo)哈。

‘use strict‘
var singletonAccepter =(function(){
    //默认将instance赋予null
    var instance = null;
    //类:SupposeClass
    function SupposeClass( args ){
        var args = args || {};
        this.name = args.name || ‘Monkey‘;
        this.age = args.age || 24;
    };
    SupposeClass.prototype = {
        constructor: SupposeClass,
        displayInfo: function(){
            console.log(‘name: ‘ + this.name + ‘   age: ‘ + this.age);
        }
    };
})();

第二步:利用return + 对象字面量,将我们想,向外暴露的东东,往外抛。

如下:

return {
    //类的名字
    name: ‘SupposeClass‘,
    //创建类的实例方法
    getInstance: function( args ){
        //利用私有变量instance实现单例模式
        if( instance === null ){
            instance = new SupposeClass( args );
        }
        return instance;
    }
};

最后,合并第一步第二步的代码就形成了一个单例模式啦。

如下:

‘use strict‘
var singletonAccepter =(function(){
    //默认将instance赋予null
    var instance = null;
    //类:SupposeClass
    function SupposeClass( args ){
        var args = args || {};
        this.name = args.name || ‘Monkey‘;
        this.age = args.age || 24;
    };
    SupposeClass.prototype = {
        constructor: SupposeClass,
        displayInfo: function(){
            console.log(‘name: ‘ + this.name + ‘   age: ‘ + this.age);
        }
    };
    return {
        //类的名字
        name: ‘SupposeClass‘,
        //创建类的实例方法
        getInstance: function( args ){
            //利用私有变量instance实现单例模式
            if( instance === null ){
                instance = new SupposeClass( args );
            }
            return instance;
        }
    };
})();

接下来,我们检验一下写的这个单例模式。在上述代码中,在类SupposeClass中加入console.log,如果只创建了它的一个实例,那么就只会打印一个日志哦。
修改代码如下:

‘use strict‘
var singletonAccepter =(function(){
    var instance = null;
    function SupposeClass( args ){
        var args = args || {};
        this.name = args.name || ‘Monkey‘;
        this.age = args.age || 24;
        //检验单例模式
        console.log(‘this is created!‘);
    };
    SupposeClass.prototype = {
        constructor: SupposeClass,
        displayInfo: function(){
            console.log(‘name: ‘ + this.name + ‘   age: ‘ + this.age);
        }
    };
    return {
        name: ‘SupposeClass‘,
        getInstance: function( args ){
            if( instance === null ){
                instance = new SupposeClass( args );
            }
            return instance;
        }
    };
})();

调用两次getInstance方法,看看打印几条记录

singletonAccepter.getInstance();
singletonAccepter.getInstance();

执行代码,打开chrome截图如下:

鉴定完毕,只被实例一次。

三、实战二

思路:利用属性来判断是否已存在实例。
什么意思?
在Javascript的世界里,类(function)不也是对象嘛,so对其赋予一个属性instance,用来引用创建的实例,通过判断instance是否已引用创建的实例就OK咯。

如下:

function singletonAccepter( args ){
    //判断Universe.instance是否已存在实例
    if(typeof singletonAccepter.instance === ‘object‘){
        return singletonAccepter.instance;
    }
    this.name = args.name || ‘Monkey‘;
    this.age = args.age || 24;
    singletonAccepter.instance = this;
};
singletonAccepter.prototype = {
    constructor: singletonAccepter,
    displayInfo: function(){
        console.log(‘name: ‘ + this.name + ‘   age: ‘ + this.age);
    }
};

四、实战三

在Javascript的世界里,this是引用的对象。
还记得JavaScript是怎么通过new创建对象的么? 
new:
  1、创建一个新的对象,这个对象的类型时object;
  2、将这个对象的__proto__隐指针指向原型prototype;
  3、执行构造函数,当this被提及的时候,代表新创建的对象;
  4、返回新创建的对象。
  注:倘若在最后return了,那么return的是基本类型,例如3,则无效;否则是引用类型,则返回这个引用类型。

注意第3点了么?

当new后,this代表新创建的对象。so,我们可以利用闭包,在类中声明一个变量instance来引用创建的实例。然后再重写类,就OK啦。

如下:

function singletonAccepter( args ){
    var instance = null;
    var args = args || {};
    this.name = args.name || ‘Monkey‘;
    this.age = args.age || 24;
    //将instance引用创建的实例this
    instance = this;
    //重写构造函数
    singletonAccepter = function(){
        return instance;
    }
};
singletonAccepter.prototype = {
    constructor: singletonAccepter,
    displayInfo: function(){
        console.log(‘name: ‘ + this.name + ‘   age: ‘ + this.age);
    }
};

时间: 2024-10-17 15:40:57

JavaScript实战的相关文章

JavaScript实战(带收放动画效果的导航菜单)

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏服:http://www.cnblogs.com/susufufu/p/5768402.html ) 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-)) 动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到‘首页导航’,显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果! 如何

Javascript实战开发:教你使用raphael.js绘制中国地图

最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

《javascript 实战》读书笔记

是不是每本javascript的书都会讲下javascript的历史,以澄清它与java的关系?不过,了解一门语言的历史也是很有必要的吧,记得有句话说:你对过去观察的越久,你对未来就看的越远. javascript的创作者是:Brendan Eich,1995年编写完成,语言最初叫LiveWire,后来改称为LiveScript.至于后来为什么就变成javascript,是不是当时Java很热门? 1995年12月4日,Netscape和Sun联合发布了javascript. 1996年,jav

JavaScript实战项目:移动端 Touch 轮播图

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"

CSS3实战开发:仿天猫首页图片展示动画特效实战开发

各位网友大家好,我是陌上花会开,人称陌陌.今天我带领大家开发一个仿天猫首页图片展示动画特效的案例.一如往常,我既不提供源码给大家,也不提供Demo给大家,只是希望大家能跟着我的讲解,然后将代码一步步复制到本地,本人可以保证,页面上的代码复制到本地,绝对百分百运行,且得到与陌陌一样的运行效果.我这么做只为激起大伙的动手能力,望大家能明白我的用心. 好了,不废话了,直接本篇的实战开发吧. 我们看一下我们今天要做的实战案例效果图: 1. 鼠标划过前: 2. 鼠标划过右侧的图片时: 可能大伙看这个静态截

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

技术非常多.样例非常多,仅仅好慢慢学,慢慢实践.!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScript 实现的照片展示 构建软件设计的方法有两种:一种是把软件做得非常easy以至于明显找不到缺陷.还有一种是把它 做得非常复杂以至于找不到明显的缺陷. --C.A.R.Hoare,1980 年图灵奖获得者 在这个自拍自恋的时代,照片是要展示的.在前面的章节里已经解说了事件的绑定.本章主要利用前

【吐血推荐】牛人收集的163个Javascript学习教程pdf电子书资源合集

不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf 26.02 MB   5天驾驭JQuery教程.pdf 1.08 MB   ACCP软件开发初级程序员-使用Javascript增强交互效果-北大青鸟.pdf 51.70 MB   Ajax+PHP程序设计实战详解.pdf 84.29 MB   Ajax实战中文版.pdf 2.48 MB   Aj

JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记2 3.3 响应鼠标动作 图3-2的效果已经有了,须要鼠标来操作展示想看的照片.这就须要在对应的地方加上事件. 3.3.1 响应小照片单击动作 在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法.在单击小图片时要显示大图片.

最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)

其他网站开发相关资料            超强HTML和xhtml,CSS精品学习资料下载汇总                                               最新html5以及css3资源下载汇总                                               Dreamweaver 教程汇总 索引: JavaScript初学者及参考必备 Javascript高级进阶 AJAX (Asynchronous JavaScript and