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

8次阅读

共计 4635 个字符，预计需要花费 12 分钟才能阅读完成。

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

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

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

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

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

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

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，无需进行其余批改(对批改敞开)。