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的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)
Omi教程-生命周期和事件处理的更多相关文章
- 深入了解asp.net框架。生命周期以及事件处理机制
刚接触asp.net框架觉得很好奇.他的快速开发是怎么实现的.控件的状态又是怎么保持的.我们都知道http是无状态的.而且网上很多人都说使用asp.net框架使用服务器框架是非常慢的. 带着这些疑问我 ...
- asp.net应用程序生命周期
asp.net应用程序生命周期(流程文字描述版) 请求——>IIS——>ISAPI映射——>交给asp.net(即为IIS的扩展)——>通知Application类创建一个应用 ...
- angular2系列教程(十一)路由嵌套、路由生命周期、matrix URL notation
今天我们要讲的是ng2的路由的第二部分,包括路由嵌套.路由生命周期等知识点. 例子 例子仍然是上节课的例子:
- angular2系列教程(五)Structural directives、再谈组件生命周期
今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, n ...
- iOS10 UI教程视图的生命周期
iOS10 UI教程视图的生命周期 说到视图的生命周期一般都是指视图控制器的视图生命周期.在视图的声明周期中最主要的有8个方法,分别为loadView().viewDidLoad().viewWill ...
- Vue.js 系列教程 3:Vue-cli,生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
- Fastify 系列教程三 (验证、序列化和生命周期)
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) 验证 Fast ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- Omi框架学习之旅 - 生命周期 及原理说明
生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完 ...
随机推荐
- WINDOWS下搭建SVN服务器端的步骤分享(Subversion)
1.获取svn程序 2.安装 Subversion(以下简称SVN)的服务器端和客户端.下载下来的服务器端是个 zip压缩包,直接解压缩即可,比如我解压到 E:\subversion .客户端安装文件 ...
- css3快速复习
选择器边框.阴影 border-radius: 50%; 设置正圆形背景的改变CSS3重要的新东西: ● transition 过度,让一个元素从一个样式,变为另一个样式,不再是干蹦了,而是有动画,均 ...
- UVa 336 - A Node Too Far
题目大意:在计算机网络中,每条信息都有一个TTL值,在信息到达一个节点时,TTL值首先减1,如果TTL为0,则丢弃该信息报文.给一个网络的配置,给定源点和TTL值,判断该网络中有多少节点不可到达. 无 ...
- Mongodb 导出json 和csv 格式数据
导出到json: $ mongoexport.exe -d TestDB -c TestCollection -o ./test.json 导出到csv: If you want to outpu ...
- 大数据全栈式开发语言 – Python
前段时间,ThoughtWorks在深圳举办一次社区活动上,有一个演讲主题叫做“Fullstack JavaScript”,是关于用JavaScript进行前端.服务器端,甚至数据库(MongoDB) ...
- Borda count
波达计数法(Borda Count)是较为简单的排序投票法,每个选项借由选票上的排序来取得积分,积分最高者获胜.另一个类似的方法则是位置投票制. 投票人按喜好排列候选者.如果候选者在选票的排第一位,它 ...
- NodeMCU之旅(四):实现Web配置页面
引言 利用Web页面做配置可以轻松适应用户的多种设备,如Android, IOS等.本文将介绍如何在NodeMCU中实现配置页面. 接线图请参考NodeMCU之旅(三):响应配置按钮. 配置页面后端 ...
- python 循环使用 while 或 for 语句实现用户名密码输错三次退出
如有错误欢迎大家指出,新手初来乍到.程序没那么复杂,是最简单的. 一.需求 编写登录文件 .py1. 输入用户名密码2. 正确,输出欢迎登录3. 当输入用户名和密码小于 3 次,输入用户名或者密码错误 ...
- ASP.NET MVC和jQuery DataTable整合
本文包含代码示例说明如何jQuery插件开发者可以集成到ASP.NET MVC应用程序. 下载源代码- 87.4 KB Introduction The jQuery DataTables plug- ...
- Session是否为新建情况的判断
Session是否为新建情况的判断: Xml: <?xml version="1.0" encoding="UTF-8"?> <web-app ...