生命周期

示意圖

舉個例子

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

    install () {
        this.data = {secondsElapsed: 0};
    }

    tick() {
        this.data.secondsElapsed++;
        this.update();
    }

    installed(){
        this.interval = setInterval(() => this.tick(), 1000);
    }

    uninstall() {
        clearInterval(this.interval);
    }


    style () {
        return `
        .num { color:red; }
        `;
    }

    render () {
        return `<div>Seconds Elapsed:<span class="num"> {{secondsElapsed}}</span></div>`;
    }
}

點擊這里→在線試試

事件處理

Omi的事件分內置事件和自定義事件。在內置事件處理方面巧妙地利用了瀏覽器自身的管線機制，可以通過event和this輕松拿到事件實例和觸發該事件的元素。

內置事件

什么算內置事件？只要下面正則能匹配到就算內置事件。

on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave)

內置事件怎么綁定？如下所示：

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

    handleClick(dom, evt){
        alert(dom.innerHTML);
    }

    render () {
        return `<div onclick="handleClick(this, event)">Hello, Omi!</div>`;
    }
}

自定義事件

開發者自己定義的組件的事件，稱為自定義事件，自定義事件必須以on開頭，即onXXXX的格式，不然Omi識別不到。這里拿分頁作為例子：

import Omi from '../../src/index.js';
import Pagination from './pagination.js';
import Content from './content.js';

Omi.makeHTML('Pagination', Pagination);
Omi.makeHTML('Content', Content);

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

    installed(){
        this.content.goto(this.pagination.data.currentPage+1);
    }
    handlePageChange(index){
        this.content.goto(index+1);
    }

    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>`;
    }
}

Omi.render( new Main(),'body');

如上面的onPageChange就是自定義事件，觸發會執行handlePageChange。onPageChange方法是在Pagination中執行：

import Omi from '../../src/index.js';

class Pagination extends Omi.Component {
    ...
    ...
    ...
            linkTo: "#",
            prevText: "Prev",
            nextText: "Next",
            ellipseText: "...",
            prevShow: true,
            nextShow: true,
            onPageChange: function () { return false; }
        }, this.data);

        this.pageNum = Math.ceil(this.data.total / this.data.pageSize);
    }
    goto (index,evt) {
        evt.preventDefault();
        this.data.currentPage=index;
        this.update();
        this.data.onPageChange(index);
    }
    ...
    ...
    ...
}

這里取了Pagination組件的部分代碼。高亮的就是執行onPageChange的地方。

相關地址

• 演示地址
• 源碼地址

招募計劃

• Omi的Github地址https://github.com/AlloyTeam/omi
• 如果想體驗一下Omi框架，請點擊Omi Playground
• 如果想使用Omi框架，請閱讀 Omi使用文檔
• 如果想一起開發完善Omi框架，有更好的解決方案或者思路，請閱讀 從零一步步打造web組件化框架Omi
• 關于上面的兩類文檔，如果你想獲得更佳的閱讀體驗，可以訪問Docs Website
• 如果你懶得搭建項目腳手架，可以試試Scaffolding for Omi
• 如果你有Omi相關的問題可以New issue
• 如果想更加方便的交流關于Omi的一切可以加入QQ的Omi交流群(256426170)