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

第一部分 引言

第一章 前端架构项目

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技巧：分离容器和内容，区分布局与组件的角色和职责，在标记上使用单一、扁平的选择器，使用其他原则（不止这一些）

第六章 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.略

（未完待续...）

转载于:https://www.cnblogs.com/AresDLEX/p/10231730.html