前端工程化

前端工程化包含：模块化，组件化，规范化，自动化

模块化：js模块化、css模块化、资源的模块化

组件化：从ui拆分下来的每个包含模板（html）+样式（css）+逻辑（js）功能完备的结构单元，我们称之为组件。

规范化：

• 目录结构的制定
  目录结构的合理设定，能为项目带来很多优点：
  • 有助于提高项目的逻辑结构合理性；
  • 对应扩展和合作；
  • 方便资源的统一定位管理。
• 编码规范 
  制定一套良好的编码规范可以增强团队开发协作、提高代码质量。
  推荐参考 凹凸实验室打造的 前端代码规范。
  编码规范包括
  • HTML规范。
    基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。
  • CSS规范。
    统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
  • JS规范。
    统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。
  • 图片规范。
    了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。
  • 命名规范。
    从 目录、图片、HTML/CSS文件、ClassName 的命名等层面约定规范团队的命名习惯，增强团队代码的可读性。
• 前后端接口规范
  “基于 Ajax 带来的 SPA 时代”，这种模式下，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口，引发一个重要问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自撸起袖子就是干，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。
  接口规范主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。
  那么，对于这一SPA阶段，前后端分离有几个重要的关注挑战：

  后端	前端
  提供数据	接收数据，返回数据
  处理业务逻辑	处理渲染逻辑

  • 职责分离

    1. 前后端仅仅通过异步接口(AJAX/JSONP)来编程；
    2. 前后端都各自有自己的开发流程，构建工具，测试集合；
    3. 关注点分离，前后端变得相对独立并松耦合。

  • 规范原则

    1. 接口返回数据即显示，前端仅做渲染逻辑处理；
    2. 渲染逻辑禁止跨多个接口调用；
    3. 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；
    4. 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；

  • 响应格式

    1. 响应基本格式及处理状态值的规范。
       • 基本响应格式
       • 列表响应格式
    2. 特殊内容
       • 下拉框、复选框、单选框统一由后端逻辑判定选中返回给前端展示；
       • 关于Boolean类型，JSON数据传输中一律使用1/0来标示，1为是/True，0为否/False
       • 关于日期类型，JSON数据传输中一律使用字符串，具体日期格式因业务而定；
• 文档规范
• 组件管理
• git分支管理
• commit描述规范
• 视觉图标规范

自动化

• 图标合并
• 持续集成
• 自动化构建
• 自动化部署
• 自动化测试