炫意html5
最早CSS3和HTML5移动技术网站之一

超越jQuery: 用JavaScript工具生成HTML5

现在有四十几种JavaScript库适合移动设备,基于画板的动画,HTML5视频,本地数据库,服务器互访等。

jQuery的普及度很广,而且其创建者从Prototype,Dojo和雅虎YUI中找到了很多简洁的办法,然后再将其调试成易于使用的工具。当jQuery培养出丰富的插件文化时,这个库也变得不可替代。有人做过随机统计称至少七成JavaScript是jQuery。虽然这一统计并无科学数据验证,但是有人使用就说明了它的优势。

沉浸于这种成就之中,我们很容易遗忘其他值得一试的JavaScript库。其实有些库和jQuery一样都对不同浏览器上的DOM操作进行了简化,而且还各具特色。或许比起jQuery它们没有明显优势,但因为有特色所以值得一试。

雅虎YUI库为例,它是大型跨浏览器的开源工具集之一,也是最大最丰富的工具集之一。雅虎2009年发布了Version 3,而Version 2和Version 3都发展得越来越好。它包含了很多图表,小部件和其他工具,比其他JavaScript库更具变化性。雅虎还在装饰技巧方面投入了更多精力。很多支持Flickr和雅虎邮箱的性能都能在此找到,只等你来整合代码。

和jQuery以及雅虎YUI一样,MooTools提供了漂亮的,不依附于浏览器的便捷方法用于操作数组,div,span等。笔者最喜欢的是构建库的自定义工具,因为在优化版本中开发者可以选取自己想要的函数。这是个轻量级工具。

有很多其他库还提供了更新的特性——可用于动画,数据虚拟化,服务器端处理等——又或者是在浏览器中提出新的思考。

动画和HTML5游戏引擎
HTML5对外宣称的功能之一就是替代Flash插件,也是在屏幕上制造炫目效果的黄金标准。这一变化正随着游戏业不断复制复杂的Flash工具而悄然发生。

Mashi是款令人印象深刻的动态效果设计工具。它提供了很多标准简化函数使要素沿着时间轴移动。

浏览器游戏引擎的列表越来越长,现在JavaScript画板对象也得到了改进而且也具有相对持续性。虽然结果并不及Flash那样漂亮,但是这中间的差距应该会越来越小。

如果你喜欢棋盘游戏,你就会喜欢pp3disco游戏盘的三维正视图。只需几行代码就可完成这一设置。CasualJS(http://code.google.com/p/casualjs/)和ActionScript一样可以带来Flash体验。Crafty (http://craftyjs.com/)的作者显然花了大量时间做冲突检出。水果忍者的粉丝可以在其浏览器中玩Crafty出品的Fruit Assassin (http://craftyjs.com/demos/fruitassassin/)。

视频库
理论上,没有什么比在HTML上贴上视频标签更容易。而实际上,要实现浏览器之间的兼容并不是那么简单。很多很好的HTML5库可以让你写出标准的HTML5视频标签。如果浏览器不能处理你的视频,那么这些标签就会被Flash或QuickTime替代。

Video for Everybody(http://camendesign.com/code/video_for_everybody)项目提供了更好地库,这个库有很多在后台操作的性能可以让旧版浏览器中(如IE8)的视频播放更流畅。如果这个项目缺少你需要的特性,你可以看看VideoJS(http://videojs.com/ )和MediaElement.js (http://mediaelementjs.com/ ),这两个项目在Video for Everybody代码的基础上添加了自己的事件和控件层。

以VideoJS为例,它简化了换肤操作。某些CSS文件没有包含图像,因此减少了带宽成本。MediaElement.js提供了大量元性能,如控制字幕。这就解释了人们选择字幕语言的原理。

大数据虚拟化
如果专家们的说法准确,那么现在正有着庞大的数据等待人们处理。第一代HTML5库更侧重创建表单和生成表格。现在,有很多库都聚焦于在<canvas>对象上创建图表和绘制图片。

你可以找到大量选项用来绘制基本的线状图,柱状图以及混合了二者的图片。Flot (http://code.google.com/p/flot/),Flotr (http://solutoire.com/flotr/ ),Raphael (http://raphaeljs.com/ )和JSCharts (http://www.jscharts.com/home )是少有的几个能保障音效的库。

有些库甚至更进一步。Protovis(http://mbostock.github.com/protovis/)的样本集及D3(Data Driven Documents的简称 http://mbostock.github.com/d3/ )——显示了需要多复杂的构造(如Voronoi图表和网络图片)才能进行数值变动之外的操作。Simile Widgets(http://www.simile-widgets.org/exhibit/)则提供了不同的视图集,这些视图更侧重地图[v1]和时间轴。

这些项目体现了我们还只是刚刚才开始找到好的方法把数据转换成图片,从而帮助我们更快更有效地获取大量信息。

数据虚拟化中一个有趣的方面就是在<canvas>标签上绘制网络图片,这一功能对社交网络和流程表非常有用。Canviz (http://code.google.com/p/canviz/)是一个绘制法则集,它可以用直线和曲线把网络绘制成图片。

Draw2D (http://draw2d.org/draw2d/)则采用不同方法。它创建出完整的Visio式图片,可以连接多边形并对工作流程进行解释。

绘图
大多数人都会使用大型绘图库来显示街道地址。但是如果希望与众不同该怎么办呢?

Tile 5 (http://tile5.org/) 可以把绘图文件从GeoCommons(http://geocommons.com/ )等资源处拉出来,然后展开,这样用户就可以像在Google,Mapquest或雅虎中一样对地图进行随意拖放。不过还有其他的可能性:动画操作可以改变显示参数。通常,这被用来进行摇拍或是定位。

像素修改
Pixtastic (http://www.pixastic.com/)等项目表明HTML5不再关注文字和静态图片。这是一个JavaScript库,可提供许多基本性能。

它有一个像素级操作的大型集合,包括颜色调整以及过滤器的应用(如模糊图片或计算边界线)。这个基本库已经有几年的历史,但是Jacob Seidelin一直在创建应用实例——就好像被称为Filterrific (http://10k.aneventapart.com/1/Entry/219)的小型Web应用。

移动库和浏览器书籍
移动浏览器发展势头迅猛,为了智能手机和平板电脑上更轻松地获取信息,移动浏览器技术的发展也变得越来越重要。不过,如果手指头太粗大,且眼睛无法看清小字的时候,操作起来就不太方便。

jQuery Mobile (http://jQuerymobile.com/ ),Jo (http://joapp.com/)和Sencha Touch(http://www.sencha.com/products/touch/)是三个可以提供较好触控菜单的库,它们可以挖掘数据结构,然后为小屏幕显示信息。

iPad或许更适合阅读,虽然其价格不菲,但是却成为了身份的标志。很多聪明的程序员都在编写适合在其浏览器中进行文本阅读的工具,这样出版商就可以直接把电子书籍放到iPad中不需要向苹果交税或是接受苹果审核。

Treesaver(http://treesaverjs.com/)创建了一个类似杂志的布局,这样读者可以进行翻页操作。其代码仅有25K,而且在MIT和GPL证书下都有发布。

Baker Framework (http://bakerframework.com/ )是一个类似的项目,只是在美学设计上稍有不同。Treesaver希望营造出传统纸书的效果,Baker则设定了一个固定宽度使程序员的工作更简单。两个工具都可以直接从Web中获取书籍内容。

本地数据库
我们很容易忘记cookies是可以保存4096个字节。你肯定不希望这一数字达到饱和,因为每个cookie都会被提及给服务器——这就是为什么我们需要本地数据库的原因。新的工具库简化了与API之间的数据交换所以更易于我们利用本地数据库。

以HTML5SQL (http://HTML5sql.com/ )为例,它会为数据库提供相对较简单的SQL语句,让程序员创建表格,填充数据,然后对其进行询问。你会把更多的时间花在SQL的创建上而非JavaScript。

如果你想用JavaScript而不是SQL,TaffyDB (http://taffydb.com/ )则用JSON完成了大量类似的表格式询问,而且询问和更新可以关联起来。

服务器端处理
JavaScript库定位的是传统浏览器,但是这只解决了问题的一半。如果打算给服务器写一个AJAX调用,则需要服务器端能提问并作出响应。很多库都带有同时工作的客户和服务器组件。

SAJAX (http://sajax.info/)和XAJAX (http://xajax-project.org/ )都是为PHP而开发。你创建完一个PHP函数并将其注册到服务器后,JavaScript代码可对其进行调用并接收结果。这是在不对整个页面进行更新的情况下添加功能的理想方式。

有些工具库则则更进一步。比如,PHPLiveX (http://www.phplivex.com/)提供了一个集成的文件上传功能和智能缓冲用来提高性能。还有很多库也使用这一方法,当然有些集成功能更强。jQuery-PHP(http://jQuery.hohli.com/) 适合想要jQuery插件的人。

几乎每个平台都有适合自己的服务器交互库。Direct Web Remoting (http://directwebremoting.org/)为Java堆栈库的爱好者提供了由客户端向服务器端调用Java代码的机会,而且还可以阻止随意调用。该代码还提供了一条通道,帮助服务器向登录用户推入信息,这一功能有利于传播新信息。

Google Web Toolkit (http://code.google.com/webtoolkit/)中,所有的GWT代码都是用Java编写,然后被编译成JavaScript放到浏览器中运行。Pyjamas (http://code.google.com/p/pyjamas/)为Python程序员提供了类似的功能。

调试工具
JavaScript程序员最大的挑战之一是创建大型应用,而且越大往往意味着越需要调试。虽然你可以在较小页面中嵌入警告性语句,但是较大的页面则需要为调试信息提供更多结构。

Firebug (http://getfirebug.com/)是Firefox的扩展,它提供了一个精致的调试平台,包括有条件的断点以及编辑状态的功能。JavaScript可以按照三种严重性级别直接写入控制台对象。

Blackbird (http://www.gscottolson.com/blackbirdjs/)是一个独立的库,它会弹出一个单独的控制台窗口。程序员可以设置四种级别的漏洞,用户可以选择关闭或打开信息。而且它还提供了一个分析器为本地浏览器中的操作计时。

展望未来
HTML5下的新功能对JavaScript来说是一把双刃剑。它们提供了如此多诱人的方法,但同时又不是所有浏览器都为其提供支持。

Modernizr (http://www.modernizr.com/ )是一款测试集合,它会检查看当前浏览器是否支持所使用的性能。大多数测试都是创建一个DOM对象,然后看看该对象是否接受命令。

这里的JavaScript库集锦只是言及皮毛,因为还有更多的翻译和模拟工具可以让我们在浏览器中以任何语言运行工具。Pyjams (http://pyjs.org/ )是一个Python-JavaScript编译器。Google Web Toolkit (http://code.google.com/intl/zh-CN/webtoolkit/)可以把Java转换成JavaScript,RubyJS(http://rubyforge.org/projects/rubyjs)则是用来转换Ruby的。
原文链接:
http://www.infoworld.com/d/HTML5/beyond-jQuery-JavaScript-tools-the-HTML5-generation-178437

炫意HTML5 » 超越jQuery: 用JavaScript工具生成HTML5

(adsbygoogle = window.adsbygoogle || []).push({});
分享到:更多 ()

CSS3教程HTML5教程