事件和组件
部分 2 作者 Paul Thompson and Ivan Torres(唐华).
翻译人: Hades
- 简介wire/bind
- 事件和组件
- 更多状态和简单状态管理
- 引用类型和自定义类型
- 自定义元素
- 自定义我的”自定义元素”
- 小测试!
- 异步加载,占位符和代码补全
- Handling routes
- 第三方类库
如果你看完第一部分, 现在你就知道了关于hyperHTML的基础了. 这次我们要深入了解一下. 回忆一下我们在第一部分中建立的表:
https://stackblitz.com/edit/basics-table?ctl=1&embed=1&file=index.js
让我们从表头的列的排序开始.
事件
首先,我们把之前的例子中的渲染部分移植到一个函数中,以便复用. 例子如下:
https://gist.github.com/pinguxx/1fa59056bb9a78acfc6ebc7b78eeda43#file-render-simple-table-js
我们将它变成下面的样子:
https://gist.github.com/pinguxx/ca3f9fd8356e2df57abdfc7590f8fd3f#file-render-simple-table-fn-js
接下来我们要做的是更新列头,包含一个 <a> 标签, 为了让用户知道这是一个可点击的地方. 我们还需要一个监听事件去捕获单击事件. 为了简单明了, 我们添加一个 data-target 参数, 为了让开发者知道用户想要对哪一列进行排序. 通过这里的这些步骤我们的 <thead> 模板就告一段落了:
https://gist.github.com/pinguxx/1f9886d5da544065bd67e3d31b4b3fae#file-render-simple-table-fn-2-js
什么是 onclick ? HyperHTML 允许我们传入一个函数并且它会被我们调用. 让我们创建一个简单的排序函数,去看看会发生什么:
https://gist.github.com/pinguxx/24b43256a8e3f9ba799926187ab03868#file-render-simple-table-sort-js
在这个例子中,我们的目标和当前的几点是相同的.很好!现在我们有了一个包含data-target的锚点,就是用来排序的锚点.让我们更新一下我们的排序函数:
https://gist.github.com/pinguxx/71b23929ed5e65bf2e4e547791194b7c#file-render-simple-table-sort-1-js
是不是看起来不错,但是如果用户第二次点击这表头,这个表就不能再次返回原来的顺序了.这是我们需要的功能,所以让我们一起修复这个问题然后看看它是怎么工作的.
https://stackblitz.com/edit/basics-table-1
如果你查看这个表的代码了,你会看到,只有内容行被重新绘制了,即使我们每次都调用显示方法(display).HyperHTML 非常聪明,它只更新了被改变的那部分.所以这就证明了它的执行有多快,渲染函数使用起来有多简单.
组件
现在我们的表也有了, 接下来就更简单了,如果我们把所有相关的代码都放到一个单独的地方.然后清空我们的代码, 我们可以在其他的项目中复用这个表.我们可以用一个简单的对象证明:
https://stackblitz.com/edit/basics-table-2
之前我们有一个带HTML的基础JS对象,作为我们的渲染变量 ,数据作为我们的数组变量和状态. 我们把render()函数从display()函数中移出来, 然后注意:我们就没有排序sort()函数了. 取而代之, 我们传入”this”到单击事件中:
onclick=${this}
并用...处理它
HandleEvent
这是一个非常特殊的函数,它是EcmaScript标准的一部分.If an object has it, 它会作为 obj.handleEvent(e)被调用. 这就意味着我们可以附带一个事件监听器
el.addEventListener('click',Table)
然后单击事件会被传到handleEvent函数中. this 将成为当前对象(不是元素!).在我们处理事件的时候,这可以解决很多典型的问题.关于更多handleEvent的炫酷内容查看下面的连接:
另外,你也可以使用一个函数去构建你的对象,就像你期待的那样.
https://stackblitz.com/edit/basics-table-3
上面的内容非常相似,唯一一个变化就是我们添加了一个id到这个表中.如果你不想使用classes去实现的话,你可以这么做,而且hyperHTML允许这么做.
类
之前的看起来都不错,但是如何使用classes呢?你可能会想,也许都差不多吧.
https://stackblitz.com/edit/basics-table-4
现在我们有了一个class,唯一修改的地方 是去调用属性参数,并且传一个id到一个对象的里面.也没什么特别的,就是简单的增强.
同时,hyperHTML也可以使用一个非常简单的方式去创建一个组件.它就是:hyper.Component.这个函数提供给我们一些额外的扩展:
state handling(状态处理)
default html attribute binded to itself(绑定默认属性)
handleEvent, but even easier!(处理事件,甚至更简单)
onconnected and ondisconnected functions(连接和断开函数)
and more(更多)
关于更多hyper.Component点击下面的链接
https://viperhtml.js.org/hyperhtml/documentation/#components-3
介绍的够多的了,一起看一下具体应用的例子!!
https://stackblitz.com/edit/basics-table-5
首先我们导入Component(组件)到我们的我们的导入中import(就是hyper.Component), 然后我们用这个表去继承它.这个组件Componentclass 会作用于“this.html”,所以我们就移除它.
使用组件去处理事件
我们的处理事件函数在哪?其实组件已经包含了这个处理函数了,所以我们不需要找了!定义组件处理事件就像这样:
this[‘on’+ event.type](e)
这个的意思是:如果你正在监听一个单击事件,handleEvent 将会收到“click”事件的类型并且会调用this.onclick(e),现在我们就有了我们每一个自己的”事件类型”函数 onclick(e){…}.
你甚至可以拥有一个定义处理自定义事件的函数!例如,say you are emitting 一个自定义事件,“enroll”. 你可以附加一个监听器:
onenroll=${this}
然后代替组件去处理它,如下:
onenroll(e){/* do stuff with the enroll event! */}
https://gist.github.com/pinguxx/9c2187b8039c9ab50903b3de31fa1e03#file-custom-event-js
回到这个表中,现在我们有onclick函数,去处理表头上的单击事件和排序功能.
状态值State
注意,我们添加过的 getdefaultState(){...}这个函数.这是个返回初始化状态的函数,如果你还没有设置或者更新状态值,你会得到一个默认值.了解更多请点击documentation
我们也添加了 onclick (sortfunction)函数,和一个调用 setState的函数.SetState 这个函数会更新状态值并且会神奇般的自动地执行渲染.其他的框架会同步更新这个状态,但是由于更新操作在hyperHTML框架种处理的非常快,setState这个函数会立马响应并执行.如果你需要更新几个值,我推荐构造一个对象然后再调用setState(newobj)函数一并更新.例子如下:
https://gist.github.com/pinguxx/62051dc580005a9dbf34d5850a82af46#file-updating-state-js
这次我们看到了很多代码.在坚持一下,其实我们只是刚刚接触到hyperHTML的皮毛.在接下来的部分,我们会学习在一个app中如何使用大量组件,如何去做条件限制渲染和更详细的组件介绍.
