电商平台移动前端框架构建

1. 电商平台移动前端框架构建 @vczero 王利华

2. 电商平台关注什么流畅的购物体验 •  性别的差异，强调“逛”的体验 •  性能流畅 •  界面美观及时促销 & 活动 •  及时更新 •  动态配置，多套模板 •  业务先行，体验先行

3. 美囤M站现状现状 •  •  •  •  •  •  •  多页全部手动拼接字符串，没有模版第三方库引用很多，代码体积较大滚动（横向 & 列表）效果差没有针对大屏设备做适配，例如pad 没有模块化没有组件化必须保留 •  多页 & SEO •  考虑目前团队的现状 •  业务先行，动态第一重构，困难重重，支付链路必须确保无一异常不重构，代码越来越混乱，体积越来越大！

4. 疯狂的代码代码总是那么宠辱不惊，有持无恐！创业团队，实现功能永远是第一位；向往者致敬！

5. 疯狂的代码结构后面还有2*n个文件，不忍直视.....

6. 原始的⽅式！吐槽？ 1. 最原始的方式真的不好？ •  符合浏览器解析原理（最野蛮，最快感！）没有样式选择器，不关心keyselector ! 渲染树最小渲染，不必构建十分复杂的样式结构... 从上到下下载，从上到下解析 •  Too young, too naive 快速开发，一次发布 BUT……

7. 解放双⼿，⼈类的天性保持冲动，保持野蛮：人类因为冲动得以延续和发展....... 理性克制主观：充分发挥主观能动性，但是必须在客观的限制下；用工具代替人类重复性劳动提高生产力目标 1.  css文件不要全部放入一个文件，影响下载和css渲染结构的快速构建； 2.  不要手动拼接字符串，可以定义模版； 3.  样式独立，且同模板同步下载； 4.  最小颗粒度的渲染，单一组件渲染； 5.  按序加载，充分利用JavaScript的异步； 6.  初始化代码体积最小，防止页面组赛； 7.  符合电商的特点，可以快速切换模版：运营同学，一点都不可爱，但是可以敬 8.  代码可维护，解放双手，提供生产力。

8. M-Fast 为什么不选择市面上的框架？普适性 VS 业务性？各种框架层出不穷…… 为什么需要框架？代码越写越乱是必然事件；但是在框架的整体下，情况会好很多。

9. M-Fast框架设计 PageManager 生命周期 page Parse 初始化页面加载组件模块化组件化框架预加载公共模块 Header Footer Slide …… 公共头初始化公共底初始化 template tpl prerender page mount web components思想和理念 view 和 controller分离 JavaScript成为主角，可操控性较强页面解析完成按需异步加载业务 1 Page 绑定事件 List Tab …… 防止初始化阻塞

10. 框架流程 3rd UI 组件 config template-html template-js Utils UI Component API Class 入口页面 fast.js 重写require unload 回调加载 UIView Page Manager Plugins 业务tpl-module main controller 继承Page Manager 框架UI组件 JS逻辑代码

11. 模块加载器的选择：requirejs、webpack...... 1. 模块化 1. 选择很重要，理性大于偏好 2. 一个优秀的加载器必须合理地解决业务场景的问题和需求

12. 2. 组件化引用模板 UI组件组件化预编译业务代码组件化工具类 & 插件 •  web components思想 •  样式独立可维护 & JS、模板、样式按需加载

13. 3. ⽣命周期 & Page Container 每个容器各司其职初始化页面加载组件绑定事件页面解析完成 1. 不做过多的约束；自由的代价 2. 规范流程

14. 4.view & controller View Model 入口文件即main controller

15. 5.Hybrid⽀持 4Wechat 1. H5的价值：分享 & in App 2. 一套代码 in Browser & in App & in Other WebView 3rd登陆 m-fast + h5-fast + plugins 支持美囤 4Native App 宝宝树孕育宝宝树时光 3rd Apps FAST FRAMEWORK

16. 6.业务组件化框架组件 Header Tab Footer UISwitch Search Loading

17. 7.其他 1. iScroll支持 2. Fastclick支持 3. 多页里嵌入单页 4. 存储：localStorage、sessionStorage、cookie template-1 template-2 template-3 5. 电商动态配置 6. artTemplate & tmodjs 本地预编译 7. 性能优化...... template-4 ….. 动态require 根据REST接口加载对应模版

18. 回看框架流程 3rd UI 组件 config template template-mod Utils UI Component Class 入口页面 fast.js require UIView 回调加载 Page Manager Plugins 业务tpl-module main controller 继承Page Manager 框架UI组件 JS逻辑代码

19. 大道至简何须架构，必须野蛮解放双手

20.