web前端架构

技术选型

整体框架：vue2.x

为什么选择Vue

开发

• 具有热更新功能，代码变更保存即可看到效果，对提高调试与开发的效率有很大帮助。
• 社区资源丰富，大部分的问题均可查找得到合理的解决方案。
• 语法简洁。
• Api友好。
• Github维护热度高，大量高质量程序员都参与其中。

稳定性

• Bilibili、、饿了么、掘金、搜狐手机版、UC奇趣百科等知名网站都在使用Vue

性能

• 不输给目前其他流行框架 如ReactJs，AngularJS
• 原生渲染
• 自动按需加载组件，ReactJs暂时不能做到自动按需加载。

自身优势

• 高度模块化。
• 维护简单。
• 数据双向绑定，跨组件强制单向数据流。

UI库

后期有需求会增加别的ui库

• ElementUi
• Vue blu

网络请求框架

• axios

  使用范例
  axios
      .get('rul')
      .then(response => (this.info = response))
  

工具链：

• yarn：快速、可靠、安全的依赖管理，npm的升级版。
• npm：是JavaScript世界的包管理器，大部分的JS开发者会在这里发布他们的库。
• webpack：前端构建工具，用与打包压缩混淆前端代码。
• Eslint：静态代码检查器，用于规范开发编码习惯。

数据流

• 组件内部双向绑定
• 子组件与父组件单向绑定

设计模式：Mvvm

• 为了让页面与页面逻辑分离。
• 降低耦合度。

代码结构

image.png

• node_modules：存放npm下载的包，所有第三方的库都会存放在这里。
• Page：用于存放页面
  • View：具体的页面样式与html结构。
    • Css：控制页面的样式。
    • Html：控制页面的Dom树。
  • Model：每个页面所需要的数据结构。
  • ViewModel：页面的VM，负责具体业务并且让View与Model交互。
• Components：用于存放单个组件。
  • ControlComponents：控制类组件，具有可操作的能力，例如操纵Dom，可以存储输入状态如日期选择器。
  • ViewComponents：展示类组件，不具有操作的能力，不存储非UI的状态，不直接修改外部环境。
  • ContainerComponents：容器类组件 如卡片。
• router
  • 设置页面的路由

组件结构

• 扩展js

  
  
  

  公共js.png

控制类组件

控制类组件构建.png

控制类组件.png

• 展示类组件

  
  
  

  展示类组件结构.png

展示类组件.png

• 容器类组件

  
  
  

  容器类组件.png

页面构建结构

结构

页面结构.png

首页（例子）

首页结构.png

关系

一个页面由多个组件组建而成，ViewModel控制组件交互，并且负责具体业务。

总体结构

页面结构.png

开发规范

• 组件不能含有具体业务逻辑。
• 展示类组件应只允许输入数据。
• 控制类组件要暴露回调函数给外部组件控制，并且隐藏不必要的细节。
• View与Model的交互必须通过ViewModel
• 凡是可复用的函数或者组件都必须抽象封装出来。
• 不许对api请求try catch，应该判断状态码做相应的事情。
• 尽量使用let和const声明变量名。
• 禁止使用eval函数
• 禁止使用NaN，要用isNaN()
• 变量命名要尽量易懂，不容易懂的应加上注释
• 函数用小驼峰命名，
• 组件命名遵循：“my-component”，且使用小驼峰。
• class命名大驼峰。
• 变量名 小驼峰。
• Html、Css、Vue文件需要同名并且命名需要是名词。