接着上一篇的data-*通讯,这篇写data通讯。

data通讯主要为了复杂的数据通讯。

老规矩:先上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);
this.helloData = {
name: 'Sorrow.X'
};
this.complexData = {
a: {
b: {
c: [
{
e: [
{
name: 'ComplexData Support1'
},
{
name: 'ComplexData Support2'
}
]
},
{
name: 'ComplexData Support3'
}
]
}
}
};
} render() {
return `
<div>
<Hello data="helloData" />
<Hello data="complexData.a.b.c[1]" />
<Hello data="complexData.a.b.c[0].e[0]" />
</div>
`;
}
}; var app = new App();
Omi.render(app, 'body');

个人说明:

data通讯可以支持复杂数据的原理很简单,omi会自动从父组件的实例属性上去寻找data="xxx"后面的xxx对应的实例的属性,找到后,然后把属性值浅拷贝到子类的data上,然后就可以开心的使用了。

文档地址:https://alloyteam.github.io/omi/website/docs-cn.html#

接下来说说这个demo的疑问和疑问的说明:

疑问1:

helloData和complexData.a.b.c[1]是干啥的?

答:其实上面的个人说明已经回答过了,那怎么实现的呢,如下:

来进入1的方法去看看:

    _extractPropertyFromString(str, instance){    // str: data的属性值, instance: Component子类的实例
let arr = str.replace(/['|"|\]]/g,'' ).replace(/\[/g,'.').split('.'); // 把字符串转换成数组
let current = instance;
arr.forEach(prop => {
current = current[prop]; // 把每次得到的结果然后在这个结果上看看有没有对应的属性(涨姿势了)
});
arr = null;
return current; // 返回 从实例身上获取str属性的值
}

找到属性对应的属性值后,就合并数据,创建实例,后面一样了。

ps:

data方式通讯是一锤子买卖。后续变更只能通过组件实例下的data属性去更新组件。

忘了说,提取标签上的属性使用的是html2json.js很不错,感兴趣的可以研究一下源码。

Omi框架学习之旅 - 组件通讯(data通讯) 及原理说明的更多相关文章

  1. Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明

    childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递 ...

  2. Omi框架学习之旅 - 组件通讯(data-*通讯) 及原理说明

    上一篇文章说了omi中的组件,以及组件如何使用及嵌套. 那omi中的组件是怎么通讯的呢? 其实omi提供的通讯方式比较丰富,各有千秋,各有各的场景用途.所以按需使用即可. 老规矩:先上demo代码, ...

  3. Omi框架学习之旅 - 组件 及原理说明

    hello world demo看完后其实基本的写法就会了. 但是omi中的组件是神马鬼?其实我也不知道组件是啥. 百度百科是这么说的: 是对数据和方法的简单封装.es6中,一个类其实也可以做到对方法 ...

  4. Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

    这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方 ...

  5. Omi框架学习之旅 - 插件机制之omi-router及原理说明

    先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做 ...

  6. Omi框架学习之旅 - 插件机制之omi-finger 及原理说明

    以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...

  7. Omi框架学习之旅 - 插件机制之omi-transform及原理说明

    给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很 ...

  8. Omi框架学习之旅 - 之开篇扯蛋

    说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好 ...

  9. Omi框架学习之旅 - Hello World 及原理说明

    学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...

随机推荐

  1. php 对象转数组

    //参考网上 但是别人给的方法有错误的地方public function eleme_callback(){ $res = (object) array('1' => 'foo'); $data ...

  2. spring boot 随手记

    1.当加入security 起步依赖后,如果不做任何手动配置的话,默认会跳转到一个登录页面,不管你喜不喜欢,所有的请求都必须登录,用户名和密码是保存在内存中的, 默认用户名是user  密码在控制台里 ...

  3. Java数据解析---SAX

    一.Sax解析 是从头到尾逐行逐个元素读取内容,修改较为不便,但适用于只读的大文档. Sax采用事件驱动的方式解析文档.简单点说,如同在电影院看电影一样,从头到尾看一遍就完了,不能回退(Dom可来来回 ...

  4. 安装Django(1)

    安装Django 注意:因为这是web项目将来要部署在Linux上,所以使用centos/ubuntu:因为Python3是将来的趋势,所以使用Python3做为开发语言.本人使用的开发模式操作系统: ...

  5. JavaScript大杂烩1 - 理解JavaScript的类型系统

    随着硬件水平的逐渐提高,浏览器的处理能力越来越强大,本人坚信,客户端会越来越瘦,瘦到只用浏览器就够了,服务端会越来越丰满:虽然很多大型的程序,比如3D软件,客户端仍然会存在,但是未来的主流必将是浏览器 ...

  6. JS笔记(二):对象

    (一) 对象 对象是JS的基本数据类型,类似于python的字典.然而对象不仅仅是键值对的映射,除了可以保持自有的属性,JS对象还可以从一个称为原型的对象继承属性,对象的方法通常是继承的属性.(这种对 ...

  7. http2

    原文转至:https://zhuanlan.zhihu.com/p/26559480 HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新,主要基于 SPDY 协议.由 ...

  8. Python鸢尾花分类实现

    #coding:utf-8 from sklearn.datasets import load_irisfrom sklearn.model_selection import train_test_s ...

  9. 性能测试—认识JMeter(三)

    <零成本web性能测试>第二章 JMeter基础知识总结和自己的理解 一.JMeter百度词条概念 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件 ...

  10. 将 Azure VM 迁移到 Azure 中的托管磁盘

    Azure 托管磁盘无需单独管理存储帐户,从而简化了存储管理. 还可以将现有的 Azure VM 迁移到托管磁盘,以便受益于可用性集中 VM 的更佳可靠性. 它可确保可用性集中不同 VM 的磁盘完全相 ...