MV某简述

前端狗

2019/09/18 发布于 技术 分类

文字内容
1. MV* 😢
2. IMWeb IMWeb ……
3. Summary • • Angular & React & VueJS • • IMWeb
4. ……
5. App DOM
6. A year later 1
7. App App App DOM A month later DOM DOM
8. Answer: f(state) = UI
10. MVVM View UI ViewModel Model
11. View UI ViewModel name ‘Hello’ + name
12. DI Dependence injection
14. Virtual DOM Diff Patch(s) DOM DOM
17. Benchmark m React Angular Knockout 180 135 90 45 0 1000 list 500 list 200 list 100 list
18. Vue.js
19. & and then
20. IE8
22. DNS(解析) • 100ms-200ms • 可缓存 Tcp连接 • 三次握⼿ • 100-200ms http request • 半个RTT http response • RTT不确定 • 优化空间
24. t2 = RTT t1 – t3 = DNS t1 – RTT – DNS = TCP/IP ● http://1.url.cn?t=1&size=0k t1= DNS + TCP/IP + RTT ● http://1.url.cn?t=2&size=0k t2= RTT ● dns ● http://2.url.cn?t=3&size=0k t3 = tcp/ip + RTT
26. MV* IE8......
27. ・ 足够小 ・ - gzip 6k 兼容性 - IE6+ (with jQuery and es5-shim) & All Mobile Browser (with Zepto)
28. MV*
31. • • • • (IE8 2.3 Web PC )
32. ・ 线下编译解决兼容性:IE8(甚至IE6)兼容
33. ・ 可组合:复杂UI可拆分成多个简单UI
34. ・ 可继承:相似组件可通过基类扩展 ・ 可重用:可在不同场景使用
35. ・ 单例调试 + 自动文档化
36. ・ 第三方组件 = less组件开发成本 + less迁移成本 高亮代码组件,通过第三方库highlight.js来实现非常快 只需封装一个接口,便可在任意地方使用, 唯一的弱点是内部不可嵌套
37. ViewModel( ) Component Component Component CSS( HTML( Javascript( Component Component ) ) ) 以前我们的代码结构是这样的 Controller( ) logic data processing report 现在的代码结构是这样的