Roof Preview

Transcript

1. ⼩小明的故事 请勿对号⼊入座，如有巧合，纯属雷同
2. ⼩小明是个程序员 他的编程⽔水平还⾏行，会⼀一些基本的设计模式， 测试、重构等知识也略懂。 不过最重要的是，他很上进
3. TODO List 只会⽤用jquery和⾹香草库的公司
4. $(“#input”).onKeyup(function(){ … $.ajax(…).then(function(){ … $(“#list”).append(…) ! }) })
5. 3个⽉月/100 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口 接⼝口
6. 怎么解决到处都是接⼝口和到处都是dom操作的问题呢？ 上进 他离职了
7. TODO List 会⽤用Angular的公司
8. 不管怎么样， ⾄至少不⽤用操作dom了
9. controller service module compile?link?组件出问题 组件间数据交互 代码质量
10. 请叫我Angular专家 头发掉光了
11. 组件A 组件B 中央数据源
12. D(“user”,{ url : “/user”, actions : { “login” : function(){} } }) global.user = D(“user”).new()
13. 数据封装到service⾥里！ 单独拆分到⼀一个⽂文件⾥里！ 这是个什么东⻄西！ 写到代码⾥里！ 写到模板⾥里！
14. 代码质量 为什么不⽤用数据源？ 这⾥里⾯面这个请求是怎么回事？ 800⾏行的controller！ 你这⻚页⾯面是怎么交互的啊？ 神⻢马？要教开发写代码！ Angular学习 3个⽉月 架构设计 1个⽉月 吵架 1个⽉月
15. 再加个需求，很简单。 发到外⺴⽹网的版本增加敏感词检测功能 内⺴⽹网不要敏感词检测 61⼉儿童节做个活动，创建的todo⾥里带61的 都发500块 在增加个热点数据分析功能
16. 虽然dom操作的问题好像解决了，但数据源的 问题由于Angular体系过重，很难融合。代码质 量也难以保障，为了保证产品稳定，要不先打 死产品经理？ 上进 他离职了
17. TODO List ⽤用了React的公司
18. 作为看过angular的⼈人，react也太简单了 组件这么容易写 wc,这什么⿁鬼，代码和模板写⼀一起 动画有点难搞 数据有点难搞
19. FLUX疗效好 1.组件订阅Store 2.组件触发Action 3.Dispatch分配给Store 4.Store修改数据
21. 组件订阅Store
22. 写个Action
23. store修改数据
24. 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 1…2…3…4 X10 switch action { …. } store.on(“change”) x 10
25. 我为什么要这么干
26. Action 和 Dispatch 简化成事件模型就好了啊。switch个啥? Store⾥里的数据私有，如果有个操作要同时操作两个store⾥里的数 据怎么办? 组件总是⼿手动绑定onchange多⿇麻烦，为何不把数据全都抽出 来，写个统⼀一的minxin？
27. 等等，这样的东⻄西我好像在传说中听说过！
29. 建⽴立⼀一个数据源 定义类： Todos = Node.createClass({content:“required”}) 实例化： myTodos = new Todos({…初始数据})
30. 组件订阅数据
31. 触发事件
32. 处理事件
33. 真的有⼈人做出了我梦寐以求的东⻄西么
34. 再加个需求，很简单。 发到外⺴⽹网的版本增加敏感词检测功能 内⺴⽹网不要敏感词检测 61⼉儿童节做个活动，创建的todo⾥里带61的 都发500块 在增加个热点数据分析功能 上次⼩小明离职后，产品经理也离职了
35. 你TM在逗我吗 我已经不是当年的⼩小明了
36. Roof 在⼿手 天下我有
37. 下⾯面是演⽰示部分截图
38. ⼀一开始我们只有todo创建的主逻辑 这⾥里有两个监听函数，⼀一个负责将todo推送到服务器端。 ⼀一个负责在推送成功后更新⻚页⾯面上的列表
39. 现在创建⼀一个新的⽂文件security.js来检测敏感词 同样监听todo.create 事件，但是声明first : true。 它返回的error会阻断后续监听函数执⾏行
40. 好处在于，你新增⽂文件、删除⽂文件对原来的代码没有任何影响 特别是彩蛋这种功能，活动结束就不⽤用了。 减少对原有代码的修改能减少出错⼏几率。 blablabla….讲了⼀一堆事件系统作为⼀一级架构的好处 那么问题来了，事件系统可能会让代码变得晦涩，模块多了以后 不知道事件触发侯都执⾏行了哪些操作怎么办？
41. 请⽤用 ctrl + F 搜索事件名 逗你的 请做好⼼心理准备 下⾯面拿出来的东⻄西吓死你
42. 我们来创建⼀一个新的todo 按下回⻋车时，它开始发送到服务器，成功后更新下⾯面的列表，如 果有敏感词drug。那么就什么都不做。
43. 组件⾥里的代码⾮非常简单，bus就是roof提供的事件实例
44. Roof Dev Tool ⻚页⾯面上任何触发的roof事件，都能实时打印出调⽤用栈
45. 输⼊入了敏感词，抛出错误时的调⽤用栈
46. 后续通过 Roof Dev Tool 可以直接查看事件的参数、 返回值、错误代码⾏行号等信息。这意味着⼀一旦程序出错，不⽤用再 重现。直接打开⼯工具查找问题即可。 ! ⼯工具也不必⼀一直打开，Roof 在开发环境下默认会保留调⽤用栈的 历史，任何时候打开⼯工具都可以看到全部历史。 ! One more thing 未来Roof Dev Tool将能实现在⻚页⾯面上直接把调⽤用栈画好，然后 ⼀一键⽣生成代码、⽣生成测试⽤用例。