《前端架构设计》学习笔记（更新中）

第一部分 引言

第一章 前端架构项目

1.体系设计->工做规划->监督跟进

2.架构设计的可扩展性和可持续性

第二章 Alpha项目

1.模块化内容（原子设计方法论）->全面测试->流式处理（Git工做流程）->详细的文档

第三章 前端架构的核心

1.四个核心的主题、技术和实践是构建可扩展和可持续优化的系统的基础

2.四个核心：代码->流程->测试->文档

 

第二部分 代码核心

第四章 HTML

1.标记两大阵营：程序式和静态式

2.程序式标记：自动化程度100%，可控程度0%；静态式标记：自动化程度0%，可控程度100%

3.模块化标记：自动化程度100%，可控程度100%

（三大方法下去了解）

4.OOCSS（面相对象的CSS）方法主要原则：分离结构和外观，以及分离容器和内容

5.SMACSS（模块化架构的可扩展CSS）：把布局和组件分离到不一样文件夹的思想。把样式系统分化为五个具体类则，基础、布局、模块、状态和主题。

6.BEM方法（块元素修饰符）：CSS类名命名规则。块名，元素和修饰符。 

第五章 CSS

1.（过去）几乎老是从全局做用域开始开发，一层一层增长细节，从使用通用样式开始，而后给各个部分加样式（可是这种方法问题不少）

2.（承接上面1条）选择器优先级，颜色重置，位置依赖，多重继承和深层嵌套都会出现问题

3.一种现代的、模块化的方法解决了以上因为位置依赖而形成CSS样式混乱的问题。把ID选择器改为CSS类名选择器，对每个元素使用惟一的选择器，去掉布局文件中的样式代码

4.单一责任原则，单同样式来源

5.CSS技巧：分离容器和内容，区分布局与组件的角色和职责，在标记上使用单1、扁平的选择器，使用其余原则（不止这一些）

第六章 JavaScript

1.没有哪一个JavaScript框架是完美的，首选须要解决的是选择哪些工具来实现目标，而不是选择哪些框架和插件

2.除非增长复杂度和代码体积利大于弊，不然不要轻易放弃精简方案

3.维护整洁的JavaScript代码：保持代码整洁（JS Hint检查规则）、创造可复用的函数

第七章 Red Hat代码

1.该网站代码过去的问题：过多的依赖、严重的位置依赖问题

2.编写精简固定规则

3.数据属性的优点

（不算太能理解清楚，之后这部分须要从新看）

 

第三部分 流程核心

第八章 工做流

1.流程核心意义：清晰地定义前端代码从开发人员的脑海到用户的浏览器所须要经历的各个步骤

2.采用的方法：（1）使用事件跟踪和用户故事来正确地跟踪工做流和标记那些完成了的任务（2）搭建开发环境来测试代码（3）构建部署流程，用于编译、验证和测试代码（4）在任何代码被采纳以前，都要获取需求方的反馈（5）把提交的代码推送到中心代码仓库（6）采用这样一个部署系统：能够无缝地添加一些新代码到生产环境；在须要的时候，还能够回滚这些代码来恢复原来的功能

3.现代工做开发流：需求->原型->开发

4.前端工做流：必要的工具->本地部署->编写用户故事

5. 提交编译后的资源

 第九章 任务处理器

 1.任务处理器（Node.js，Sass）

第十章 Red Hat流程

1.略

（未完待续...）