README-zh_CN.md

Eficy

Eficy 前端编排框架，通过 JSON 配置编排 React 组件，简单配置即可生成完整页面。

推荐编排组件库：AntD

English | 简体中文

✨ 功能

• 使用 JSON 编排任意 React 组件库，快速形成可用页面
• 内置 Mobx Store，页面开发无需关心 Store 变更
• 内置 request 机制，简单配置即可完成数据请求
• 内置双向绑定，轻松配置页面实时同步
• 细化组件变更范围，组件渲染性能实时查看
• 支持 Plugin 定制，可统一配置 HOC，轻松实现前端 OOP
• 开箱即用，适合大型多页后台应用
• 无缝接入 AntD 4.0+

🖥 支持环境

• 现代浏览器和 IE11 及以上。
• 支持服务端渲染。
• Electron

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 安装

npm install @eficy/core --save

yarn add -S @eficy/core

Script 引入：

<script src="https://unpkg.com/@eficy/core"></script>

🔨 示例

渲染至 DOM 节点：

import * as Eficy from '@eficy/core';
import antd from 'antd';

// config global default componentMap
Eficy.Config.defaultComponentMap = Object.assign({}, antd);

Eficy.render(
  {
    '#view': 'div',
    style: {
      padding: 10,
      background: '#CCC',
    },
    '#children': [
      {
        '#view': 'Alert',
        message: 'Hello this is a Alert',
        type: 'info',
        showIcon: true,
      },
    ],
  },
  '#root',
);

输出为 ReactElement：

import * as Eficy from '@eficy/core';
import antd from 'antd';

// config global default componentMap
Eficy.Config.defaultComponentMap = Object.assign({}, antd);

const App = () => {
  return Eficy.createElement({
    '#view': 'div',
    style: {
      padding: 10,
      background: '#CCC',
    },
    '#children': [
      {
        '#view': 'Alert',
        message: 'Hello this is a Alert',
        type: 'info',
        showIcon: true,
      },
    ],
  });
};

在浏览器中使用：

<link rel="stylesheet" href="https://unpkg.com/antd@4.0.3/dist/antd.min.css" />
<script src="https://unpkg.com/antd@4.0.3/dist/antd.min.js"></script>
<script src="https://unpkg.com/@ant-design/icons@4.0.2/dist/index.umd.js"></script>

<div id="root"></div>

<script>
  Eficy.Config.successAlert = ({ msg }) => antd.message.success(msg);
  Eficy.Config.failAlert = ({ msg }) => antd.message.error(msg);
  Eficy.Config.defaultComponentMap = Object.assign({}, antd, { Icons: icons });

  Eficy.render(
    {
      '#view': 'div',
      style: {
        padding: 10,
        background: '#CCC',
      },
      '#children': [
        {
          '#view': 'Alert',
          message: 'Hello this is a Alert',
          type: 'info',
          showIcon: true,
        },
      ],
    },
    '#root',
  );
</script>

实时更新

export default [
  {
    '#view': 'Alert',
    message: 'quick bind ${models.input.value}', // => will be output as "quick bind value"
    type: 'success',
    showIcon: true,
  },
  {
    '#': 'input',
    '#view': 'Input',
    value: 'value', // => value change will be sync to Alert message
  },
];

异步请求渲染

根据异步返回结果更新视图：

export default {
  views: [],
  requests: {
    immediately: true,
    url: 'https://mock.xiaobe.top/mock/5da6e8bf6aac2900153c9b7e/request/reload',
  },
};

根据异步返回结果，填充数据：

export default {
  views: [
    {
      '#view': 'Table',
      '#request': {
        '#': 'getTableData',
        url: 'https://mock.xiaobe.top/mock/5da6e8bf6aac2900153c9b7e/table/getlist',
        format: res => ({
          action: 'update',
          data: [
            {
              '#': 'table',
              dataSource: res.data,
            },
          ],
        }),
      },
      pagination: {
        total: 50,
      },
      columns: [
        ...
      ],
    },
  ],
};