美文网首页
JavaScript设计模式之设计原则

JavaScript设计模式之设计原则

作者: 喜剧之王爱创作 | 来源:发表于2020-10-30 16:03 被阅读0次

设计原则

在本次设计模式系列的文章中,我们先讲解了面向对象,作为一个后续设计模式的基础,想要进一步去学习设计模式,我们还需要了解设计原则。也就是,我们到底是根据什么样的原则去做不写不同的设计模式的。

何为设计?

  • 即按照某一种思路或者标准来实现功能
  • 功能相同,可以有不同设计方案来实现
  • 伴随着需求的增加,设计的作用才能体现出来

设计准则

接下来,要总结的设计准则不是我个人的总结,而是《UNIX/LINUX设计哲学》中的总结,我这里略列出来,出相关解读,所以这些总结的权威性还是比较高的,我们在设计时,对权威性的依赖还是比较高的,所以,要听权威哦!

  1. 小即是美
  2. 让每个程序只做好一件事

以上两点,意在表达,程序应该专心做好一件事就好了,提倡小而精而非大而全

  1. 快速建立原型(有小到大,不断迭代,而非一直蒙头干)
  2. 舍弃高效率而取可移植性(复用性)
  3. 采用纯文本来存储数据(可读性)
  4. 充分利用软件杠杆效应(软件复用)
  5. 使用shell脚本来提高杠杆效应和可移植性(具体方案)
  6. 避免强制性的用户界面
  7. 让每个程序都称为过滤器
  8. 允许用户定制环境
  9. 尽量使操作系统内核小而轻量化
  10. 使用小写字母并尽量简短
  11. 沉默是金(准确的输出,对于不满足要求的输入可以不输出,而不是随意输出)
  12. 各部分之和大于整体
  13. 寻求90%的解决方案

上面我们罗列了十五种设计准则,其中有的准则是需要大家去结合日常的开发区感受的,在文章中就不适合做出示例了,比如“小即是美”准则,我们不可能在文章中写一个很复杂的程序去对比,这只有在日常的开发中大家去自己感受。接下来我们就讲解一下“五大设计准则”。

S O L I D 五大设计原则

  • S-单一职责原则
  • O-开放封闭原则
  • L-李氏置换原则
  • I-接口独立原则
  • D-接口独立原则
S-单一职责原则
  • 一个程序只做好一件事
  • 如果功能过于复杂就拆分开,每个部分保持独立
O-开放封闭原则
  • 对扩展开放,对修改封闭
  • 增加需求时,扩展新代码,而非修改已有代码
  • 这是软件设计的终极目标
L-李氏置换原则
  • 子类能覆盖父类
  • 父类能出现的地方子类就能出现
  • JS中使用较少(弱类型&继承使用较少)
I-接口独立原则
  • 保持接口的单一独立,避免出现“胖接口”
  • JS是没有接口概念的(typeScript例外),使用较少
  • 类似于单一职责原则,这里更关注接口
D-依赖倒置原则
  • 面向接口编程,依赖于抽象而不依赖于具体
  • 使用方只关注接口而不关注具体类的实现
  • JS中使用较少(没有接口概念&弱类型)

上面我们最五大设计原则做了一个概念的阐述,其中

  • S O 体现较多,我们将做详细的介绍
  • L I D 在JS中体现较少,我们可以借助TS对其概念有一个了解即可
使用Promise来说明S O

本文主要是一些理论, 看起来难免会乏味,下面我用一段前端代码来说明一下五大设计原则中的S 和 O

function loadImg (src) {
    return new Promise(function(resolve, reject){
        var img = document.createElement('img')
        img.onload = function () {
            resolve(img)
        }
        img.onerror = function() {
            reject('图片加载失败')
        }
        img.src = src
    })
}
var src = 'http://www.xxxxx.com/aa/bb'
var result = loadImg(src)

result.then(function(img){
    console.log('加载成功要做的事')
    return img
}).then(function(){
    console.log('要做的另外一件是(需求扩展)')
}).catch(function(err){
    console.log(err)
})

上面是一个简单的异步加载图片的例子,其中,我们使用其返回的Promise,利用其then来处理不同的需求,并且不改变原有的代码。这就是一种S O 的设计原则。结果如下:

当然了,我们在正式开发的过程中,不一定非得使用Promise来做这样的设计,也可以使用模块化,将不同功能的代码分开。并保持一个相互独立而又可扩展的特性。
其中,上面代码中所体现的设计原则:

  • 单一职责原则: 没一个then中的逻辑,只做好一件事
  • 开放封闭原则:如果新增需求,扩展then
  • 对扩展开放,对修改封闭

写在后面

本文以理论为主,为大家介绍了各种设计准则和五大设计原则,其中也使用一些前端代码来说明,其实针对本文的标题,如果要把标题彻底弄明白,写一本书也是可以的。因为我们的目的是给大家将JS中的设计模式,所以对于有些概念就只是了解即可,最终的目的是为了让大家在学习设计模式的时候,有一个理论根据。大家可以在学习和开发的过程中,经常来回顾一下这篇文章,看是不是满足里面的原则或准则呢?

相关文章

  • [记录]我的设计模式学习路径

    书单 《JavaScript 设计模式与开发实践》《设计模式之美》《掘金小册-JavaScript 设计模式核⼼原...

  • 设计模式之开闭原则

    相关链接:0. 设计模式之六大原则总结1. 设计模式之单一职责原则2. 设计模式之里式替换原则3. 设计模式之依赖...

  • 设计模式之迪米特法则

    相关链接:0. 设计模式之六大原则总结1. 设计模式之单一职责原则2. 设计模式之里式替换原则3. 设计模式之依赖...

  • 设计模式之依赖倒置原则

    相关链接:0. 设计模式之六大原则总结1. 设计模式之单一职责原则2. 设计模式之里式替换原则3. 设计模式之依赖...

  • 设计模式之接口隔离原则

    相关链接:0. 设计模式之六大原则总结1. 设计模式之单一职责原则2. 设计模式之里式替换原则3. 设计模式之依赖...

  • 设计模式之单一职责原则

    相关链接:0. 设计模式之六大原则总结1. 设计模式之单一职责原则2. 设计模式之里式替换原则3. 设计模式之依赖...

  • 设计模式之里式替换原则

    相关链接:0. 设计模式之六大原则总结1. 设计模式之单一职责原则2. 设计模式之里式替换原则3. 设计模式之依赖...

  • JavaScript设计模式之设计原则

    设计原则 在本次设计模式系列的文章中,我们先讲解了面向对象,作为一个后续设计模式的基础,想要进一步去学习设计模式,...

  • 无标题文章

    设计模式之六大原则(转载) 设计模式之六大原则(转载) 关于设计模式的六大设计原则的资料网上很多,但是很多地方解释...

  • 设计模式目录

    1. 设计模式中类的关系和六大设计原则 一、设计模式简介二、设计模式中类的关系三、设计模式的六大设计原则之单一职责...

网友评论

      本文标题:JavaScript设计模式之设计原则

      本文链接:https://www.haomeiwen.com/subject/nglkvktx.html