前端中的设计模式——单例模式

  1. 什么是单例模式:

    保证一个类仅有一个实例,并提供一个访问它的全局访问点.

  2. 为什么需要单例模式:

    • 为了将“描述同一件事务的属性或者特征归纳汇总在一起”,同时避免全局变量污染.
    • 模块化开发之间数据的共享.(状态管理)
  3. 单例模式的优点:

    • 对于频繁使用的对象,可以省略创建对象所花费的时间.
    • 由于 new 操作的次数减少,对系统内存的使用频率也会降低.
    • 全局唯一性,可以保证全局数据和功能的共享.
  4. 常见的单例模式:

    • 浏览器中的window对象
    • 类库中的全局对象,例如Vuex、Redux
    • 小程序中的App对象.(getApp()方法其实就是获取唯一的App实例)
  5. 单例模式的实现:

    class God {
      constructor() {
        this.instance = null;
        this.human = [];
      }
    
      static getInstance() {
        const { instance } = this;
        this.instance =  instance ? instance : new God();
        return this.instance;
      }
    
      create(item) {
        this.human.push(item);
      }
    }
    
  6. 纯净的单例模式:

    class God {
    
      static instance = null;
    
      constructor() {
        let { instance } = God;
        this.human = [];
        instance =  instance ? instance : this;
        return instance;
      }
    
      create(item) {
        this.human.push(item);
      }
    }
    
  7. 应用场景:

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端框架也可以应用设计模式来帮助开发人员更好地组织和管理代码。有一些常见的设计模式前端开发被广泛使用,例如: 1. MVC模式(Model-View-Controller):MVC模式是一种常见的架构模式,用于将应用程序的逻辑、数据和用户界面分离。在前端开发,可以使用MVC模式来将数据、视图和控制器分离,以便更好地组织和管理代码。 2. 观察者模式(Observer Pattern):观察者模式用于实现对象之间的一对多依赖关系。在前端开发,观察者模式可以用于实现事件监听和响应,例如当用户点击按钮时,触发相应的事件处理函数。 3. 单例模式(Singleton Pattern):单例模式用于确保一个类只有一个实例,并提供一个全局访问点。在前端开发单例模式可以用于管理全局状态、共享资源或提供统一的配置管理。 4. 工厂模式(Factory Pattern):工厂模式用于创建对象的过程,将创建逻辑和具体对象的实现分离。在前端开发,工厂模式可以用于创建不同类型的对象,例如根据用户的角色类型创建不同的导航菜单。 以上只是几个常见的设计模式前端开发的应用,实际上还有更多的设计模式可以用于解决特定的问题。对于前端开发人员来说,了解不同的设计模式,并根据具体的需求进行选择和应用,可以帮助提高代码的可维护性和扩展性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [前端开发常用的几种设计模式](https://blog.csdn.net/shadowfall/article/details/112001884)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值