木匣子

Web/Game/Programming/Life etc.

可在 html5 游戏中使用的 js 工具库

使用 cocos2d-js 3.0 开发游戏项目两三个月,积累了几个有意思的工具库,在此做一点小记。

Date/Time

在网络游戏中,不可避免地会使用到一些与日期和时间相关的功能,例如活动倒计时之类的。简单的做法是自己处理时间函数,或者使用 new Date() 来完成计算。但常常会遇到一些坑,导致各种异常。而且处理 strftime 之类的工作也没有想像中的容易。虽然 npm 上有不少现成的库可以使用,但这里要推荐一个超级棒的时间工具:moment.js

Parse, validate, manipulate, and display dates in javascript.

moment.js 拥有你想得到的所有日期/时间功能。此外最重要的是,它提供了 durations 概念,例如要倒计时 10 分钟,可用 moment.duration(10*60*1000) 来创建这样一个时间段。并且可以使用 humanize() 输出可读的字串符:

moment.duration("00:10:00").humanize(); // 10 分钟
moment.duration(10*60*1000).humanize(true); // 10 分钟内
moment.duration(-10*60*1000).humanize(true); // 10 分钟前

我曾使用过 new Date(-10*60*1000) 来创建类似的时间段,但在不同的运行环境中的表现不太相同——特别是使用负数时间段的时候,在 cocos2d-x jsb 环境下会出现问题。此外 Date 还会受到不同设备上的时区影响。

此外,还可以用 moment(/*now*/).from("2012-12-20") 来直接获得到某两个时间差的文字描述。

P.S.

moment.js 支持多国语言的时间格式化。使用 moment.locale("zh-CN"); 可以使用简体中文输出时间字符串。

Utils

最最实用的工具库,非 underscore.js 莫属了。它提供了大量便携的工具函数用于处理数组(arrays)、对象(objects)和函数(functions)

Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.

尤其重要的一点是,它还能很好的处理集合(collections)——可以是数组或字典结构的对象!这大大方便了程序的组织方式。

P.S.

underscore.js 的 String 扩展: underscore.string

Misc

另外一个不得不提的工具就是 Async.js

Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript.

在游戏中有许多异步工作,例如资源分块加载以及多个网络请求的组合操作。如果只用回调函数(callback)来处理的话,不得不写出一堆由花括号堆砌的晦涩难懂的嵌套函数(怪不得说 javascript 是回调的炼狱)。于是 Async.js 闪亮登场,漂亮地解决了这一难题。

它将多个异步操作用很简单的结构进行组装,在内部完成异步操作的结果处理,并提供了类似 underscore.js 的接口,对一组异步操作进行统一处理,大大简化了开发的工作量。


正是有了这些工具,才使得 javascript 从一款玩具语言变成如些成熟。