一、前端架构的原则

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

前端架构师的工作职责：

• 1、体系设计 (建立具备完善检验机制的代码规范)
• 2、工作规划 (制定开发工作流：版本控制器、任务调度器、CSS处理器、文档工具、测试组件和服务器自动化工具等)
• 3、监督跟进 (持续优化工作流程)

二、前端架构的核心

工具和流程是构建网站的要素

四个核心的含义：

• 1、代码
• 2、流程
• 3、测试
• 4、文档

三、HTML

• 1、HTML标签语义化
• 2、拆分，最小单元重组
• 3、模块化CSS理论的多面性，选择合适自己团队的方案即可

OOCSS方法

• 分离结构和外观 - 将视觉特性定义为可复用的单元
• 分离容器和内容 - 不再将元素位置座位样式的限定词

SMACSS方法

• 基础 - 如果不添加CSS类名，标记会以什么外观呈现
• 布局 - 把页面分成一些区域
• 模块 - 设计中的模块化、可复用的单元
• 状态 - 描述在特定的状态和情况下，模块和布局的显示方式
• 主题 - 一个可选的视觉外观层，可以让你更换不同的主题

BEM方法

• 块名 - 所属组件的名称
• 元素 - 元素在块里面的名称
• 修饰符 - 任何与元素相关联的修饰符

四、CSS

• 1、分离内容和容器
• 2、区分布局与组件的角色和职责
• 3、在标记上使用单一、扁平的选择器
• 4、使用其它原则，比如单一职责原则、单一样式来源、内容修饰符

五、JAVASCRIPT

• 1、保持代码整洁（JSLint）
• 2、创造可复用的函数
• 3、围绕单一职责原则，设计结构

六、工作流

工作流：需求 - 原型设计 - 程序开发

前端工作流：

必要的工具 - 本地部署 - 编写用户故事 - 开发 - 发布 - 提交编译后的资源 - 持续集成服务器 - 发布渠道

总结

不要把所有的希望寄托在一个单独的解决方案，框架或者平台，除非它一次又一次被证明是有效的。我们仍然需要不断的迭代和尝试新的事物。