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

當耐特發表於2017-02-22
事件

生命週期

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>`;
    }
}複製程式碼

點選這裡→線上試試

事件處理

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教程-生命週期和事件處理

相關文章