what

• 一种【少写代码】或者【不写代码】的实现方式
• 开发的研究方向之一
• 形式大概分为3种：

why

• 对网站建设者而言，可以提效，更快完成建设

how

针对两个例子简单分析

form-create

表现形式来看

• 以拖拽组件的方式展示自己设计的表单
• 输出代码|json

源码设计来看

1. 注册组件前：执行工厂方法返回vue注册锁需要的元素如install方法，同时拥有自己的类，方法如：maker，parse
2. 注册组件时，利用extend和componet等vue的api传入自己内部代表组件的对象来完成
3. 使用组件时与vue组件的声明周期无异： beforeCreate时调用自家实例
4. 核心的部分为fc组件的render函数

实现来看

1. 本质上是vue的插件
2. json属性负责vue组件prop，data等
3. 事件注册通过vue钩子watch，update等执行

实际使用来看

1. 简单的表单可以直接json声明搞定
2. 复杂表单需要添加逻辑如:

• 部分核心代码：

// template
<form-create 
v-model="fApi" 
:rule="rule" 
:option="options" 
:value.sync="value" 
@brand-id-change="getCompany"
@create-select="createBySelect"
></form-create>

// js
  data() {
    return {
      fApi: {},
      value: {},
      options: form_inline.options,
      rule: form_inline.rule,
    };
  },
  created() {
    this.rule[2].props.fetchSuggestions = this.getUserInfo; // 替换fetchSuggestions方法
    setTimeout(() => { // 模拟走ajax后赋值option
      this.rule[3].options = [
        { label: "公司1", value: "gongsi1" },
        { label: "公司2", value: "gongsi2" },
      ];
    }, 1000);
  },
  getUserInfo(key, cb) {
      setTimeout(() => {
        cb([
          {
            value: 姓名： xx${key} / 电话： 188${key},
            userId: key + new Date(),
          },
        ]);
      }, 1000);
    },
    getCompany() {
      this.value.companyId = "";
      const brandId = this.fApi.getValue("brandId");
      setTimeout(() => {
        this.rule[4].options = [
          { label: brandId + "_label", value: brandId + "_value" },
        ];
      }, 1000);
    },
    createBySelect({ userId }) { // 走组件emit
      this.rule[1].value = userId;
    },

• demo链接：http://gjx.zone:8088/form-create.html

小结

1. 对于不复杂的表单开发，前端vue技术栈可以利用form-create,得到json；
2. 对于稍微复杂的表单开发，仍可以拿到json后把表单大体渲染出来，再敲代码来修正以完成特殊功能
3. 对于复杂的表单开发，不适合用
4. json的来源可以是产品同事直接的表单设计表单;也可以是前端根据产品原型来拖拽，形成后导出。相比之下，前者前期的学习&沟通成本会大些，但是具有显著提高开发效率的优势

amis-editor

表现形式来看

• 以拖拽组件的方式展示自己设计的页面
• 输出json

源码设计来看（react方式非SDK方式）

1. 入口文件import所有组件（hoc注册组件），导出核心方法render，以及n多工具方法如registerFilter过滤器注册，本地化语言registerLocale
2. 添加了全局loading，dialog，页面主题，语言，等高频使用的功能组件，利用全局store实现通讯，利用对象cache实现组件缓存

实现来看

1. 实际的渲染大多是react的组件，由json:type作为渲染依据，映射着不同的组件
2. json属性负责react组件prop，data等
3. 事件通过actionType:ajax,dialog,submit,close等等内部通过全局store一一实现

实际使用来看

1. 简单的页面可以直接json声明搞定（这部分官网给了很多的demo）
2. 复杂页面需要添加自定义组件， 而且可以再次声明并复用，以及表单项的拓展

小结

1. 对于简单的页面，amis的json基本都可以声明完成。
2. 对于简单的站点，用sdk版都可以快速实现。参考demo
3. 对于稍微复杂的应用，用react更佳。
4. 其中json的来源可以直接从amis-editor 来设计

优势

• 结合例子来看，我认为低代码的优势在于开发效率。
• 一方面，json形式来描述功能，对于与同事沟通，起着简洁明了的，扯不了皮的关键作用； 另一方面，对web开发的工作量可以大大减少（想象一下产品在需求评审时就能给出大致的json，对前端，后端，测试来说能节省很多工作量）