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

时间:2021-08-29 15:34:50

上一篇文章说了omi中的组件,以及组件如何使用及嵌套。

那omi中的组件是怎么通讯的呢?

其实omi提供的通讯方式比较丰富,各有千秋,各有各的场景用途。所以按需使用即可。

老规矩:先上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}}! {{str}} {{bool}} {{num}} {{arr}}
</h1>
</div>
`;
}
}; Omi.makeHTML('Hello', Hello); class App extends Omi.Component {
constructor(data) {
super(data);
} render() {
return `
<div>
<Hello name='hel' data-name = "Sorrow.X" data-str = "str"/>
<Hello data-bool = true data-num = 111/>
</div>
`;
}
}; var app = new App();
Omi.render(app, 'body'); setTimeout(() => {
app.hel.data.name ='名字';
app.hel.data.name ='str字符串';
app.hel.update();
}, 2000);

先看看omi中文文档的说明:

一般data-用来传递值类型,如string、number。值得注意的是,通过data-接收到的数据类型都是string,需要自行转成number类型。

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

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

疑问1:

data-xxx后面的名字可以直接用在子类(这里指的是Hello)的render方法中吗?

答:是的,作者是这么做到的。如下

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

往下看

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

我们来看看1这里的代码:

    _capitalize (str){    // data-xxx后面的xxx字符串
str = str.toLowerCase();
str = str.replace(/\b\w+\b/g, function (word) {
return word.substring(0, 1).toUpperCase() + word.substring(1);
}).replace(/-/g,''); // 第一个字母大写后面的小写
return str.substring(0, 1).toLowerCase() + str.substring(1); // 第一个字母小写后面的小写(全都小写)
}

之后得到dataset对象,里面有我们设置的值啦。

然后就new 子类的实例,然后sub_child._childRender(childStr,true);(说明: 这里其实帮我们生成了子类的html和css还有事件的转换,组件那篇文章已经说过了)。

之后就把该数据dataset给了子类实例的data属性(此demo只有dataset有数据合并了,如果其他对象有数据依次合并,属性相同的话,后面的会覆盖前面的Object.assign(baseData,child.childrenData[i],dataset,dataFromParent,groupData ))。

疑问2:

同一个Hello标签可以多次使用吗?

答:那肯定撒,作者是这么做到的,如下:

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

其实是遍历了2次

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

那怎么合并到父组件中呢,其实回到_render方法中,如下

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

然后渲染到dom中去了。

然后就这么结束了。

ps:通过data-✼通讯也是一锤子买卖。后续变更只能通过组件实例下的data属性去更新组件。

所以最好指定子类的实例名比如name=hel,如demo中的,可以跟新数据。

也可以指定omi-id,后续再讲。