作业系统前端架构总结

项目目的：

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本地交互时，将要求单次调用的方法都注入至事件池中，在单次调用的方法中遍历事件池中的方法，依次执行。避免了对单次调用的方法进行覆盖。