如何构建高质量、高效率的前端体系 Zhuoying

37
腾腾SNG腾腾腾腾腾 腾腾腾腾腾腾腾 腾腾腾腾腾腾腾 腾 、体 腾腾腾腾 腾腾腾

Transcript of 如何构建高质量、高效率的前端体系 Zhuoying

Page 1: 如何构建高质量、高效率的前端体系  Zhuoying

腾 讯 S N G 技 术 开 放日

如何构建高质量、高效率的前端体系主讲嘉宾:莫卓颖

Page 2: 如何构建高质量、高效率的前端体系  Zhuoying

效率问题导致加班么?

Page 3: 如何构建高质量、高效率的前端体系  Zhuoying

还想被老板骂么?

Page 4: 如何构建高质量、高效率的前端体系  Zhuoying
Page 5: 如何构建高质量、高效率的前端体系  Zhuoying
Page 6: 如何构建高质量、高效率的前端体系  Zhuoying

页面结构继承化

Page 7: 如何构建高质量、高效率的前端体系  Zhuoying

页面 A 页面 B

举个例子

Page 8: 如何构建高质量、高效率的前端体系  Zhuoying
Page 9: 如何构建高质量、高效率的前端体系  Zhuoying
Page 10: 如何构建高质量、高效率的前端体系  Zhuoying

base parent

Page 11: 如何构建高质量、高效率的前端体系  Zhuoying
Page 12: 如何构建高质量、高效率的前端体系  Zhuoying

实现原理

Page 13: 如何构建高质量、高效率的前端体系  Zhuoying

模块化

Page 14: 如何构建高质量、高效率的前端体系  Zhuoying

模块化 --目录规范• 单击此处编辑母版文本样式

• 第二级• 第三级

• 第四级• 第五级

Page 15: 如何构建高质量、高效率的前端体系  Zhuoying

模块化 --旧的依赖声明

Page 16: 如何构建高质量、高效率的前端体系  Zhuoying

模块化 --模块自我依赖

页面 1.html引用模块 3.html

Page 17: 如何构建高质量、高效率的前端体系  Zhuoying

完美的模块调用方式

Page 18: 如何构建高质量、高效率的前端体系  Zhuoying

模块化 --依赖资源自我销毁及去重• 单击此处编辑母版文本样式

• 第二级• 第三级

• 第四级• 第五级

Page 19: 如何构建高质量、高效率的前端体系  Zhuoying

模块化构建工具 .

Page 20: 如何构建高质量、高效率的前端体系  Zhuoying

性能优化

Page 21: 如何构建高质量、高效率的前端体系  Zhuoying

一切性能优化都交给构建工具

Page 22: 如何构建高质量、高效率的前端体系  Zhuoying
Page 23: 如何构建高质量、高效率的前端体系  Zhuoying
Page 24: 如何构建高质量、高效率的前端体系  Zhuoying
Page 25: 如何构建高质量、高效率的前端体系  Zhuoying
Page 26: 如何构建高质量、高效率的前端体系  Zhuoying

积累测试用例

Page 27: 如何构建高质量、高效率的前端体系  Zhuoying
Page 28: 如何构建高质量、高效率的前端体系  Zhuoying

脚本错误监控

Page 29: 如何构建高质量、高效率的前端体系  Zhuoying

脚本错误监控

Page 30: 如何构建高质量、高效率的前端体系  Zhuoying

脚本错误监控

Page 31: 如何构建高质量、高效率的前端体系  Zhuoying
Page 32: 如何构建高质量、高效率的前端体系  Zhuoying

imweb-badjs地址

Page 33: 如何构建高质量、高效率的前端体系  Zhuoying

样式监控

Page 34: 如何构建高质量、高效率的前端体系  Zhuoying

样式监控

Page 35: 如何构建高质量、高效率的前端体系  Zhuoying

功能监控

Page 36: 如何构建高质量、高效率的前端体系  Zhuoying

Thank You

腾 讯 S N G 技 术 开 放日

Page 37: 如何构建高质量、高效率的前端体系  Zhuoying

技术交流团队技术公众号