拖拽平台-事件技能商店设计

每个元素会捆绑对应的事件，也有可能是一个事件队列，比如点击后跳转、点击后进行微信授权、点击后请求接口带着内容进行跳转等常规场景和复杂场景。

我们因此设计出了，事件技能商店这一概念

1. 什么是事件商店

事件商店即是功能的集合，比如一个跳转功能、一个请求功能…

2. 功能事件的使用流程

在后台系统中点击对应的dom组件元素后，方可选择“点击”事件，然后从事件商店中选取已经开发好的功能，选取好的事件会是一个数组，它会形成一个事件队列按顺序执行。

3. 这些事件的开发原理是什么？怎么就能给对应的组件捆绑事件呢？

组件中均会对外暴漏一个click事件,如果检测到是“click”类型且含有数组事件即按顺序执行数组，但是这里是同步的，考虑到更多情况下事件列表他是一个同步操作。

4. 这么多事件，我岂不是要在后台编辑中一个一个开发完？万一有遗漏的，还要加个事件进行发版？

答案是否定的，我们为了更好更高的拓展性，希望每一个功能事件都能够由开发人员独立上传，而不是在后台代码中不断拓展然后发版本。具体怎么上传呢，往下看
4-1. 首先你需要了解new Function，允许将任何的字符串转换成函数，所以懂了吧，只需要提交代码的字符串，我们就能拿到要实现的逻辑。
4-2. 然后看下一个问题，提交什么样的字符串才能让Vue框架能结合自身语法进行解析识别呢，如果你的脚本全是原声操作dom，那也太不方便了吧，不要急，接着看。

这时候就涉及另外一个概念，我如果在组件渲染前把我需要的功能代码合并到组件内部，再通过component生成一个新的组件，是不是就可以了呢？

组件合并mixins生成新的组件：
需要注意的是组件的名称是采用了uuid的算法，即不重复的随机字符，比如yh-tab组件经过操作后变成了yh-tab_4b20610f-b36a-026b-bc50-ce35a7e9f560就保证了我们每一个拖拽的组件都是不重复的。

const pluginWithMixins = mixinList.reduce((mixedPlugin, mixin) => {
      mixin.methodsConfig = mixin.methodsConfig || {} // 处理为 undefined 的情况，更应该在 mixinScript 的时候，从入口处进行约束
      // 这里需要注意：
      // 因为在不同的脚本中，方法的配置信息字段都是：methodsConfig，因此根据 Vue.mixin 的规则，后mixin 的会覆盖前面的同名
      // 因此需要将前面的 methodsConfig 和 新mixin.methodsConfig 进行合并，防止之前的 methodsConfig 消失了
      mixin.methodsConfig = {
        ...mixedPlugin.options.methodsConfig,
        ...mixin.methodsConfig
      }
      return mixedPlugin.extend(mixin)
    }, basePlugin)
    Vue.component(this.uuid, pluginWithMixins)

看完以后是不是很大吃一惊，这样就能保证每个组件根据选择的功能还可以动态的拥有不同的data初始值，每个组件还能拥有不同的事件，甚至有了更深的拓展性。。。还没完，接着看。。。

5. 组件绑定的一个功能事件，怎么能实现通用呢，怎么在功能上加动态的配置项呢？

这很显然也要支持的，不然举个最简单的例子，跳转page，没有配置项是不是就不灵活了，是不是就只能跳转指定的，同样的也意味着每个功能都要单独开发，定制化就无从说起。

下面以跳转功能举例：
params即我们要设置的参数
content即在后台动态渲染的组件，用来动态与params进行v-model的捆绑
mixins即要与组件进行合并的参数，这里严格按照了vue的语法，唯一的区别是，我们预留了一个params参数，可以让你直接拿到上面配置的linkurl

return {
  type: '链接跳转', 
  name: 'click2',
  params: {
    linkurl: '/api/www.com/login'
  }, 
  content: [
    {
      label: '跳转url',
      editor: {
        type: 'el-input',
        key:'linkurl'
      }
    }
  ],
  mixins:{
    methods: {
      click2(params){
        location.href=params.linkurl
      }
    }
  }
}

当你选择跳转的技能后，对应的就会出现一个可配置的文本框

同样的在h5端也会根据最新的mixins进行合并生成新的组件，这就是我们上文中的合并mixins的来源