Omi教程-生命週期和事件處理

時間 2019-11-05

標籤 omi 教程生命週期事件處理简体版

原文原文鏈接

生命週期

名稱	含義	時機
constructor	構造函數	new的時候
install	初始化安裝，這能夠拿到用戶傳進的data進行處理	實例化
installed	安裝完成，HTML已經插入頁面以後執行	實例化
uninstall	卸載組件。執行remove方法會觸發該事件	銷燬時
beforeUpdate	更新前	存在期
afterUpdate	更新後	存在期

示意圖

舉個例子

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

點擊這裏→在線試試html

事件處理

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

內置事件

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

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)

內置事件怎麼綁定？以下所示：web

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的地方。dom