Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
2017-03-23 16:12
471 查看
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊。
你484傻,多一种选择不好吗?
其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空函数,是Component中的原型方法),也就是生命周期中的一种。然后在这该方法中,
给子类的data赋值,然后update(),这种方式野蛮好玩的。
老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明。
class Hello extends Omi.Component { constructor(data) { super(data); } style() { return ` h1 { cursor: pointer; } `; } handleClick(target, click) { console.log(target.innerHTML); } render() { return ` <div> <h1 onclick="handleClick(this, event)"> Hello, {{name}}! </h1> </div> `; } }; Omi.makeHTML('Hello', Hello); class App extends Omi.Component { constructor(data) { super(data); } installed() { // dom已经插入到指定的dom容器中了 this.hello.data.name = 'Sorrow.X'; // 给Hello类的实例hello添加name属性 this.update(); // 实例hello更新一下dom } render() { return ` <div> <Hello name="hello" /> </div> `; } }; var app = new App(); Omi.render(app, 'body');
demo的疑问和疑问的说明:
疑问1:
demo中的install方法是什么鬼?
答: 不是鬼,是类原型上的一个方法,这个方法Component类也有,只不过是空函数,子类如果重写了这个方法,
那么等到dom插入到指定的dom中后,就可以执行该方法(后面会讲解omi的生命周期)。
疑问2:
<Hello name="hello" />中的name对应的hello又是啥啊?
答:
这个其实在组件那一篇文章就讲解过了,name="hello"中的hello其实是Hello构造函数的实例。看看怎么实现的
然后给了app这个实例对象
然后提取完孩子后,就回到Omi.render方法
之后调用install方法,如果子类没重写,那就调用Component自己的install空函数
是不是so easy. 我热,我竟然会说英文。
ps:
这个demo,就此结束了,作者应该用此demo想证明一下,在omi中组件通讯就是这么简单方便,当然上帝模式还没开启,一旦开启,真的要飞起了。
相关文章推荐
- Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
- Omi框架学习之旅 - 插件机制之omi-router及原理说明
- Omi框架学习之旅 - 插件机制之omi-transform及原理说明
- Omi框架学习之旅 - 生命周期 及原理说明
- Omi框架学习之旅 - 获取DOM节点 及原理说明
- Omi框架学习之旅 - 插件机制之omi-touch 及原理说明
- 在2.6内核中,通过 netlink实现单播通讯(文件监控实例)
- 通过实例说明J2ME通用联网框架的使用
- 如何通过COM接口得到实现该接口的对象实例
- Android应用中通过AIDL机制实现进程间的通讯实例
- 反射实现 AOP 动态代理模式实例说明(Spring AOP 的实现 原理)
- 通过两个汇编实例对高级语言数组实现原理的发现
- Android应用中通过AIDL机制实现进程间的通讯实例
- 通过两个汇编实例对高级语言数组实现原理的发现
- ITEXT实例学习与研究(一) 之 HELLOWORLD的实现,解决中文问题,ITEXT框架
- java集合框架学习—ArrayList的实现原理
- java集合框架学习—HashSet的实现原理
- Android应用中通过AIDL机制实现进程间的通讯实例