JavaScript 中的 SOLID 原则（二）：“O”代表什么

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: SOLIDhttps://github.com/ryanmcdermott/clean-code-javascript#solid)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容