生命週期
| 名稱 | 含義 | 時機 |
|---|---|---|
| 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的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)
