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

接着上一篇的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很不错,感兴趣的可以研究一下源码。

时间: 2024-11-05 19:27:32

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

Omi框架学习之旅 - 组件通讯(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> <

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

先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做的笔记.也许看的get不到点吧.所以强烈看官网 文档:https://alloyteam.github.io/omi/website/docs-cn.html github: https://github.com/AlloyTeam/omi 好了,该做笔记了.这次主要记录一下omi-router插件

滴滴Booster移动APP质量优化框架 学习之旅 二

推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 续写滴滴Booster移动APP质量优化框架学习之旅,上篇文章分析内置的transform:booster-transform-shrink booster-transform-shared-preferences,今天分析booster-task-compression以及定制task对资源索引文件resource.asrc进行优化(重复资源优化.无用资源优化

Spring学习之旅(四)Spring工作原理再探

上篇博文对Spring的工作原理做了个大概的介绍,想看的同学请出门左转.今天详细说几点. (一)Spring IoC容器及其实例化与使用 Spring IoC容器负责Bean的实例化.配置和组装工作有两个接口:BeanFactory和ApplicationContext.其中ApplicationContext继承于BeanFactory,对企业级应用开发提供了更多的支持.在实际应用中都是用该接口. 1)实例化Spring容器(主要有四种) 1.ClassPathXmlApplicationCo

HTML5 例子学习 HT 图形组件

HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.hightopo.com/guide/

我的AngularJS 学习之旅

基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就听朋友说起AngularJs,但由于各种原因,一直没去研究.最近正好有同事也对这个框架比较感兴趣,大家一起讨论,于是终于“名正言顺”地开始研究了. 本文的目的是记录一下自己这两周的学习点滴,算是学习笔记吧,如果对初学的朋友有一点帮助,那也算是一件好事.嘿嘿 1.Angular的 起源 关于Angular 的起源,可以追溯到2009 年的

Yii框架学习笔记(二)将html前端模板整合到框架中

选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/topics/390807796 更多内容 百度:yii 前端 http://my.oschina.net/u/1472492/blog/221085 摘要 Yii框架学习笔记(二)将html前端模板整合到框架中 原文地址:http://www.ldsun.com/1309.html 上一节成功将Y

180分钟的python学习之旅

最近在很多地方都可以看到Python的身影,尤其在人工智能等科学领域,其丰富的科学计算等方面类库无比强大.很多身边的哥们也提到Python非常的简洁方便,比如用Django搭建一个见得网站只需要半天时间即可,因此也吸引了我不小的兴趣.之前相亲认识过一个姑娘是做绿色环保建筑设计行业的,提过她们的建筑物的建模也是使用Python,虽然被女神给拒绝了,但学习还是势在必行的,加油. 这部分只涉及python比较基础的知识,如复杂的面向对象.多线程.通信等知识会放在之后的深入学习中介绍,因此整个学习过程也