zoukankan      html  css  js  c++  java
  • 作业系统前端架构总结

    项目目的:

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

  • 相关阅读:
    针对web高并发量的处理
    外边距合并,外边距折叠
    cookie 和session 的区别:
    ng-if ng-show ng-hide 的区别
    JavaScript中的arguments,callee,caller
    git常见命令
    jQuery中.bind() .live() .delegate() .on()的区别
    为什么要使用sass
    js兼容性记录
    poj1004
  • 原文地址:https://www.cnblogs.com/pomelott/p/10342379.html
Copyright © 2011-2022 走看看