现代前端技术解析-第5章前端项目与技术实践（二）

本文链接：https://blog.csdn.net/DxCaesar/article/details/104441365

第1章 Web前端技术基础
第2章前端与协议
第3章前端三层结构与应用
第4章现代前端交互框架
第5章前端项目与技术实践
一（5.1 前端开发规范）
二（5.2 前端组件规范 & 5.3 自动化构建）
三（5.3 自动化构建）
四（5.5 前端用户数据分析 & 5.6 前端搜索引擎优化基础 & 5.7 前端协作）

第6章前端跨栈技术
第7章未来前端时代

2020/02/21

5.2 前端组件规范

5.2.1 UI组件规范

UI规范一般指UI层设计和实现的规范性及统一。

UI层规范的优点： （p230）
- UI层风格统一化；
- 增加UI层复用性；
- 更符合用户的体验习惯；
- 增加了开发规范的统一性。
UI组件规范遵循的基本原则： （p231）
- UI设计一致性：UI设计出需要统一，相同功能的模块在相同情景下结构层和表现层应该是一致的；
- 开发实现的一致性：所有UI层实现尽量使用相同的编码开发规范和方式。
实现一个具有通用组件规范的UI库要考虑的方面： （p231）
- 统一的页面布局方案；
- 基础UI结构和样式实现；
- 组件化UI结构和样式实现；
- 响应式布局；
- 扩展性。

5.2.2 模块化规范

模块化规范主要指JS模块化开发的文件模块封装方式。

可以认为是JS文件之间相互依赖引用的一种通用语法约定。就是按照一定的规范来写JS文件，方便被其他JS文件引用。主要包括AMD(Asynchronous Module Definition, 异步模块定义)、CMD(Common Module Definition, 通用模块定义)、CommonJS、import/export等。

AMD： AMD是运行在浏览器端的模块化异步加载规范，主要以requireJS为代表。语法：p233-p234

$\color{red}{attention:}$ 运行主模块时（假设该函数使用require引用了其他模块），需要先加载并执行完引用模块后才会执行主模块，即使主模块中没有用到引用模块，一旦被引用了就会被挤在执行。（p234）
CMD： CMD是Seajs提出的一种模块化规范。语法：p234-p235

$\color{red}{attention:}$ 与AMD不同的是，CMD遵循按需加载的原则，只有用到某模块的时候才会执行内部的require语句，同时加载完成某个依赖之后并不会马上执行，而是在所有依赖模块加载完成后进入主模块，当遇到模块的运行语句是才会执行对应的模块。（p235）
CommonJS： CommonJS是Node端使用的JS模块化规范，使用require进行模块引入，并使用modules.export来定义模块导出。
import/export： 是es6的模块引用方式，是唯一一个遵循JS语言标准的模块化规范。

5.2.3 项目组件化设计规范

项目组件规范指的是实际开发中整个项目业务代码之间的组织形式。

Web Component组件化： p237-239
MVVM框架组件化： 基本思路是将页面中的模块按照元素来划分，并将这个模块相关的MVVM描述语法、CSS样式、执行脚本放在同一个文件夹里进行引用。（p239-234）
Virtual DOM的组件化方案： p240
基于目录管理结构的通用组件化实践： p240-242
组件化实践方案的基本思路： 将页面的三层结构内容绑定到一起作为一个独立的组件存在，然后通过解析应用到页面中执行。
高效的组件化规范应该解决的问题： p241-242
- 组件之间独立、松耦合；
- 组件间嵌套使用；
- 组件间通信；
- 组件共用部分设计；
- 组件的构建打包；
- 异步组件的加载模式；
- 组件继承与复用性；
- 私有组件的统一管理；
- 根据特定场景进行扩展或自定义。

2020/02/22

5.3 自动化构建

自动化构建的目的： 对源项目文件或资源进行文件级的处理，将文件或资源处理成需要的最佳输出结构和形式。（p243）
自动化构建的原理： 读取入口文件 -> 分析模块引用 -> 按照引用加载模块 -> 模块文件编译处理 -> 模块文件合并 -> 文件优化处理 -> 写入生成目录。（p243 - 244）
构建工具设计的问题： 模块分析引入；模块化规范支持；CSS编译、自动合并图片；HTML、JS、CSS资源压缩优化；HTML路径分析替换；区分开发和线上目录环境；异步文件打包方案；文件目录白名单设置。（p246 - 247）