设计模式之单例模式与场景实践

单例介绍

上次总结了设计模式中的module模式,可能没有真真正正的使用在场景中,发现效果并不好,想要使用起来却不那么得心应手,

所以这次我打算换一种方式~~从简单的场景中来看单例模式,

因为JavaScript非常灵活,所以在使用设计模式的时候也带来了很强的灵活性,实现单例的方法也有很多,那就需要我们把握住单例模式的核心。

单例模式介绍:

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

在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象

作用:

  1、模块间通信

  2、系统中某各类的对象只能存在一个

  3、保护自己的属性和方法,保证了所有的对象访问的都是同一个实例

注意事项:

  1、注意this的使用

  2、闭包容易造成内存泄露,不需要的尽快处理等待回收

简单场景

我们先来实现一个标准的单例模式:

  1、如果实例存在就返回,实例不存在就创建新实例;

  2、从全局命名空间中隔离出代码,从而为函数提供单一访问点:

        var mySingleton = (function () {
            // 实例保持Singleton的一个引用
            let instance;

            // Singleton
            // 私有方法和变量
            function init() {
                function privateMethod() {
                    console.log('I am private');
                }
                const privateVariable = ' I am also private ';
                const privateRandomNumber = Math.random();
                // 公有方法和变量
                return {
                    publicMethod:function(){
                        console.log('I am public');
                    },
                    getRandomNumber:function(){
                        return privateRandomNumber; 
                    }
                }
            }

            // 获取Singleton实例,如果存在就返回,不存在就创建新实例
            return {
                getInstance:function(){
                    if(!instance){
                        instance = init();
                    }
                    return instance;
                }
            }

        })();

        // 测试
       const singleA = mySingleton.getInstance();
       const singleB = mySingleton.getInstance();
       console.log( singleA.getRandomNumber() === singleB.getRandomNumber());  // true
       console.log(singleA.publicMethod())  // I am public

下面写一个我们在场景中经常使用的一种简单的非标准的单例模式类型,

场景一:使用简单的单例模式实现一个可编辑表格

html

   <table class="table table-bordered" id="js-table-test">
        <tr>
            <td>编号</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>1</td>
            <td>okaychen</td>
        </tr>
        <tr>
            <td>2</td>
            <td>StackOverflowChen</td>
        </tr>
    </table>

没使用单例模式之前,我们可能会这样处理:

   $("#js-table-test td").click(function (argument) {
            var m = $(this).html();
            var s = "<input type='text' value='" + m + "'  />";
            $(this).html(s);
        })
        $("#js-table-test td").on('keyup','input',function(e){
            e.stopPropagation();
            var me = $(this);
            if(e.keyCode==13){
                me.val();
            }
        })

那么就让我们对比一下使用单例的代码 思路>>

1、使用自执行函数传递参数$,减少查询次数

2、使用简单的单例模式,为之后修改或者模块化打基础

提供单一访问点init通过datas共享数据,render封装对应的元素,bind来绑定事件,_do来规范私有事件;

  (function ($) {
            // 命名空间
            var index = {
                init: function () {
                    // 入口
                    var me = this;
                    me.render();
                    me.bind();
                },
                datas: {
                    // 共享数据
                    num: 1
                },
                render: function () {
                    // 封装对应的元素
                    var me = this;
                    me.test = $('#js-table-test td');
                },
                bind: function () {
                    // 绑定事件
                    var me = this;
                    me.test.on('click', $.proxy(me['_do'], this));
                },
                _do: function (e) {
                    // 私有事件
                    var me = this;
                    var m = $(e.target).text();
                    var s = "<input type='text' value='" + m + "'  />";
                    $(e.target).html(s);
                    console.log(me.datas.num ++)
                }
            }
            index.init();
        })(jQuery);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏你不就像风一样

Java多线程编程核心技术(二)对象及变量的并发访问

本文主要介绍Java多线程中的同步,也就是如何在Java语言中写出线程安全的程序,如何在Java语言中解决非线程安全的相关问题。阅读本文应该着重掌握如下技术点:

673
来自专栏栗霖积跬步之旅

java多线程编程核心技术——第二章总结

第一节synchronized同步方法目录 1.1方法内的变量为线程安全的 1.2实例变量非线程安全 1.3多个对象多个锁 1.4synch...

18410
来自专栏mySoul

脚本化HTTP 取得响应 指定请求

下面将会说明在没有导致web浏览器重新加载任何窗口或者窗体的情况下,脚本实现web浏览器和服务器之间的通信。

874
来自专栏专注 Java 基础分享

Spring框架学习之高级依赖关系配置(二)

     紧接着上篇内容,本篇文章将主要介绍XML Schema的简化配置和使用SpEL表达式语言来优化我们的配置文件。 一、基于XML Schema的简化配置...

18210
来自专栏mini188

基于 Asp.Net的 Comet 技术解析

Comet技术原理 来自维基百科:Comet是一种用于web的技术,能使服务器能实时地将更新的信息传送到客户端,而无须客户端发出请求,目前有两种实现方式,长轮询...

1848
来自专栏WindCoder

Java基础小结(二)

继承可以使用 extends 和 implements 这两个关键字来实现继承, 而且所有的类都是继承于 java.lang.Object,当一个类没有继承的两...

401
来自专栏数据处理

Scala函数

1595
来自专栏前端杂货铺

巧妙复制一个流

实际业务中可能出现重复消费一个可读流的情况,比如在前置过滤器解析请求体,拿到body进行相关权限及身份认证;认证通过后框架或者后置过滤器再次解析请求体传递给业务...

683
来自专栏用户2442861的专栏

Java多线程学习(吐血超详细总结)

http://blog.csdn.net/evankaka/article/details/44153709

621
来自专栏Android 研究

Android Handler机制5之Message简介与消息对象对象池

至此Java层面Handler机制中最重要的四个类大家有了一个初步印象。下面咱们源码跟踪一下

512

扫码关注云+社区