前端业务代码配置化

MSchumi 发布于2019-08-23 18:01 / 1407人阅读

摘要：如何写好业务代码在前端工作中有很多业务性代码，如果书写不规范，那么对后期的维护将是非常致命的。代码配置化在使用编写代码的过程中，经常用到这样的情况，根据情况判断是否展示对应的组件。

如何写好业务代码？
在前端工作中有很多业务性代码，如果书写不规范，那么对后期的维护将是非常致命的。

判断配置化 业务场景

后端数据库中经常会一个字段具备几个不同的状态，比如：

status: 2
// 各个字段对应的含义
0: 出生
1: 儿童
2: 少年
3: 中年
4: 老年

这样不同的数字代表的含义，需要在前端展示。

需要根据不同的状态，前端去做不同的处理

方法一（switch）（bad）

下面这段代码就是常见的无限if/else或者switch场景

// 业务代码
switch (status) {
    case 0: 
        // do something
        return "出生";
    case 1:
        // do something
        return "儿童";
    ... ...
    default:
        return "";
}

这样做是不好的，因为如果后端再加了一个字段，比如

5: 已死亡

那么前端需要重新修改switch函数，这样需要去修改对应的业务函数，无疑破坏了业务代码的完整性。

方法二（写成配置文件）（better）

// cfg.js
export const cfg = new Map([
    [0, 出生],
    [1, 儿童],
    [2, 少年],
    ... ... 
]);

// 业务代码
cfg.get(status)

但是这样仅仅是显示相关的状态，如果涉及到状态的判断，那这样的处理方式就有些问题了，比如需要根据具体的状态去做对应的判断

switch (status) {
    case 0:
        // do something
        return ;
    ... ...

}

像上面的情况，又变成了第一种情况，显然这种配置化的方式并不能满足。如果将对应的操作，与配置分割，则代码更加不易维护。

方法三（升级配置文件，处理代码集中）（better）

将状态处理集中起来，如果能将状态展示和对应的状态封装起来，那么就会让后期代码维护显得十分集中。

// cfg.js
const status = new Map([
    [0, 出生],
    [1, 儿童],
    [2, 少年],
    ... ... 
]);
const checkIsBirth = (status, callback) => {
    if(status === 0) {
        callback && callback()
    }
}
export default {
    status,
    checkIsBirth
}
// 在具体使用中
import Person from "./cfg.js"
const a = 1;
Person.status.get(a);
Person.checkIsBirth(a, () => {
    console.log("Person is in Birth state");
})

这样处理，如果以后status发生变化，只需要修改checkIsBirth中的判断逻辑就可以，只需要改动一处。

代码配置化

在使用react编写代码的过程中，经常用到这样的情况，根据情况判断是否展示对应的组件。

方法一（流水线工作）（bad）

function Business({status, bug}) {
    return (
        
            {
                status === 0
                    ? (
                        123
                    )
                    : null
            }
            {
                bug === 1
                    ? (
                        456
                    )
                    : null
            }
        
    );
}

这样的写法如果仅仅只有一个其实还好，如果有很多个，在代码中会造成代码非常冗长，使假想一个页面中如果有很多这样的，代码看起来非常ugly。所以建议将代码分割开来，形成一个个小的组件，将对应的代码封装起来，将会使代码可读性提高一些。

方法二（组件粒度细化）（better）

function Business() {
    return (
        
            
            
        
    );
}

// One
function One({isShow}) {
    return (
        
            {
                isShow === true
                ? (
                    123
                )
                : null
            }
        
    );
}

// Two
function Two({isShow}) {
    return (
        
            {
                isShow === true
                ? (
                    456
                )
                : null
            }
        
    );
}

如果经常这么写是不是会觉得很烦，可以将通用的逻辑抽象为通用的组件。

方法三（高阶组件）（better）

其实可以观望一下decorator以后的用法,暂时没有找到使用的切入点。

function IsShowCom(isShow, Wrapped) {
    if (isShow === true) {
        return (Wrapped) => 
    }
    return () => null;
}
// 如果你想转发ref，你得这么做
function IsShowCom(isShow, Wrapped) {
    if (isShow === true) {
        return React.forwardRef((props, ref) => {
            return  
        });
    }
    return () => null;
}
// 
import IsShowCom from "./isShowCom";

function Business() {
    const One = IsShowCom(
        status === 0,
        
            123
        
    );
    const Two = IsShowCom(
        bug === 1,
        
            456
        
    );
    return (
        
            
            
        
    );
}

注意⚠️

不要在render中使用高阶组件，因为高阶组件每次返回来的都是新的组件，会使子组件的状态丢失。但是在无状态组件中，这样使用并没有什么问题，因为无状态组件本身就是随参数的变化而变化的，只是可能会产生性能问题。

总结

前端配置化的整体思路：

针对不同值进行不同处理的时候，思考一下，是不是可以将判断逻辑代码集中起来。

针对组件的显示/隐藏，可以将具体的隐藏逻辑封装为高阶组件，便于维护

云服务器 GPU云服务器配置化 php静态化代码 asp静态化代码前端代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104528.html

前端能力中台化之路———— Fusion Design 成长史

摘要：快速摧毁敌军设施，杀伤有敌军生力量，最小化己方伤亡。所以前端工程师在修改完样式以后，需要反复和设计师还原度的问题。前端工程师依照主题包和设计稿进行前端工程开发。前端工程师很开心，因为不用去投入开发组件库和调整还原度。作者: 暮尘 2019年05月11日在上海举办 FDCON 2019。笔者有幸受到邀请，参与这次盛会。这篇文章就是演讲内容的文字提炼版。浅谈中台在开始正文内容之前，先简单聊聊...

MycLambert 2019-05-22 19:16 评论0 收藏0
微店前端工程化的迭代史

摘要：文章同步在微店前端工程化起步于一个内部产品，对外我们有一个开源版本。这么长时间过去了，我们在前端工程化方面有了哪些变化遇到了哪些问题用怎样的方案解决这些问题等等，值得为大家再分享。最终产品以命令行的形式发布。文章同步在：https://github.com/hoperyy/bl... 微店前端工程化起步于一个内部产品 vbuilder，对外我们有一个开源版本 bio-cli。去年我...

littlelightss 2019-08-26 10:41 评论0 收藏0
如何搭建一个功能复杂的前端配置化框架(一)

摘要：我们只需要配置一下就能生成一个页面，这个如何实现呢我们慢慢道来技术选型框架搭建分析页面只需一个容器，可以理解为一个，在加载页面的时候，异步去分布式配置中心或其他获取页面配置，页面配置单纯的就是个字符串。背景现在很多公司主要业务是c端，拥有巨大用户和流量的同时，b端业务不可或缺，CRM，CMS，运营配置化管理平台，数据可视化平台，各种审批平台。这些系统都有几个共同的特点：需求多，变化快...

13651657101 2019-08-02 10:51 评论0 收藏0
微内核架构在大型前端系统中的应用

摘要：微内核架构在大型前端系统中的应用只讨论架构，不讨论框架名词解释由一群尽可能将数量最小化的软件程序组成，他们负责提供实现一个操作系统所需要的各种机制和功能。而微内核架构已经在操作系统和很多的产品的后端服务及前端中经过了很多的实践。微内核架构在大型前端系统中的应用只讨论架构，不讨论框架 1、名词解释由一群尽可能将数量最小化的软件程序组成，他们负责提供、实现一个操作系统所需要的各种机制...

li21 2019-06-24 18:12 评论0 收藏0