公众平台 网页重构实践

1. 公众平台网页重构实践 微信重构组xushengni 2014.04.26

2. 大纲 • 公众平台简介 • 公共库形成背景 • 公共库形成过程 • 重构实践心得

3. 公众平台简介 • 什么是公众平台

4. 公共库形成背景-common.less回顾

5. 公共库形成背景-分析common • 一些明显的问题 • 样式冗余严重 • 项目局限性 • 经常冲突

6. 公共库形成过程 • 公共库的目标 • 公共库的内容 • 公共库的使用

7. 公共库的目标 • 代码架构化 • 高效并行开发 • 能跨各个项目 • 能跨PC端和移动端

8. 公共库的内容 • 公共库规划 • 一个独立的svn目录 • less文件分服务层和应用层 • 兼容移动端 • 公共库模型

9. 公共库的内容-模型 服务层 应用层

10. 公共库的内容-模型 g_fn.less 引用变量和公共方法 fn.less

11. 公共库的使用 • 使用原则 • 部署方式

12. 公共库的使用-使用原则 • 理论上，公共库的文件都相当于一个父类，依赖本项目的继承才能被间接使用。 project common 引用 引用 继承 引用 引用 继承

13. 公共库的使用-部署方式 • 由于公共库是一个独立的svn，所以它在项目中的部署方式可以不固定。

14. 使用公共库-部署方式1

15. 使用公共库-部署方式2

16. 使用公共库-部署方式3

17. 重构实践心得 • 与前端的合作方式 • 代码设计原则

18. 与前端的合作方式 • 工作流程 • 资源管理

19. 与前端的合作方式-工作流程

20. 与前端的合作方式-资源管理 • 资源管理

21. 与前端的合作方式-资源管理 • 资源管理 • 整页面型 • 页面片段型 • 组件型

22. 代码设计原则 • html视模块的信息结构而定 • html与css解耦 • 使用语境扩展类 • 适时优化

23. 代码设计原则 • html视模块的信息结构而定 推荐

24. 代码设计原则 • html与css解耦 推荐

25. 代码设计原则 • 使用语境扩展类 推荐

26. 代码设计原则 （二次复用，三次抽离） • 适时优化

27. 大纲 • 公众平台简介 • 公共库形成背景 • 公共库形成过程 • 重构实践心得

28. Q&A

29. 谢谢 微信号：uxsi_wx