Omi教程-组件

时间 2019-11-05

标签 omi 教程组件繁體版

原文原文链接

组件

Omi框架彻底基于组件体系设计，咱们但愿开发者能够像搭积木同样制做Web程序，一切皆是组件，组件也能够嵌套子组件造成新的组件，新的组件又能够看成子组件嵌套至任意组件造成新的组件...html

简单组件

这里使用Todo的例子来说解Omi组件体系的使用。git

class Todo extends Omi.Component {
    constructor(data) {
        super(data);
    }
    add (evt) {
        evt.preventDefault();
        this.data.items.push(this.data.text);
        this.data.text = '';
        this.update();
    }

    style () {
        return `
        h3 { color:red; }
        button{ color:green;}
        `;
    }

    handleChange(target){
        this.data.text = target.value;
    }

    render () {
        return `<div>
                    <h3>TODO</h3>
                    <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>
                    <form onsubmit="add(event)" >
                        <input type="text" onchange="handleChange(this)"  value="{{text}}"  />
                        <button>Add #{{items.length}}</button>
                    </form>
                </div>`;
    }
}

Omi.render(new Todo({ items: [] ,text : '' }),"body");

组件生成的HTML最终会插入到body中。上面的例子展现了Omi的部分特性:github

data传递: new Todo(data,..)的data能够直接提供给render方法里的模板
局部CSS: h3只对render里的h3生效，不会污染外面的h3；button也是一样的
声明式事件绑定: onchange调用的就是组件内的handleChange，this能够拿到固然的DOM元素,还能够拿到当前的event
须要手动调用update方法才能更新组件

这里须要特别强调的是，为了更加的自由和灵活度。Omi没有内置数据变动的自动更新，须要开发者本身调用update方法。
你也能够和oba或者mobx一块儿使用来实现自动更新。web

[点击这里->在线试试]npm

组件嵌套

若是页面超级简单的话，能够没有组件嵌套。可是绝大部分Web网页或者Web应用，须要嵌套定义的组件来完成全部的功能和展现。好比上面的Todo，咱们也是能够抽取出List。
这样让程序易维护、可扩展、方便复用。如，咱们抽取出List：框架

class List extends Omi.Component {
    constructor(data) {
        super(data);
    }

    render () {
        return `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;
    }
}

怎么使用这个List？咱们须要使用Omi.makeHTML把List制做成能够声明式的标签，在render方法中就能直接使用该标签。以下所示：组件化

import List from './list.js';

Omi.makeHTML('List', List);

class Todo extends Omi.Component {
    constructor(data) {
        super(data);
        this.data.length = this.data.items.length;
        this.listData = { items : this.data.items };
    }

    add (evt) {
        evt.preventDefault();
        this.list.data.items.push(this.data.text);
        this.data.length = this.list.data.items.length;
        this.data.text = '';
        this.update();
    }

    style () {
        return `
        h3 { color:red; }
        button{ color:green;}
        `;
    }

    handleChange(target){
        this.data.text = target.value;
    }

    render () {
        return `<div>
                    <h3>TODO</h3>
                    <List  name="list" data="listData" />
                    <form onsubmit="add(event)" >
                        <input type="text" onchange="handleChange(this)"  value="{{text}}"  />
                        <button>Add #{{length}}</button>
                    </form>
                </div>`;
    }
}

第3行，经过makeHTML方法把组件制做成能够在render中使用的标签。固然Omi.makeHTML('List', List);也能够写在List组件的代码下面。
第34行，在父组件上定义listData属性用来传递给子组件。
第34行，在render方法中使用List组件。其中name方法可让你在代码里经过this快速方法到该组件的实例。data="listData"可让你把this.listData传递给子组件。

须要注意的是，父组件的this.listData会被经过Object.assign浅拷贝到子组件。
这样作的目的主要是但愿之后DOM的变动都尽可能修改子组件自身的data，而后再调用其update方法，而不是去更改父组件的listData。this

关于Omi组件通信其实有4种方案，这个后续教程会专门来说。设计

点击这里→在线试试code

招募计划

Omi的Github地址https://github.com/AlloyTeam/omi
若是想体验一下Omi框架，请点击Omi Playground
若是想使用Omi框架，请阅读 Omi使用文档
若是想一块儿开发完善Omi框架，有更好的解决方案或者思路，请阅读从零一步步打造web组件化框架Omi
关于上面的两类文档，若是你想得到更佳的阅读体验，能够访问Docs Website
若是你懒得搭建项目脚手架，能够试试Scaffolding for Omi，npm安装omis即可
若是你有Omi相关的问题能够New issue
若是想更加方便的交流关于Omi的一切能够加入QQ的Omi交流群(256426170)