# 生命週期

名稱	含義	時機
constructor	建構函式	new的時候
install	初始化安裝，這可以拿到使用者傳進的data進行處理	例項化
installed	安裝完成，HTML已經插入頁面之後執行	例項化
uninstall	解除安裝元件。執行remove方法會觸發該事件	銷燬時
beforeUpdate	更新前	存在期
afterUpdate	更新後	存在期

## 示意圖  ## 舉個例子 ```js 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 `Seconds Elapsed: {{secondsElapsed}}`; } } ``` 點選這裡→線上試試 # 事件處理 Omi的事件分內建事件和自定義事件。在內建事件處理方面巧妙地利用了瀏覽器自身的管線機制，可以通過event和this輕鬆拿到事件例項和觸發該事件的元素。 ## 內建事件 什麼算內建事件？只要下面正則能匹配到就算內建事件。 ```js 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) ``` 內建事件怎麼繫結？如下所示： ```js class EventTest extends Omi.Component { constructor(data) { super(data); } handleClick(dom, evt){ alert(dom.innerHTML); } render () { return `Hello, Omi!`; } } ``` ## 自定義事件 開發者自己定義的元件的事件，稱為自定義事件，自定義事件必須以on開頭，即onXXXX的格式，不然Omi識別不到。這裡拿分頁作為例子： ```js 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 `

Pagination Example

`; } } Omi.render( new Main(),'body'); ``` 如上面的onPageChange就是自定義事件，觸發會執行handlePageChange。onPageChange方法是在Pagination中執行： ```js 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的地方。 ## 相關地址 * [演示地址](http://alloyteam.github.io/omi/example/pagination/) * [原始碼地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination) # 招募計劃 * Omi的Github地址[https://github.com/AlloyTeam/omi](https://github.com/AlloyTeam/omi) * 如果想體驗一下Omi框架，請[點選Omi Playground](http://alloyteam.github.io/omi/example/playground/) * 如果想使用Omi框架，請閱讀 [Omi使用文件](https://github.com/AlloyTeam/omi/tree/master/docs#omi使用文件) * 如果想一起開發完善Omi框架，有更好的解決方案或者思路，請閱讀 [從零一步步打造web元件化框架Omi](https://github.com/AlloyTeam/omi/tree/master/docs#從零一步步打造web元件化框架omi) * 關於上面的兩類文件，如果你想獲得更佳的閱讀體驗，可以訪問[Docs Website](http://alloyteam.github.io/omi/website/docs.html) * 如果你懶得搭建專案腳手架，可以試試[Scaffolding for Omi](https://github.com/AlloyTeam/omi/tree/master/scaffolding) * 如果你有Omi相關的問題可以[New issue](https://github.com/AlloyTeam/omi/issues/new) * 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)