接着上一篇的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框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

    组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...

随机推荐

  1. DB2 中文排序问题

    本地测试库中 代码集: GBK 数据库配置发行版级别 = 0x0c00 数据库发行版级别 = 0x0c00 数据库地域 = CN 数据库代码页 = 1386 数据库代码集 = GBK 数据库国家/地区 ...

  2. -[__NSCFNumber length]: unrecognized selector sent to instance 0xb0000000000000e3

    网络数据解析出现-[__NSCFNumber length]: unrecognized selector sent to instance 0xb0000000000000e3这样的错误,具体 re ...

  3. hdu5390 tree

    先求出dfs序,然后建立线段树,线段树每个节点套一个set. 修改操作只需要改被子树区间完全覆盖的线段树节点,将其节点中set的原来的值删除,加入新值. 询问操作查询单点到根的所有节点上的set中与查 ...

  4. Lambda前世今生

    1.学习资料 匿名函数 C#编程指南http://msdn.microsoft.com/zh-cn/library/bb882516.aspx Lambda表达式 C#编程指南http://msdn. ...

  5. python 网络编程第三版

    为服务端增加多线程解决方案 1.服务端代码如下: ***这个版本并没有真正的起到多线程的作用,主要原因在于t.join():以后的版本会改进这个问题*** #!/usr/bin/python #!co ...

  6. TTL与非门电路分析

    TTL与非门(TTL推挽式与非门)是TTL集成逻辑门的一种,主要由三极管和二极管构成.如图(a)所示,它由输入级,中间级,输出级三部分组成.TTL与非门的优点在于输出阻抗低,带负载能力强,工作速度快. ...

  7. APIDOC的使用

    工具名称:APIDOCGit地址:https://github.com/apidoc/apidoc 项目地址:http://apidocjs.com/ 样例项目:http://apidocjs.com ...

  8. c++数组的引用

    引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样.引用的声明方法:类型标识符 &引用名=目标变量名: 引用最大的好处就是提高函数效率以及节省空间; 关键问题一.传递引用 ...

  9. springboot JPA

    JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.他的出现主要是为了简化现有的持久 ...

  10. awk命令的基本使用

    命令主要用法 -格式1:前置命令 | awk [选项] '[条件]{编辑指令}' -格式2:awk [选项] '[条件]{编辑指令}' filename 常用命令选项 -F:指定分隔符,可省略(默认空 ...