美文网首页让前端飞程序员
web前端进阶之js设计模式之设计原则篇

web前端进阶之js设计模式之设计原则篇

作者: jia林 | 来源:发表于2018-07-31 19:39 被阅读51次

    何为设计?

    • 按照一种思路或者标准来实现功能
    • 功能相同,可以有不同设计方案来实现
    • 伴随着需求增加,设计的作用才能体现出来
    设计准则(根据UNIX/LINUX设计哲学整理而得)

    1、小即是美(一个功能尽量做得小而精)
    2、让每个程序只做好一件事(小功能组合起来就是一个大功能)
    3、快速建立原型(先满足用户基本需求,再根据反馈,不断迭代与升级)
    4、舍弃高效率而取可移植性(效率高不可复用和效率低可复用之间,会选择后者)
    5、采用纯文本来存储数据,而非二进制
    6、充分利用软件的杠杆效应(软件复用)
    7、使用shell脚本来提高杠杆效应和可移植性
    8、避免强制性的用户界面,系统和用户界面分开(比如linux的服务器界面就是命令行)
    9、让每个程序都成为过滤器(把数据放大A程序里面处理,结果出来后再放到B程序里面处理,比如在文件夹里面查找文件)

    小准则

    1、允许用户定制环境(自己可以进行配置)
    2、 尽量使操作系统内核小而轻量化(内核是内核,工具是工具,拆分开)
    3、使用小写字母并尽量简短(命名规范)
    4、沉默是金(有结果就输出,没结果保持沉默,比如linux里面查找文件,没找到相对应的文件,就什么都不会显示)
    5、各部分之和大于整体(以小的个体组成大的整体)
    6、寻求90%的解决方案(不可能满足所有人,根据二八定律,花20%的成本解决80%的需求)

    SOLID五大设计原则

    1、S(Single responsibility principle)——单一职责原则
    • 一个程序只做好一件事
    • 如果功能过于复杂就拆分开,每个部分保持独立
    2、O(Open Closed Principle)——开放封闭原则
    • 面向对象的核心
    • 对扩展开放,对修改封闭
    • 增加需求时,扩展新代码,而非修改已有代码
    3、L(Liskov Substitution Principle, LSP)——李氏置换原则
    • 子类能覆盖父类
    • 父类能出现的地方子类就能出现
    • js中使用功能较少(弱类型 & 继承使用较少)
    4、I (Interface Segregation Principle)——接口独立原则
    • 保持接口的单一独立
    • js中没有接口概念(typescript例外)
    • 类似单一职责原则,这里更关注接口
    5、D(Dependence Inversion Principle ,DIP)——依赖倒置原则
    • 面向接口编程,依赖于抽象而不依赖于具体
    • 使用方只关注接口而不关注具体类的实现
    • js中使用较少(没有接口概念,弱类型)

    前端js用的最多的是S、O原则,用Promise举例说明

    function loadImg(src){
            var promise = new Promise(function(resolve,reject){
                var img = document.createElement('img')
                img.onload = function(){
                    resolve(img)
                }
                img.onerror = function(){
                    reject('图片加载失败')
                }
                img.src = src
            })
            return promise
        }
        var src = "https://goss.veer.com/creative/vcg/veer/800water/veer-200000357.jpg";
        var result = loadImg(src)
    
        // 1、这里就体现了单一原则,每个then只做一件事
        // 2、开放封闭原则,如果有新的需求加第三个then即可
        // 这里说明一点,比起jquery的ajax,将所有逻辑写到一个函数里,这里才能体现出面向对象思想
        result.then(function(img){
            console.log(img.width)
            // return img的意思是下一个then也需要img参数
            return img
        }).then(function(img){
            console.log(img.height)
        }).catch(function(ex){
            // 捕获异常
            console.log(ex)
        }) 
    
    • 总结
      1、单一职责原则:每个then中的逻辑只做好一件事
      2、开放封闭原则 如果新增需求,扩展then

    相关文章

      网友评论

        本文标题:web前端进阶之js设计模式之设计原则篇

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