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

单例介绍

上次总结了设计模式中的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 条评论
登录 后参与评论

相关文章

来自专栏Android开发经验

从源码梳理Retrofit网络请求过程

14240
来自专栏郭霖

Android安全攻防战,反编译与混淆技术完全解析(下)

在上一篇文章当中,我们学习了Android程序反编译方面的知识,包括反编译代码、反编译资源、以及重新打包等内容。通过这些内容我们也能看出来,其实我们的程序并没有...

36170
来自专栏java一日一条

Java接口回调机制详解

最近在看android fragment与Activity进行数据传递的部分,看到了接口回调的内容,今天来总结一下。

16830
来自专栏项勇

笔记 34 | java线程之Thread线程优先

18250
来自专栏orientlu

FreeRTOS 消息队列

上面这几中方式中, 除了消息通知, 其他几种实现都是基于消息队列。消息队列作为主要的通信方式, 支持在任务间, 任务和中断间传递消息内容。 这一章介绍 Fre...

55020
来自专栏lhyt前端之路

node框架express的研究0.前言1. 从入口开始1.1入口1.2 proto1.2.1 app.init方法1.2.2 app.handle方法1.2.3 每一个method的处理1.2.4

在node中,express可以说是node中的jQuery了,简单粗暴,容易上手,用过即会,那么我们来试一下怎么实现。下面我们基于4.16.2版本进行研究

9230
来自专栏yukong的小专栏

【java并发编程实战1】何为线程安全性线程安全性

多线程问题,一直是我们老生常谈的一个问题,在面试中也会被经常问到,如何去学习理解多线程,何为线程安全性,那么大家跟我的脚步一起来学习一下。

14130
来自专栏Android 研究

Retrofit解析2之使用简介

前面介绍完RESTful之后,我们先来初步认识下Retrofit的使用"姿势"。本文的主要内容如下:

90630
来自专栏大闲人柴毛毛

三句话搞定适配器模式

适配器模式的官方定义: 将一个与当前类无法兼容的接口转换成能够兼容当前类的接口。 适配器模式的大白话: 现在有一个第三方类/我们项目组中别人写的类放在我们面前,...

35560
来自专栏jeremy的技术点滴

java中用好cache

28970

扫码关注云+社区

领取腾讯云代金券