在学习过程中,积累的项目设计相关知识,后续会不断完善
CSS模块化设计
1. 设计原则
- 可复用、能继承、要完整
- 周期性迭代
2. 设计方法
- 先整体、后部分、再颗粒化
a)考虑整体布局,是选择flex、grid还是float布局
b)项目要划分几个页面,每个页面如何区分样式
c)考虑功能组件的样式,如按钮
d)考虑业务,继承功能的样式,并有逻辑,如返回业务 - 先抽象再具体
JS组件设计
1. 设计原则
- 高内聚低耦合
(即尽量让组件的功能受限于组件本身,而不受其他组件限制) - 周期性迭代
2. 设计方法
- 先整体后部分再颗粒化
- 尽可能抽象
自适应
1.基本概念
a)CSS像素、设备像素、逻辑像素、设备像素比
b)viewport
c)rem
2.工作原理
a)利用viewport和设备像素比调整基准像素
b)利用px2rem自动转化css单位
SPA设计
1. 设计意义
a)前后端分离
b)减轻服务器压力
c)增强用户体验
d)Prerender预渲染优化SEO
2. 工作原理
a)History API
b)Hash
构建工具
1.Webpack的安装、配置、使用到的插件
2.Babel的安装、配置、loader
3.dev-server的安装、配置