1. 为什么前端架构
- 减少开发时间
- 降低开发成本
- 降低代码冲突
2. 实现目标
- 程序员只需要写自己的模块
- 切换主题
3. sass结构分析架构
Paste_Image.png
- block为一个一个的页面块
- cpblock为混合模块
- helper是处理函数
- layout为布局
- vender为引入外部插件样式
- main.sass为引入文件
4. 架构核心layout
Paste_Image.png
- normal 代表主题
- normal底下的page为当前当前block引入组合块 , 他负责把页面中的block进行布局
- _base.scss ,_normal.scss都是当前主题下的基本变量
5. 实现主题切换思路
- 在当前normal的同级目录增加一个新的主题文件集比如 blue
- 通过在界面中动态给当前body增加blue样式来实现主题切换
- blue中的代码继承normal中的所有样式 ,覆盖差异部分
今天就分享这么多 , 欢迎大家给出更多指导意见
网友评论