为什么尝试使用 Canvas 绘制列表?使用 canvas 绘制列表的好处在于页面只有一个 dom 元素,这样对于大量 dom 元素组成的列表来说,无疑更节省页面内存。
本文将一步一步分析,如何实现一个 canvas 绘制的长列表。
Step1:dom 节点映射
首先考虑一个问题,对于我们在页面中常见的 dom 结点,在 Canvas 中如何表示?
因此我们的第一步工作就是实现 dom 结点到 Canvas 绘制对象的映射。
本教程演示如何使用 AEditor 制作一个简单的 H5 交互页 demo:
交互页 demo 地址:
AEditor 访问地址:
AEditor 是一个方便广大 web 开发者进行 H5 动画交互页开发的工具,开发者可以在 AEditor 上对交互动画以进行编辑,最终导出页面项目。与面向大众的 H5 交互页编辑平台(如玉兔,易企秀等)不同的是,AEditor 面向开发者,在提供预设动画模式的同时,支持对动画进行帧的编辑,事件通知模型,以及可二次开发的特性,从而让开发者能更灵活地实现各种自定义的动画交互需求。
访问地址:http://aeditor.alloyteam.com/
浏览器支持:只支持 chrome 浏览器
快速上手教程:http://www.alloyteam.com/2015/07/aeditor-kuai-su-shang-shou-jiao-cheng/
概览
AEditor 主要由五部分组成,分别是:基础操作栏、时间轴管理栏、元素属性编辑栏、精灵管理栏以及预览区域。
如果是单纯的运行一个 node 进程,那会比较简单,例如:
1 |
node ./example.js |
但是一般来说,当我们运行一个 node 进程之后,我们可能希望对这个进程进行更多的管理,例如,当 node 程序是一个 server 服务时,我们就有更多的需求。
例如:
1. 服务挂掉的时候自动重启。
2. 列出所有服务,包括服务的信息。
3. 能够重启/终止某个服务。
4. 为服务的运行记录日志。
目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的 script 脚本中引入所用 js 就可以了。
但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以 node 作为后端为例):
1.spa 的应用,需要同时支持服务端直出页面以及客户端 pjax 拉取数据渲染,客户端和服务器公用一套渲染模板并执行大部分类似的逻辑。
2. 一个通过 websocket 对战的游戏,客户端和服务端可能需要进行类似的逻辑计算,两套代码分别用于对用户客户端的展示以及服务端实际数值的计算。
这些情况下,很可能希望我们客户端代码的逻辑能够同时无缝运行在服务端。
如果要异步执行一个函数,我们最先想到的方法肯定会是 setTimeout
例如:setTimeout(function( /* 1s 后做点什么 */){},1000}
那如果说要最快速地异步执行一个函数呢?
是否会是:
1 |
setTimeout(function( /* 尽快做点什么 */){},0} |
可惜的是,浏览器为了避免 setTimeout 嵌套可能出现卡死 ui 线程的情况,为 setTimeout 设置了最小的执行时间间隔,不同浏览器的最小执行时间间隔都不一样。chrome 下测试 setTimeout 0 的实际执行时间间隔大概在 12ms 左右。
兼容:IE7 8 9 10 chrome firefox
demo 地址
之所以说这是 CSS 的障眼法,是因为这种效果并不是使用 CSS 原生的属性进行实现的,并不仅仅是使用一张图片,然后通过特定属性使其翻转,因为我们知道 CSS 并不提供另图片翻转的接口。要实现这种效果,我们需要的是通过图片和外层 div 的 border 的配合,使图片看起来翻转了一定角度。
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2