Deep-Sea JS

Javascript 中配置动态化、所见即所得的轻量级解决方案

特征

动态组合配置
支持配置多层级结构复合
支持链式属性名
支持由内到外的参数供给

解决的问题

在项目开发过程中，每当你定义一个组件或方法，你需要从外部获取很多参数，一两个还好，如果十个甚至二十个三十个参数，我们大多都会采用对象的形式来定义一个参数，然后用这个对象的子属性作为我们需要的参数

// 用对象获取多个参数
function doSomething(options){
    const {name, age} = options;
}

当这种方式始终具有几个痛点

常量的复用在一些配置中，可能一个变量会引用到另一个变量比如 Full Name 会用到 First Name 和 Last Name, 如果类似的变量有很多并且在同一个配置里就会极尽复杂

    // normal
    const personConfig = {
        fullName: 'Jason Smith',
        lastName: 'Smith',
        firstName: 'Jason'
    }

如果通过使用 Deep-Sea 我们就可以将 fullName 声明会动态属性，即 function，动态将 firstName 和 lastName 相连

    // deep-sea
    const personConfig = {
        fullName: ({firstName,lastName}) => `${firstName} ${lastName}`,
        lastName: 'Smith',
        firstName: 'Jason'
    }

使用动态配置时不能直接获取参数值假设你需要显示一段文字，内容是某一个日期的格式化字符串，在传入的参数中，通常情况下可能是这样的

    // normal
    // 声明参数
    const dateConfig = {
        date: new Date(),
        format: 'yyyy-MM-dd hh:mm:ss'
    }

    // 获取文字内容
    function getContentText(config){
        const {date, format} = config;
        return formatDate(date, format);
    }

可以看到，在以上情况下，我们需要在解析配置的地方额外去调用 formatDate 方法并且需要从配置中获取 format 参数，如果这个结果需要在多个地方使用，就变得极其繁琐。Deep-Sea 就很好的解决了这个问题

    // normal
    // 声明参数
    const dateConfig = {
        date: new Date(),
        shownText: ({date})=>{
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        },
    }

    // 获取文字内容
    function getContentText(config){
        const deepSeaConfig = deepSea.configure(config);
        return deepSeaConfig.shownText;
    }

通过使用 Deep-Sea 来加载配置，我们可以直接获取需要显示的参数值，所见即所得，不需要通过参数去写额外的代码再次运算，在多次调用的情况下，Deep-Sea 自带的缓存机制也可以防止代码的多次运算，在开发效率和运行效率上大大提升。

在配置时，不能动态地获取到一些来自组件或方法内部的变量在某些情况下，假设需要配置性别，但是性别是被声明为一个常量并且没有暴露出来，由于无法获取到性别的常量导致无法实现性别相关的配置，但在 Deep-Sea 中，我们可以通过一下方式实现
```
    function getPersonInfo(config){
        const MALE = 1, FEMALE = 0; // 内部的常量无法被外部所获取
        return = deepSea.configure(config,{MALE, FEMALE}); // 通过 deep-sea 的 provider 提供给配置方法
    }

    getPersonInfo({
        gender: ({MALE}) => MALE    // 声明性别为内部的 MALE
    });
```
在 Deep-Sea 中，我们可以提供额外的 Provider 用于为配置中的动态属性提供参数，从而更好地达到所见即所得的目的

在读取常规配置时，如果有多级对象，经常会遇到 null 异常

    // 该配置对象没有子对象
    const config = {
        name: 'config'
    }

    // 以上配置传入该方法会报错
    function getChildName(config){
        return config.child.name;
    }

    // 使用 deep-sea
    function getChildNameByDeepSea(config){
        const deepSeaConfig = deepSea.configure(config);
        return deepSeaConfig['child.name'];
    }

如上所示，Deep-Sea 支持链式属性用以获取子级对象的属性，如果没有自己对象则返回 undefined

快速开始

使用 npm 或 yarn 引入核心模块依赖：@deep-sea/core

Live Demo

function demo(expect) {

    // 模拟表格配置（列）
    const tableConfig = {
        columns: [
            {
                label: '名字',
                cell: {
                    output: ({lastName, firstName}) => lastName + firstName
                }
            },
            {
                label: '性别',
                cell: {
                    output({MALE, FEMALE}) {
                        if (this.gender === MALE) {
                            return '男'
                        }
                        if (this.gender === FEMALE) {
                            return '女'
                        }
                        return '未知'
                    }
                }
            },
            {
                label: '籍贯',
                cell: {
                    output: ({local, $root, $get}) => $get('local.province') + local.$get('city') + $root['local.county']
                }
            }
        ]
    };

    function applyTable(config) {
        // 展示个人信息（行）
        const rows = [
            {
                firstName: '三',
                lastName: '张',
                gender: 0,
                local: {
                    city: '成都',
                    province: '四川',
                    county: '高新'
                }
            },
            {
                firstName: '思',
                lastName: '李',
                gender: 1,
                local: {
                    city: '成都',
                    province: '四川',
                    county: '华阳'
                }
            }
        ];

        return configure(
            rows.map(row => config.columns.map(column => configure(column, {...row, MALE: 0, FEMALE: 1})))
        );
    }

    const tableResult = applyTable(tableConfig);

    expect(tableResult.$get('0.0.label')).toBe('名字');
    expect(tableResult.$get('0.1.label')).toBe('性别');
    expect(tableResult.$get('0.2.label')).toBe('籍贯');

    expect(tableResult.$get('1.0.label')).toBe('名字');
    expect(tableResult.$get('1.1.label')).toBe('性别');
    expect(tableResult.$get('1.2.label')).toBe('籍贯');

    expect(tableResult.$get('0.0.cell.output')).toBe('张三');
    expect(tableResult.$get('0.1.cell.output')).toBe('男');
    expect(tableResult.$get('0.2.cell.output')).toBe('四川成都高新');

    expect(tableResult.$get('1.0.cell.output')).toBe('李思');
    expect(tableResult.$get('1.1.cell.output')).toBe('女');
    expect(tableResult.$get('1.2.cell.output')).toBe('四川成都华阳');

}

demo(
    expect => {
        return {
            toBe(actual) {
                console.assert(expect === actual, 'Assertion Failed', expect, actual)
            }
        }
    }
)

苍石 / deep-sea

Deep-Sea JS

特征

解决的问题

快速开始

Live Demo

文档撰写中...

简介

发行版

贡献者

近期动态

苍石 / deep-sea .gitee-modal { width: 500px !important; }

Deep-Sea JS

特征

解决的问题

快速开始

Live Demo

文档撰写中...

简介

发行版

贡献者

近期动态

搜索帮助

苍石 / deep-sea