js设计模式:简单工厂和单例

mochixuan 发布于2019-08-23 15:57 / 1071人阅读

摘要：写在前面一些关于自己在代码设计思维方面的学习记录面向对象的一些理解实例代码就不上了就写一些总结封装提供属性和方法的权限管理只对外暴露接口具体的功能在内部实现继承子类继承父类的方法和属性可以抽离公共代码减少代码冗余多态同一个接口在子类中的不同

写在前面:
一些关于自己在代码设计思维方面的学习记录

面向对象的一些理解

实例代码就不上了, 就写一些总结

封装: 提供属性和方法的权限管理, 只对外暴露接口, 具体的功能在内部实现
继承: 子类继承父类的方法和属性, 可以抽离公共代码,减少代码冗余
多态: 同一个接口在子类中的不同的实现, 可以对父类中方法进行扩展

ES6中类的设计分析

锻炼自己的抽象设计能力, 通过UML类图来展示类之间的关系

一般步骤

梳理各给类之间的关联关系:

抽离父类, 抽象子类, 分析关联类(相互引用的关系)

要理解以下几点:
// 每个独立的对象都可以抽象为一个类
// 每个类都要干自己该干的事(方法), 都有自己的特性(属性)
// 关联类: 一个类需要用到另一个类中的东西; 或者说一个类它可以作为另一个类的属性来用

简单工厂模式

我们不需要关心业务的具体实现过程, 最后只需要给你一个模型,你输入参数就可以套用了;下面都是结合实例来展示我的理解

// 举个栗子
// 食品实例生成的详细过程
class Food {
    constructor(name, type) {
        this.name = name // 食品
        this.type = type // 食品类型
    }

    desc() {
        console.log(`我是${this.name},属于${this.type}类型`);
    }
    
}

class FoodFactory {
    // ES6中静态方法不会被实例调用,可以被类调用
    static create(name, type) {
        // 创建一种食品实例
        return new Food(name, type)
    }
}

// 工厂开始生产食品实例了
FoodFactory.create("核桃", "坚果").desc() // 我是核桃, 属于坚果类型
FoodFactory.create("旺仔", "饮品").desc() // 我是旺仔, 属于饮品类型
// 这样我们就可以 生成出我们想要的食品, 只要你给我们 一个名称和类型

单例模式

就是保证全局只有一个对象可以访问; 像全局缓存、全局状态管理时,都可以使用, 实现数据共享

我们要确保一个类只能初始化一个实例, 有就直接返回, 没有就初始化

如购物车, 登录框只有一个, jQuery的 $, vuex的store都是单例模式的思想

class Singleton {
    // js模拟
    constructor() {}

    login() {
        console.log("login...");
    }
}

// 给类挂载一个静态方法, 只有一个
// 自执行函数: 只是为了将变量保存在 函数的作用域中, 避免污染而已
Singleton.singleInstance = (function () {
            // 通过闭包实现: 类似通过一个全局变量来存储这个实例
            let instance;  // 保存创建好的实例
            return function() {
                if (!instance) {
                    // 如果没有创建, 就创建一个
                    instance = new Singleton()
                }
                return instance
            }
        })()
// 通过调用静态方法来创建单实例
let single11 = Singleton.singleInstance()
let single22 = Singleton.singleInstance()
// 通过调用类 初始化的实例
let single3333 = new Singleton()
single11.login();
single22.login();
console.log(single11 === single22);  // ture
console.log(single11 === single3333); // false

demo演示, 页面登录框

class LoginForm {

    constructor() {
        this.state = "hide" // 初始状态
    }

    // 显示
    show() {
        if (this.state === "show") {
            console.log("登录框已经显示");
            return ;
        }
        this.state = "show";
        console.log("登录框显示了, 请输入");
    }
    // 隐藏
    hide() {
        if (this.state === "hide") {
            console.log("登录框已隐藏");
            return ;
        }
        this.state = "hide";
        console.log("登录框隐藏");
    }
}

// 添加单例方法
// 通过这个方法, 我初始化出来的 都是指向同一个实例对象
LoginForm.initSingle = (function () {
    let instance; // 存储实例对象
    return function () {
        if (!instance) {
            instance = new LoginForm()
        }
        return instance
    }
})()

// 当同时对一个实例进行操作时:

// 页面1的登陆操作
let login1 = LoginForm.initSingle()
login1.show()

// 页面2的登陆操作
let login2 = LoginForm.initSingle()
login2.show() // 登陆框已经显示, 页面2也是对同一实例进行访问,就会弹出错误
login2.hide()

// 单例模式 就是实例化出来的对象 都指向同一实例, 对同一实例进行操作, 
// 实现了 数据共享

GPU云服务器云服务器简单工厂单例模式单例模式实现单例模式总结

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

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

设计模式之工厂和单例

摘要：工厂模式实例定义一个接口定义一个实现类定义一个实现类根据不同需求返回不同实现类的方法运行结果单利模式实例懒汉式饿汉式工厂模式实例 //定义一个接口：Vehicle interface Vehicle{ void work(); } //定义一个实现类：Car class Car implements Vehicle{ @Override public void wo...

Nosee 2019-08-16 10:36 评论0 收藏0
细谈JavaScript中的一些设计模式

摘要：注意事项声明函数时候处理业务逻辑区分和单例的区别，配合单例实现初始化构造函数大写字母开头推荐注意的成本。简单工厂模式使用一个类通常为单体来生成实例。 @(书籍阅读)[JavaScript, 设计模式] 常见设计模式一直对设计模式不太懂，花了一下午加一晚上的时间，好好的看了看各种设计模式，并总结了一下。设计模式简介设计模式概念解读设计模式的发展与在JavaScript中的应用 ...

30e8336b8229 2019-08-19 17:47 评论0 收藏0
第5项：固定资源首选使用依赖注入

摘要：满足此要求的简单模式是在创建新实例时将资源传递给构造函数。依赖注入同样适用于构造函数静态工厂第项和构建器第项。将资源工厂传递给构造函数就会变成一个有用的模式。这种做法称为依赖注入，将极大地增强类的灵活性，可重用性和可测试性。许多类依赖于一个或多个底层资源。例如，拼写检查器依赖于字典。常见的做法是将这些类实现为静态实用程序类(第4项)： // Inappropriate use ...

KnewOne 2019-08-16 16:09 评论0 收藏0
设计模式之门面模式

摘要：定义与类型定义又叫门面模式，提供了一个统一的接口，用来访问子系统中的一群接口外观模式定义了一个高层接口，让子系统更容易使用类型结构型类图门面模式是对系统复杂的关系处理做了一个封装，对外提供一个简单的接口，成员介绍子系统被门面模式封装的子系统 0x01.定义与类型定义：又叫门面模式，提供了一个统一的接口，用来访问子系统中的一群接口外观模式定义了一个高层接口，让子系统更容易使用类型...

Chiclaim 2019-08-16 18:33 评论0 收藏0
[译]Javascript中的单例模式

摘要：原文单例模式被熟知是因为它把一个类的实例化限制在只有一个对象。这在中也是可以实现的。单例和静态对象都很有用，但是不能过度使用。实践中，当我们在整个系统中只需要一个对象与其他对象通信的时候，单例模式是非常有用的。原文：The Single Pattern 单例模式被熟知是因为它把一个类的实例化限制在只有一个对象。传统的实现方式是：创建一个类，这个类里面有一个方法在对象不存在的时候创造一...

godlong_X 2019-08-21 10:46 评论0 收藏0