解耦ui和逻辑

[xxapp]

暂时还没有思路，可能会从slot入手

[xxapp]

简单的思考了一下实现，发现UI和业务逻辑解耦分离还是挺麻烦的，可能要做很多 dirty work。

待解决的问题：

1. 原组件模板如何处理？

   目前没有分离的模板带有多余（针对业务逻辑）的结构，考虑提取出完整业务逻辑必需的部分，称为模板数，把剩余的部分抽象成高阶模板，称为模板算子。

   举例来说，以下是一个表单项组件：

   <div class="form-group">
       <label class="control-label">{{label}}</label>
       <input type="text" class="form-control" ms-duplex="record[col]" ms-attr-name="col">
   </div>
   

   分离的准则是表现行为和业务行为。

   把label元素和input元素中和业务行为相关的部分抽象出来组成组件的模板数。

   <t terminal="x">{{label}}</t>
   <t terminal="y" ms-duplex="record[col]" ms-attr-name="col" />
   

   剥离后剩下的结构则是表现行为相关的，经过抽象得到下面的模板算子。

   <div class="form-group">
       <label terminal="x" class="control-label"></label>
       <input terminal="y" type="text" class="form-control">
   </div>
   

   我们的最终目的是，模板算子可以根据UI框架（如 bootstrap、semantic-ui或者自己的框架 ）替换，模板数始终针对同一个组件实现的提供者（如 ng、vue 和 avalon）保持不变。以此实现变化的表现，复用的业务逻辑。

   这种抽象也可以应对一些UI框架的差异。比如分页组件，有些框架就用的ul-li结构做布局，有些框架可能用的是div做布局，模板数的抽象程度已经出离了标签级别，所以两种布局方式都可以做到适应。

2. 原组件逻辑怎么处理？

   同模板之理，逻辑也可以区分为表现逻辑和业务逻辑，分离的时候比较容易，组合比较困难。因为模板是以xml结构为基础，组合原则就是处理元素和属性，但是js代码的灵活性，使其组合时需要考虑的因素很杂，且容易考虑不周。

   先列几个因素：

   • 事件绑定，表现逻辑和业务逻辑很有可能绑定在同一个元素上
   • 第三方插件 如果使用了第三方插件，如何处理第三方插件的分离，比如表单验证插件，就既有业务逻辑部分，还有表现逻辑部分（钩子，抽象）
   • 组件的UI相关参数，如 width；组件的业务相关属性，如 max。

[xxapp]

React 高阶 Component Vue mixin