八大最常用的JavaScript设计模式

最新推荐文章于 2024-10-05 21:24:40 发布

千锋HTML5大前端

最新推荐文章于 2024-10-05 21:24:40 发布

阅读量955

点赞数

分类专栏：前端技术文章文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/sdasadasds/article/details/125062773

版权

本文详细介绍了JavaScript的八大最常用设计模式：装饰器模式、工厂模式、单例模式、适配器模式、发布订阅模式、策略模式、外观模式和迭代器模式。通过实例解析了每个模式的概念、应用场景及优缺点，旨在提高代码的可复用性、可扩展性和性能。

摘要由CSDN通过智能技术生成

八大最常用的JavaScript设计模式

设计模式（Design pattern） 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、可维护性、灵活性好。我们使用设计模式最终的目的是实现代码的 高内聚 和 低耦合。通俗一点讲的话打比方面试官经常会问你如何让代码有健壮性。其实把代码中的变与不变分离，确保变化的部分灵活、不变的部分稳定，这样的封装变化就是代码健壮性的关键。而设计模式的出现，就是帮我们写出这样的代码。设计模式就是解决编程里某类问题的通用模板，总结出来的代码套路就是设计模式。本文章总结下JS在工作中常用的设计模式，以帮助大家提高代码性能，增强工作效率！

JavaScript设计模式（一）装饰器模式

圣诞节要到了，许多家庭会买一颗松树装上彩灯，一闪一闪亮晶晶然后摇身一变成了圣诞树。这里的彩灯就是装饰器，他不会对松树原有的功能产生影响。（还是本来的树）

这种给对象动态地增加职责的方式称为装饰器(decorator)模式。装饰器模式能够在不改变对象自身的基础上，在程序运行期间给对象动态地添加职责。

应用

当我们接手老代码，需要对它已有的功能做个拓展。

var horribleCode = function(){
   

  console.log(’我是一堆你看不懂的老逻辑')

}

// 改成:

var horribleCode = function(){
   

  console.log('我是一堆你看不懂的老逻辑')

  console.log('我是新的逻辑')
}

这样做有很多的问题。直接去修改已有的函数体，违背了我们的“开放封闭原则”；往一个函数体里塞这么多逻辑，违背了我们的“单一职责原则”。

为了不被已有的业务逻辑干扰，将旧逻辑与新逻辑分离，把旧逻辑抽出去：

var horribleCode = function(){
   
  console.log(’我是一堆你看不懂的老逻辑')

}

var _horribleCode = horribleCode

horribleCode = function() {
   

    _horribleCode()
    console.log('我是新的逻辑')

}

horribleCode()

这样就完成了旧代码的运用以及新代码的无伤添加了！！！

JavaScript设计模式（二）工厂模式

先来理解一个概念 —— 构造器模式

你开了家动物园，只有两只动物，你可能会这样录入系统：

const monkey = {
   
    name: '悟空'，
    age: '1'
}

const tiger = {
   
    name: '泰格伍兹'，
    age: '3'
}

如果你的动物越来越多，对象字面量也会越来越多，这个时候构造函数可以自动创建动物对象

    this.name = name
    this.age = age
}

const animal = new Animal(name, age) //Animal 就是一个构造器

像 Animal 这样当新建对象的内存被分配后，用来初始化该对象的特殊函数，就叫做构造器。在 JavaScript 中，我们使用构造函数去初始化对象，就是应用了构造器模式。

可以看出每个实例化后对象（ animal ）属性的key (name,age) 是不变的，对应的value（空空，泰格伍兹）是变的。所以构造器将赋值过程封装，确保了每个对象属性固定，开放了取值确保个性灵活。

简单工厂模式

动物园要求根据每个动物的食性喜好来分配不同的食物。这样之前封装的Animal 就不能直接用了，我们重新封装的构造器。

 this.name = name
    this.age = age
    this.favorite = 'fruit'
    this.food = [apple, banaba]
}

function Carnivore (name,age) {
   
    this.name = name
    this.age = age
    this.favorite = 'meat'
    this.food = [beef, pork]
}

根据喜好可以分配相应的

function Factory(name, age, favorite) {
   
    switch(career) {
   
        case 'fruit':
            return new Vegetarian(name, age) 
            break
        case 'meat':
            return new Carnivore(name, age)
            break
        ...
}

总结

工厂模式：将创建对象的过程单独封装。

应用场景：有构造函数的地方、写了大量构造函数、调用了大量的 new的情况下

JavaScript设计模式（三）单例模式

单例模式

保证仅有一个实例，并提供一个访问它的全局访问点，这样的模式就叫做单例模式。然后性能得到优化！

以下代码我们做一个弹窗如果实例已经创建过就无需再次创建这就是单例！

  <body>
    <input type="button" id="btn1" value="成功">
    <input type="button" id="btn2" value="失败">
    <input type="button" id="btn3" value="警告">
</body>
<script>
    const obj = {
   
        init:function(){
   
            this.ele = document.createElement

最低0.47元/天解锁文章