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