《前端架构设计》读书笔记

Web诞生于 20世纪90年代。当时的网页不漂亮的主要原因是：决策者认为内容很重要。

手机的出现，特别是智能手机的出现。导致的问题是网页开发不能再假设屏幕为 1024px*768px 了。

技术人员想到的解决方法：

1. 双指缩放

2. 双击缩放

3. 直接显示原网站

4. 做一个 m.dot  站点

但是以上都没有根本解决问题。

最后，一种创建新型网站的方式被提出来了：响应式 Web 设计。这不是一种新科技，而是现有工具和技术的一个集合。就如果 Ajax。

响应式设置的技术集合：

1. 流式网格

2. 自适应图片

3. 媒体查询

前端架构诞生之前是没有前端架构的，前端架构诞生于前端开发人员疲于奔命的配合后端。那怎么解决这个问题，让后端配合前端，或者前端主导网站开发。

当项目或者产品重视前端时，变需要前端架构师。但是，前端架构师是一个角色，而不是一个职位。

前端架构是什么

它是一系列工具和流程的集合，旨在提升前端代码的质量，并实现高效、和持续的工作流。

前端架构师更专注于开发工具和流程优化。

架构师的工作职责

1. 体系设计

2. 工作规划

3. 监督流程

当进入一个现有团队的时候，第一件要做的事情就是赢得团队对你的信任。

愿望清单：

1. 模块化内容

2. 全面测试

3. 流式处理

4. 详细的文档

前端结构的核心

1. 代码

2. 流程

3. 测试

4. 文档

OOCSS 的两个主要原则：

1. 分离结构和外观

2. 分离容器和内容

SMACSS 把样式系统划分为五个具体类别

1. 基础

2. 布局

3. 模块

4. 状态

5. 主题

BEM方法（块元素修饰符）

BEM只是一个CSS类名命名规则。

1. 块名

2. 元素

3. 修饰符

维护整洁的 JavaScript 代码

1. 保持代码整洁

2. 创造可复用的函数

工作流

史前时代：

1. 需求

2. 线框

3. 开发+设计

4. 前端

现代的开发工作流

1. 需求

2. 原型

3. 开发

在任务处理器中完成一切。

例如：

• 安装需要的 Ruby 库和 Bower 安装包

• 清理临时文件夹

• 创建软连接

• 编译 Sass

• 合并 JavaScript

• 加载第三方 JavaScript 库

• 把 SVG 文件编译成图标字体

• 对图片进行处理，减少文件体积，裁剪成各种尺寸

• 同步文件到远程服务器

• 创建 Git 标签

• 运行可视化的回归测试

• 生成代码的样式文档

• 自动生成浏览器厂商的前缀

• 编译组件库

• 优化我的 Sass、CSS、JavaScript、JSON，等等

• 基于 JSON 模式来验证数据

• 启动 Node 和 PHP 服务器

• 监听文件改动来刷新浏览器

一系列标砖的产出

1. JSON模式

2. 模板文件

3. Sass partial

4. 可视化的回归测试

5. 测试数据

6. 文档

7. 文档数据

关于测试

单元测试的核心在于：一次只做一件事，并把它做好。

TDD

关于性能测试通过适当的自动化测试流程和有竞争力的预算，你就有了一个很好的起点，在此基础上可以持续开发新的功能并改进网站，同时确保提交的改变不会超出预算。