乐趣区

关于javascript:JavaScript-中的-SOLID-原则二O代表什么

jiezi

JavaScript 中的 SOLID 准则：“S”代表什么

你可能曾经理解过一些设计准则或者设计模式，本文次要渐进的解说了 SOLID 准则：

  • 不应用 SOLID 是怎么编写代码的，存在什么问题？
  • 应该应用 SOLID 中的哪个准则？
  • 应用 SOLID 咱们应该如何对代码进行批改？

置信比照和沉迷式的示例会让你更容易了解 SOLID 准则，以及如何利用到代码实际中。

这是 SOLID 的第二篇翻译文章(原文一共五篇)，作者是 serhiirubets，欢送继续关注。

在本文中，咱们将探讨什么是 SOLID 准则，为什么咱们应该应用他们和如何在 JavaScript 中应用他们。

什么是 SOLID

SOLID 是 Robert C. Martin 的前五个面向对象设计准则的首字母缩写词。这些准则的目标是：让你的代码、架构更具可读性、可维护性、灵活性。

开闭准则（Open-Closed Principle）

O – 开闭准则 。实体(类、模块、办法、文件等) 应该对扩大凋谢，对批改敞开。从定义上很难了解，来看几个例子：

假如：咱们有几个不同的形态，圆形、方向、三角形，须要计算他们的面积总和。如何解决呢？

没什么难的，让咱们为每个形态创立一个类，每个类有不同的字段：大小、高度、宽度、半径和类型字段。当计算每个形态的面积时，咱们应用类型字段来辨别。

class Square{constructor(size){
        this.size = size;
        this.type ='square' ;
    }
}

class Circle{constructor(radius) {
        this.radius = radius;
        this.type = 'circle' ;
    }
}

class Rect{constructor(width, height) {
        this.width = width
        this.height = height;
        this.type = 'rect' ;
    }
}

咱们再创立一个函数，来计算面积。

function getTotalAreas (shapes){return shapes.reduce((total, shape) =>{if (shape.type =='square') {total += shape.size * shape.size;}else if (shape.type = 'circle') {total += Math.PI * shape.radius;}else if (shape. type == 'rect') {total += shape.width * shape.height;}
        return total;
    }, 0);
}
getTotalAreas([new Square(5),
    new Circle(4),
    new Rect(7,14)
]);

仿佛看起来并没有什么问题，然而设想一下，如果咱们想增加另一个形态(原型、椭圆、菱形)，咱们应该怎么做？咱们须要为他们中的每一个创立一个新的类，定义类型并在 getTotalAreas 中增加新的 if/else。

留神：

O – 开闭准则 。让咱们再反复一遍：这个准则是指：实体(类、模块、办法等) 应该对扩大凋谢，对批改敞开。

在 getTotalAreas 中，每次增加新的形态都须要进行批改。这不合乎 开闭准则，咱们须要做什么调整？

咱们须要在每个类中创立 getArea 办法(类型字段曾经不再须要，已被删除)。

class Square {constructor(size) {this.size = size;}
    getArea() {return this.size * this.size;}
}
class Circle {constructor(radius) {this.radius = radius;}
    getArea() {return Math.PI * (this.radius * this.radius);
    }
}
class Rect {constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    getArea() {return this.width * this.height;}
}
function getTotalAreas (shapes) {return shapes. reduce((total, shape) => {return total + shape. getArea();
    },0)
}
getTotalAreas([new Square(5),
    new Circle(4),
    new Rect(7,14)
]);

当初咱们曾经遵循了开闭准则，当咱们要增加另一个形态，比方三角形，咱们会创立一个 Triangle 类(对扩大凋谢)，定义一个 getArea 办法，仅此而已。咱们不须要批改 getTotalAreas 办法(对批改敞开)，只须要在调用 getTotalAreas 时向其数组减少一个参数。

咱们再来看一个更理论的例子, 假如客户端接管一个指定格局的谬误验证音讯：

const response = {
    errors: {name: ['The name field should be more than 2 letters', 'The name field should not contains numbers'] ,
        email: ['The email field is required'],
        phone: ['User with provided phone exist']
    }
}

设想一下，服务端应用了不同的服务来验证，可能是咱们本人的服务，也可能是返回不同格局谬误的内部服务。

让咱们应用尽可能用简略的示例来模仿谬误：

const errorFromFacebook ='Bad credentials' ;
const errorFromTwitter = ['Bad credentials'];
const errorFromGoogle = {error: 'Bad credentials'}
function requestToFacebook() {
    return {
        type: 'facebook',
        error: errorFromFacebook
    }
}
function requestToTwitter() {
    return {
        type: 'twitter',
        error: errorFromTwitter
    }
}
function requestToGoogle() {
    return {
        type: 'google',
        error: errorFromGoogle
    }
}

咱们来把谬误转换成客户端所须要的格局：

function getErrors() {const errorsList = [requestToFacebook(), requestToTwitter(), requestToGoogle()]; 
    const errors = errorsList.reduce((res, error) => {if (error.type == 'facebook') {res.facebookUser = [error.error]
        }
        if (error.type == 'twitter') {res.twitterUser = error.error;}
        if (error.type == 'google') {res.googleUser = [error.error];
        }
        return res;
    },[]);
    return {errors};   
}
console.log(getErrors());

咱们就失去了客户端所冀望的后果：

{
    errors: {facebookUser:['Bad credentials'],
        twitterUser:['Bad credentials'],
        googleUser:['Bad credentials']
    }
}

然而，还是同样的问题，咱们没有遵循 开闭准则，当咱们须要从内部服务增加一个新的验证时，咱们就须要批改 getErrors 办法，增加新的 if/else 逻辑。

怎么解决这个问题呢？一个可行的解决方案是：咱们能够创立一些通用的谬误验证类，并在其中定义一些通用的逻辑。咱们就能够为每个谬误创立一个咱们本人的类(FaceBookValidationError，GoogleValidationError)。

在每个类中，咱们能够指定办法，像 getErrors 或 TransformErrors, 每个 validationError 类都应该遵循这个规定。

const errorFromFacebook ='Bad credentials' ;
const errorFromTwitter = ['Bad credentials'];
const errorFromGoogle = {error: 'Bad credentials'} 
class ValidationError {constructor(error) {this.error = error;}
    getErrors() {}
}
class FacebookValidationError extends ValidationError {getErrors() {return { key: 'facebookUser', text:[this.error] };
    }
}
class TwitterValidationError extends ValidationError {getErrors() {
        return {
            key: 'twitterUser',
            text: this.error
        }
    }
}
class GoogleValidationError extends ValidationError {getErrors() {return { key: 'googleUser', text: [this.error.error] }
    }
}

咱们来在 Mock 的函数中应用这个谬误验证类，批改 getErrors 函数：

function requestToFacebook() {return new FacebookValidationError(errorFromFacebook)
}

function requestToTwitter() {return new TwitterValidationError(errorFromTwitter)
}
function requestToGoogle() {return new GoogleValidationError(errorFromGoogle)
}

function getErrors (errorsList) {const errors = errorsList.reduce((res, item) => {const error = item.getErrors();
        res[error.key] = error.text
        return res ;
    }, {});
    return {errors}
}

console.log(getErrors([requestToFacebook(), requestToTwitter(), requestToGoogle()]));

能够看到，在 getErrors 函数接管 errorList 作为参数，而不是在函数中进行硬编码。运行后果是一样的，然而咱们遵循了开闭准则，当新增一个谬误时：咱们能够为这个谬误创立一个新的验证类并且指定 getErrors 办法(对扩大凋谢)，getErrors 能够帮咱们把内部服务返回的信息转换成咱们须要的格局。咱们在通用的 getErrors 办法中来调用谬误类的 getErrors，无需进行其余批改(对批改敞开)。

欢送关注微信公众号”混沌前端“

举荐浏览：

基于 TypeScript 了解程序设计的 SOLID 准则

clean-code-javascript: SOLID

退出移动版