前端架构设计

学习规则、规范，是为了有通用语言

---

前端架构是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效、可持续的工作流
它包括：体系设计、工作规划、监督跟进

迈卡·高保特 (Micah Godbolt). 前端架构设计 (图灵程序设计丛书) (Chinese Edition)

Alpha项目

模块化内容、全面测试、流式处理、详细的文档
四个核心：代码、流程、测试、文档

代码

HTML

程序式标记、静态标记->模块化标记
OOCSS：分离结构和外观；分离容器和内容
SMACSS：基础、布局、模块、状态、主题
BEM方法：块名_元素–修饰符

CSS

选择器优先级、颜色重置、位置依赖、多重继承、深层嵌套
容器与内容分离、区分布局与组件的角色和职责、扁平选择器
单一样式来源、组件修饰符

JS

保持代码整洁：jshint
创造可复用的函数

流程

工作流：需求->原型设计->开发
工具、本地部署、编写用户故事

测试

单元测试：单元、更多重用、更好的测试、TDD、覆盖率
性能测试：
性能测试衡量的是影响用户使用网站的流畅程度的关键指标，包括页面大小、请求数量、首字节时间（timetofirstbyte，TTFB）、加载时间和滚动性能

原始指标

页面大小：图片、自定义字体、js框架插件
HTTP请求

计时度量

首字节时间、开始渲染时间、文档完成时间

混合度量标准

PageSpeed
SpeedIndex
WebPageTest
Grunt:PageSpeed插件、Perfbuget插件

视觉还原测试

Wraith（https://github.com/BBCNews/wraith）
BackstopJS（https://github.com/garris/BackstopJS）
Quixote（https://github.com/jamesshore/quixote）
Gemini（https://github.com/geminitesting/gemini）
CasperJS（http://casperjs.org/）
Diffux项目（https://github.com/diffux/diffux）
PhantomCSS（https://github.com/Huddle/PhantomCSS）

文档

静态文档：
Hologram（https://github.com/trulia/hologram）
SassDoc（http://sassdoc.com/）
代码驱动的文档：
PatternLab

曾经工作中的积累和经验

• 总结代码提交流程
  流程化，提前发现问题；
• 推动gulp打包工具的运用
  压缩、合并等，以及其他一些自动话处理的工作，例如autoprefix；
• proxy代理模式开发
  解决重构版本本地开发调试的问题
• 根据API的特点封装了ajax
• 编码风格
  css/js/html的风格文档、eslint配置
• 引入前端测试框架karma
  关于代码覆盖率没必要绝对追求，适用于底层方法
• 引入BS4，并对IE8兼容进行适配
  主要处理flex布局，以及ie9以上属性；
• 过多的自定义组件带来的质量风险
• 代码检视人的不足

迈卡·高保特 (Micah Godbolt). 前端架构设计 (图灵程序设计丛书) (Chinese Edition)