admin管理员组

文章数量:1539570

八大最常用的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

本文标签： 最常用模式JavaScript

版权声明：本文标题：八大最常用的JavaScript设计模式 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727008029a1093982.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。