一、前端架构的原则

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

前端架构师的工作职责:

  • 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、围绕单一职责原则,设计结构

六、工作流

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

前端工作流:

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

总结

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