资讯专栏INFORMATION COLUMN

js常用设计模式实现(一)单例模式

EscapedDog / 1630人阅读

摘要:什么是设计模式设计模式是一种能够被反复使用,符合面向对象特性的代码设计经验的总结,合理的使用设计模式能够让你得代码更容易维护和可靠设计模式的类型共分为创建型模式,结构型模式,行为型模式三种创建型模式创建型模式是对一个类的实例化过程进行了抽象

什么是设计模式
设计模式是一种能够被反复使用,符合面向对象特性的代码设计经验的总结,合理的使用设计模式能够让你得代码更容易维护和可靠

设计模式的类型共分为创建型模式,结构型模式,行为型模式三种

创建型模式

创建型模式是对一个类的实例化过程进行了抽象,把对象的创建和对象的使用进行了分离,创建模式有

单例模式

抽象工厂模式

建造者模式

工厂模式

原型模式

单例模式
单例模式的定义是保证一个类仅有一个实例,单例模式它必须自行创建这个实例,并提供一个访问他的全局的访问点
es5的实现
var only = function(data) {
    this.data = data;
    this.Instance = null;
}
only.go = function(data) {
    if(!this.Instance) {
        this.Instance = new only(data);
    }
    return this.Instance;
}
let obj1 = only.go("1")
let obj2 = only.go("2")
console.log(obj1 === obj2);
console.log(obj1);
console.log(obj2);
es6
class only {
    constructor(data) {
        if (only.prototype.Instance === undefined) {
            this.data = data;
            only.prototype.Instance = this;
        }
        return only.prototype.Instance;
    }
}

let ob1 = new only("a");
let ob2 = new only("b");
ob2.init = "init";

console.log(ob1 === ob2);
console.log(ob1);
console.log(ob2);

上边的代码中,无论怎么new,其结果都是唯一的那个实例

单例模式的优缺点

单例模式,因为他的实例是唯一的,所以完全可以通过创建的时候,严格的去控制怎么去创建和访问或者说抛出错误,如果存在频繁的创建和销毁的操作的时候,单例模式事可以提高性能的

但是同样的,单纯的单例模式中是没有抽象操作的,所以说单例模式是一个不便于扩展的模式

单例模式的使用场景

举个例子比如说在项目中的某些时候,我们需要一个dom元素,但是这个元素并不存在,我们需要创建他,但是在创建完之后,如果我们再去点这个按钮的时候,如果他再一次的创建dom,显然是不合理的,dom会越来越多一直被创建,那么在这个时候,我们可以使用单例模式来实现我们想要的效果

例子实现

上边的改吧改吧

class only {
    constructor(data) {
        if (only.prototype.Instance === undefined) {
            var div = document.createElement("div");
            div.innerHTML = data;
            only.prototype.Instance = div;
        }
        return only.prototype.Instance;
    }
}

let ob1 = new only("a");
let ob2 = new only("b");
ob2.init = "init";

console.log(ob1 === ob2);
console.log(ob1);
console.log(ob2);

如图

dom元素并不会被重复创建,可以在上边的例子中加一个状态,根据状态判断是否要显示,避免了资源的浪费

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105563.html

相关文章

  • 谈谈JS设计模式和应用场景(单例模式)

    摘要:什么是单例模式单例模式是单例模式,也叫单子模式,是一种常用的软件设计模式。在应用这个模式时,单例对象的类必须保证只有一个实例存在。 什么是单例模式 单例模式是单例模式,也叫单子模式,是一种常用的软件设计模式。 在应用这个模式时,单例对象的类必须保证只有一个实例存在。 许多时候整个系统只需要拥有一个的全局对象,这样有利于我们协调系统整体的行为。。(来源于维基百科) 1.创建单例模式,案...

    MSchumi 评论0 收藏0
  • js设计模式--单例模式

    摘要:文章系列设计模式单例模式设计模式策略模式设计模式代理模式概念单例模式的定义是保证一个类仅有一个实例,并提供一个访问它的全局访问点。在开发中,单例模式的用途同样非常广泛。 前言 本系列文章主要根据《JavaScript设计模式与开发实践》整理而来,其中会加入了一些自己的思考。希望对大家有所帮助。 文章系列 js设计模式--单例模式 js设计模式--策略模式 js设计模式--代理模式 概念...

    CloudwiseAPM 评论0 收藏0
  • 浅谈js单例模式

    摘要:单例模式说到单例设计模式,中经常使用的单例模式通常分两种,懒汉模式和饿汉模式懒汉模式简单写了下私有化构造函数在获取实例的方法中返回实例化对象虽然很多大佬都写过啦,但是小生为了加深记忆便再写一遍虽然实现了单例模式,但是未考虑到线程安全,多个线 java单例模式 说到单例设计模式,Java中经常使用java的单例模式通常分两种,懒汉模式和饿汉模式 懒汉模式 class singleDemo...

    draveness 评论0 收藏0
  • 从ES6重新认识JavaScript设计模式(): 单例模式

    摘要:什么是单例模式单例模式是一种十分常用但却相对而言比较简单的单例模式。对象就是单例模式的体现。总结单例模式虽然简单,但是在项目中的应用场景却是相当多的,单例模式的核心是确保只有一个实例,并提供全局访问。 1. 什么是单例模式? 单例模式是一种十分常用但却相对而言比较简单的单例模式。它是指在一个类只能有一个实例,即使多次实例化该类,也只返回第一次实例化后的实例对象。单例模式不仅能减少不必要...

    G9YH 评论0 收藏0

发表评论

0条评论

EscapedDog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<