新版相关技术与协作开发安排分享

• 老版本存在的问题

老版本存在的问题

• 登录需要加载的初始化文件太多，导致登录页很慢（借助Vue路由懒加载+Webpack打包+Es6（动态加载）机制解决）
• 代码不太规范，使用工具压缩编译不太理想（Eslint（代码检查）+Es6（语法））
• 使用 Jquery ,页面主要是Dom驱动的，Dom操作安规。（Vue数据驱动解决）
• 开发方式还是传统模式，前端工程化和自动化无法使用工具去实现（使用Nodejs平台，Npm+Webpack+Vue全家桶解决）

前端工程化和自动化，可以大大提高工作效率（上线和测试加快，研发是肯定的）

新版技术栈

• Vue全家桶 Vue + Vuex + Vue-Router
• Es6 + Stylus 支持
• 主要工具 Axios （Ajax请求）Webpack（打包）
• 前端服务器 Nodejs平台 Express框架+Webpack （实现热加载）

基本原理

• 整个前端Mv-Vm思想

  |A|B|C|

—— ————————

前端模型层

——————————-

后端

• Vue 组件（Components）思想，也是整个系统的 V层 视图层

  这里完成 Css Html 和 组件相关自己的数据操作（简单展现逻辑和组件之间数据传递）与组件所需的数据暴露

  

  

  高效渲染的原理图（把一个普通 Javascript 对象传给 Vue 实例的 Data 选项，Vue 将遍历此对象所有的属性，并使用 Object.Defineproperty 把这些属性全部转为 Getter/Setter。Object.Defineproperty 是仅 Es5 支持，且无法 Shim 的特性，这也就是为什么 Vue 不支持 Ie8 以及更低版本浏览器的原因。）

  

• Vue-Router (有Vm，也就是Control 但是我觉Vm在整个系统中流转)

  这里完成组件的跳转和数据传递的操作，我们自己完成一个这样路由很简单，但是Vue-Router还有很多用处（我们暂时就结合Es6和Webpack完成了Js动态加载（什么时候用什么时候去取））

  

• Vuex

  • 这里是我们前后端共同协作的最主要的地方，也就是上面说的前端模型层（相当于M）由一个单一状态树对象缓存.绝大部分的Dom展现与消失都依赖于这里的数据变化（数据变化是由于用户的操作与Http请求的交互）

    

    大家看图之后应该很明白

    Action

    Action 是异步的 ，返回的值是一个 Promise对象

    • 与后端接口最紧密的就是Action这块，这里就是前段的M层与后端接口交互的地方，
      • 这里会处理一些业务逻辑后封装成初步的M层的状态对象，再把封装的初步的状态对象 Commit（）（提交给）Mutations

上面是后端能够帮助我们前端工作的地方，写相关接口和Action

---

• 通过Mtation再去挂载和修改状态对象（Mutation是改变State的唯一路径，不能直接去改变State值）

  

  • 在通过改变的State去改变 Vue组件，再去渲染视图

下面就借着系统，说明一下上面的具体实现

接口声明



注册Store （State,Mution,Action,Getter)



---



通过这个改变State

相关组件或Store触发 Mution（Commit），Action（Dispath）改变State State与Getter作用于渲染视图



通过这个来触发注册的Action，进行相关组件和数据的初始化操作