新浦京81707con > 注册购买 > Omi框架Store体系的前世今生,组件通讯攻略大全

原标题:Omi框架Store体系的前世今生,组件通讯攻略大全

浏览次数:104 时间:2019-05-07

组件通信

Omi框架创设间的广播发表卓殊遍历灵活,因为有为数不少可选方案实行报纸发表:

  • 透过在组件上注脚 data-* 传递给子节点
  • 透过在组件上证明 data 传递给子节点 (帮忙复杂数据类型的照射)
  • 父容器设置 childrenData 自动传递给子节点
  • 宣示 group-data 传递(补助复杂数据类型的炫目)
  • 全然面向对象,能够致极轻松地获得对象的实例,之后方可设置实例属性和调用实例的办法

从而通信变得畅通,上边一1来比如表达。

最初的作品链接-https://github.com/AlloyTeam/omi

data-*通讯

class Hello extends Omi.Component {
    constructor(data) {
      super(data);
    }
    style () {
      return  `
      h1{
        cursor:pointer;
      }
      `;
    }
    handleClick(target, evt){
      alert(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);
    }

    render() {
        return  `
        <div>
            <Hello data-name="Omi" />
        </div>
        `;
    }
}

Omi.render(new App(),"#container");

一般data-用来传递值类型,如string、number。值得注意的是,通过data-接收到的数据类型都以string,供给活动转成number类型。
一般性状态下,data-能满意大家的供给,可是遇到复杂的数据类型是未曾主意通过大气data-去抒发,所以能够通过data通信,请往下看。

Store 体系

先说说Store系统是怎么的!为何要造那样一个事物?能够系统架构带来如何?

当大家组件之间,具有共享的数目标时候,常常索要开始展览零部件通信。在Omi框架里,父组件传递数据给子组件格外便利:

  • 经过在组件上宣称 data-* 或者 :data-* 传递给子节点
  • 经过在组件上宣称 data 恐怕 :data 传递给子节点 (支持复杂数据类型的光彩夺目)
  • 宣示 group-data 把数组里的data传给一群组件传递(援助复杂数据类型的映射)

注:上边带有冒号的是传递javascript表明式

由此申明onXxx="xxxx"能够让子组件内进行父组件的诀窍。具体的如下图所示:

图片 1

借使还不驾驭的话,那... 我就直接上代码了:

class Main extends Omi.Component {

    handlePageChange(index){
        this.content.goto(index 1)
        this.update()
    }

    render () {
        return `<div>
                    <h1>Pagination Example</h1>
                    <Content name="content" />
                    <Pagination
                        name="pagination"
                        :data-total="100"
                        :data-page-size="10"
                        :data-num-edge="1"
                        :data-num-display="4"     
                        onPageChange="handlePageChange" />
                </div>`;
    }
}

下面的例证中,

  • 父组件的render方法里,通过 data-✽ 传递数据给子组件 Pagination
  • 因此onPageChange="handlePageChange"实现子组件与父组件通信

详尽代码能够点击: 分页例子地址

本来你也足以利用event emitter / pubsub库在组件之间通信,比方这一个唯有200b 的超小库mitt 。不过急需专注mitt包容到IE玖 ,Omi包容IE捌。可是,使用event emitter / pubsub库会对组件代码举办凌犯,所以那一个不提议在基础非业务组件使用那类代码库。

虽说组件通信分外有益,可是在真正的作业场景中,不仅是老爹和儿子、爷孙、曾外祖父和堂兄、大姐和堂哥...
onXxx="xxxx"就显得心有余而力不足,力不从心了,各个数码传递、组件实例互操作、 emitter/pubsub也许循环信赖,让代码极丑且难以有限支撑。所以:

Omi.Store是用来管理共享数据以及共享数据的逻辑 。

Omi Store使用丰裕便利,对架构侵袭性极极非常小(1个极代表比不大还要小)。上边一步一步从todo的例子看下Store体系怎么采用。

data通讯

如下边代码所示,通过 data-name="Omi"能够把name传递给子组件。上边的代码也能够直达同等的功效。

...
class App extends Omi.Component {
    constructor(data) {
      super(data);
      this.helloData = { name : 'Omi' };
    }

    render() {
        return  `
        <div>
            <Hello data="helloData" />
        </div>
        `;
    }
}

Omi.render(new App(),"#container");

行使data申明,会去组件的instance(也便是this)下找对应的属性,this下得以挂载大肆复杂的对象。所以那也就突破了data-*的局限性。

举个例子instance上面包车型大巴某部属性上边的某部属性上边包车型大巴某部数组的率先个要素的某些属性要作为data传递Hello如何做?
不要紧,data注脚是永葆复杂类型的,使用方式如下:

...
class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.complexData ={
            a:{
                b:{
                    c:[
                        {
                            e:[{
                                name:'ComplexData Support1'
                            },{
                                name:'ComplexData Support2'
                            }]
                        },
                        {
                            name: 'ComplexData Support3'
                        }
                    ]
                }
            }
        };
    }

    render() {
        return  `
        <div>
            <Hello data="complexData.a.b.c[1]" />
        </div>
        `;
    }
}
...

点击这里→data映射复杂数据

定义 Omi.Store

Omi.Store是基类,我们得以承袭Omi.Store来定义自身的Store,举例上面包车型客车TodoStore。

import Omi from 'omi'

class TodoStore extends Omi.Store {
    constructor(data , isReady) {
        super(isReady)

        this.data = Object.assign({
            items:[],
            length:0
        },data)

        this.data.length = this.data.items.length
    }

    add(value){
        this.data.items.push(value)
        this.data.length = this.data.items.length
        this.update()
    }

    clear(){
        this.data.items.length = 0
        this.data.length = 0
        this.update()
    }
}

export default TodoStore

TodoStore定义了数据的骨干格式和数据模型的逻辑。
比方 this.data 正是数额的为主格式:

{
    items:[],
    length:0
}

add和clear便是共享数据相关的逻辑。

值得注意的是,在add和clear方法里都有调用this.update();那些是用来更新组件的,this.update并不会更新具备组件。不过他到底会更新哪些组件呢?等讲到store的addView方法你就掌握了。

childrenData通讯

...
class App extends Omi.Component {
    constructor(data) {
      super(data);
      this.childrenData = [{ name : 'Omi' } , { name : 'dntzhang' }];
    }

    render() {
        return  `
        <div>
            <Hello  />
            <Hello  />
        </div>
        `;
    }
}

Omi.render(new App(),"#container");

通用this.childrenData传递data给子组件,childrenData是叁个数组类型,所以帮忙同时给三个零件传递data,与render里面包车型大巴组件会相继对应上。

创建 Omi.Store

经过 new 关键字来利用TodoStore对象的实例。

let store = new TodoStore({ /* 初始化数据 */ ,/* 数据是否准备好 */  })

地点能够流传一些起初化配置音信,store里面便蕴藏了任何应用程序共享的动静数据以及奉献多少逻辑情势(add,clear)。

本来,那个开始化配置音信恐怕是异步拉取的。所以,有三种方法化解异步拉取store配置的主题材料:

  • 拉取数据,然后new TodoStore(),再Omi.render
  • 先let store = new TodoStore(),再Omi.render,组件内部监听store.ready,拉取数据变动store的data信息,然后实行store.beReady()

group-data通讯

childrenData的法门得以批量传递数据给组件,然而有无数场所下data的发源不断定非要都从childrenData来,childrenData是个数组,会和组件的逐1依次对应,那就给不一样传递格局的data必须一切集中的childrenData中,相当不方便人民群众。group-data特意为化解地点的痛点而生,特地是为了给1组组件批量传递data。

import Hello from './hello.js';


Omi.makeHTML('Hello', Hello);

class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.testData = [{name: 'Omi'}, {name: 'dntzhang'}, {name: 'AlloyTeam'}];
    }

    render() {
        return  `
        <div>
            <Hello group-data="testData" />
            <Hello group-data="testData" />
            <Hello group-data="testData" />
        </div>
        `;

    }
}

Omi.render(new App(),"#container");

只须求在评释的子组件上标志group-data,就能够去当前组件的instance(也正是this)下边找对应的质量,然后依照当下的职位,和对应数组的职位会相继对应起来。

运行结果如下:
图片 2

点击这里→group-data

一致group-data辅助复杂数据类型的映射,须求注意的是,group-data映射的顶峰必须是二个数组:

import Hello from './hello.js';


Omi.makeHTML('Hello', Hello);

class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.complexData ={
            a:{
                b:{
                    c:[
                        {
                            e:[{
                                name:'ComplexData Support1'
                            },{
                                name:'ComplexData Support2'
                            }]
                        },
                        {
                            name: 'ComplexData Support3'
                        }
                    ]
                }
            }
        };
    }

    render() {
        return  `
        <div>
            <Hello group-data="complexData.a.b.c[0].e" />
            <Hello group-data="complexData.a.b.c[0].e" />
        </div>
        `;

    }
}

Omi.render(new App(),"#container");

点击这里→group-data映射复杂数据

根组件注入 store

为了让组件树能够使用到 store,能够经过Omi.render的第陆个参数给根组件注入 store:

Omi.render(new Todo(),'body',{
    store: store
});

道理当然是那样的ES201伍业已允许你如此写了:

Omi.render(new Todo(),'body',{
    store
});

两份代码相同的功力。

通过Omi.render注入之后,在组件树的负有组件都足以经过 this.$store 访问到 store。

本文由新浦京81707con发布于注册购买,转载请注明出处:Omi框架Store体系的前世今生,组件通讯攻略大全

关键词: 新浦京81707con HTML5

上一篇:sass报错的解决方法

下一篇:没有了