做业系统前端架构总结

项目目的：

1. 配合本地完成app资源本地化（后面文章会详细说明）

2. 新题型发布无需app本地发版

3. 统一数据源

4. 前端组件的高维护性、高复用性、高可读性

5  更换技术栈：vue全家桶

 

项目技术栈：

根据公司前端工程化定制的 sublime IDE(webpack,svn,secure CRT)、vue全家桶

 

架构：

（1） 视图层

（2）数据层

关键点与创新

（1）在保证高可复用性的基础上作到每一个题型组件的流程独立

利用vuex数据共享的高效率优点，下降组件间数据通讯的耦合度，提升组件复用率。尽量分离业务组件与基础组件。下降复用成本与冗余代码。

（2）将vuex数据层与题型配置文件结合成最终的渲染函数，数据是死的，可是配置是可手动配置的，是灵活的，在组件渲染以前动态生成渲染函数生成相应的组件id。增长了整个业务流程的灵活性，并且可以作到配置文件的配置即生效。

（3）增长可选配置，在基础配置没法知足的状况下，能够跨配置进行调度。能够兼容旧版本的数据，大大提升了灵活性（被旧版本的数据兼容逼出来的想法）。

（4）增长 数据无对应配置状况下的 空组件，用以对用户作 空组件提示，在数据版本更高的状况下，提升了业务流程的完整性，增长了容错机制。

（5）利用vue的混入，在h5与app本地交互时，将要求单次调用的方法都注入至事件池中，在单次调用的方法中遍历事件池中的方法，依次执行。避免了对单次调用的方法进行覆盖。