SpriteJS —— Canvas动画从未如此简单

SpriteJS 的特点 Sprite texture 绘制矢量图 分组 响应事件 SpriteJS和D3 物理引擎 粒子系统 外部时钟 SpriteJS是一款由360奇舞团开源的跨终端canvas绘图库,可以基于canvas快速绘制结构化UI、动画和交互效果,并发布到任何拥有canvas环境的平台上(比如浏览器、小程序和node)。 JS Bin on jsbin.com 我们知道,Canvas Api可以很灵活地绘制各种矢量图形到画布上,但是Canvas Api本身比较

简单构建 ThinkJS + Vue2.0 前后端分离的多页应用

client 的配置 server 的配置 开发服务端 API 添加新页面 abc 生产环境构建 最近在使用 ThinkJS + Vue2.0 写一个简单的项目,该项目分为用户端和管理界面,分别对应vue的两个页面index和admin,用户端、管理界面自身是基于vue构建的单页应用,服务端采用thinkjs的提供api。 项目目录结构如下: . ├── README.md ├── client │ ├── README.md │ ├── build │ ├──

设计 Timeline 时间轴来更精确地控制动画

如何做到? 时间轴与 Timer currentTime 与 entropy 时间轴的继承 —— fork 总结 Firefox 偷偷实现了一个 AnimationTimeline,用来为动画提供时间轴。根据文档,它是一个抽象类,被 DocumentTimeline 继承。 由于是非标准的特性,MDN的文档里面也没有解释的很清楚,只是说它用来让多个动画共享时间轴,但是具体该怎么用,并没有详细的说明。 今天在这篇文章里,我并不想解释 Firefox 实现的这个 Timel

设计 Timeline 时间轴来更精确地控制动画

如何做到? 时间轴与 Timer currentTime 与 entropy 时间轴的继承 —— fork 总结 Firefox 偷偷实现了一个 AnimationTimeline,用来为动画提供时间轴。根据文档,它是一个抽象类,被 DocumentTimeline 继承。 由于是非标准的特性,MDN的文档里面也没有解释的很清楚,只是说它用来让多个动画共享时间轴,但是具体该怎么用,并没有详细的说明。 今天在这篇文章里,我并不想解释 Firefox 实现的这个 Timel

用信号来控制异步流程

总结 我们知道,JavaScript 不管是操作 DOM,还是执行服务端任务,不可避免需要处理许多异步调用。在早期,许多开发者仅仅通过 JavaScript 的回调方式来处理异步,但是那样很容易造成异步回调的嵌套,产生 “Callback Hell”。 后来,一些开发者使用了 Promise 思想来避免异步回调的嵌套,社区将根据思想提出 Promise/A+ 规范,最终,在 ES6 中内置实现了 Promise 类,随后又基于 Promise 类在 ES2017 里实

用信号来控制异步流程

总结 我们知道,JavaScript 不管是操作 DOM,还是执行服务端任务,不可避免需要处理许多异步调用。在早期,许多开发者仅仅通过 JavaScript 的回调方式来处理异步,但是那样很容易造成异步回调的嵌套,产生 “Callback Hell”。 后来,一些开发者使用了 Promise 思想来避免异步回调的嵌套,社区将根据思想提出 Promise/A+ 规范,最终,在 ES6 中内置实现了 Promise 类,随后又基于 Promise 类在 ES2017 里实

漫谈 JS 函数式编程(一)

数据抽象或过程抽象 纯函数 函数式编程能够减少系统中的非纯函数 Ramda.js 这可能是最简单易懂的函数式编程介(扯)绍(淡)了 目前前端界(以及其他一些领域)对函数式编程大体上两种态度,一些人是觉得函数式编程特牛逼,尤其是现在许多新生的框架和库都在标榜自己的函数式特征。而另一些人,又觉得函数式编程学起来很难,而且似乎也没有什么卵用,理由是在自己经历的项目里面很难看到具体的函数式编程应用场景,甚至其中许多人认同一个观点,觉得函数式编程只适合于学术研究,很难在工程

漫谈 JS 函数式编程(一)

数据抽象或过程抽象 纯函数 函数式编程能够减少系统中的非纯函数 Ramda.js 这可能是最简单易懂的函数式编程介(扯)绍(淡)了 目前前端界(以及其他一些领域)对函数式编程大体上两种态度,一些人是觉得函数式编程特牛逼,尤其是现在许多新生的框架和库都在标榜自己的函数式特征。而另一些人,又觉得函数式编程学起来很难,而且似乎也没有什么卵用,理由是在自己经历的项目里面很难看到具体的函数式编程应用场景,甚至其中许多人认同一个观点,觉得函数式编程只适合于学术研究,很难在工程

JavaScript 最新特性实现的三大黑科技

依次执行多项异步任务 generator 与 async/await 一同使用 使用 Proxy 实现 PHP 中的常用“魔术方法” 依次执行多项异步任务 有时候,我们希望批量执行一组异步任务,但是不是并行,而是依次执行,这组任务是动态的,在一个数组里,当然我们可以用 for 循环然后一个一个 await 执行,但是还有另外一种方式: JS Bin on jsbin.com async function taskReducer(promise, action){ le

JavaScript 最新特性实现的三大黑科技

依次执行多项异步任务 generator 与 async/await 一同使用 使用 Proxy 实现 PHP 中的常用“魔术方法” 依次执行多项异步任务 有时候,我们希望批量执行一组异步任务,但是不是并行,而是依次执行,这组任务是动态的,在一个数组里,当然我们可以用 for 循环然后一个一个 await 执行,但是还有另外一种方式: JS Bin on jsbin.com async function taskReducer(promise, action){ le