2013-07-02|2014阅|作者:小蜜锋|举报 摘要:流行的JavaScript库,如jQuery, MooTools, Prototype, Dojo和YUI等,完成起常见的JavaScript任务来得心应手。这些JS库为客户端动作(events)、动画特效(effects),和AJAX应用等提供很多现成的函数。而且如果这些库中的
流行的JavaScript库,如jQuery, MooTools, Prototype, Dojo和YUI等,完成起常见的JavaScript任务来得心应手。这些JS库为客户端动作(events)、动画特效(effects),和AJAX应用等提供很多现成的函数。而且如果这些库中的某一个无法直接达到你要的效果,还可能会有相关插件满足你的要求。JavaScript库的灵活性给我们的工作提供方便,但有利也有弊——比如说JavaScript文件过大的问题。尽管放弃这些著名的JavaScript库能显示你的聪明才智,但你可能还是会愿意采用一些体积小巧、专注于特定任务的JavaScript库。以下是40个帮助你达到特定目的的独立JavaScript库。 网上能用的当然不只这些,但每位网页设计师和程序员应该都能在这里有所收获。1. 表单wFormswForms 是一个开源的、 无入侵的(unobstrusive)注*代码库,能够简化大部分与表单相关的常用JavaScript函数。 它能对表单的用户输入值进行验证,只需为表单元素添加一个特定的类即可使用。另外,wForms 还具有强大的表单同步(例如“全选/全不选”)和条件表单(如,当x被选择则显示y)功能。ValidanguageValidanguage 是一个无入侵的 JavaScript表单验证框架。它有一个继承逻辑,可以全局定义,也可以对每个表单或每个元素分别定义。利用作者提供的两个API,以及诸如综合的AJAX支持(integrated AJAX support)、缓存和调用函数等特性,该框架可以提供强健的(robust)验证体验。两个API用以高级设置,分别是加在注释里的像HTML语言的 API和基于JavaScript对象的API。LiveValidationLiveValidation是一个轻量级的JavaScript库,提供一系列验证函数。除了经典验证法,此库还具有实时验证(live validation)特性,能根据你键入的文字实时控制特定区域。 Ruby on Rails的开发者会发现LiveValidation异常好用,因为二者的命名规范和参数设置非常相似。虽然它是独立库,不过也有一个Prototype版注*。注* 也就是依赖于Prototype库,但是本身代码更简洁的版本yav一个功能强大、可扩展、使用灵活的表单验证代码库。yav可处理多种情况,从日期、email、整数之类的基本验证到掩码文本框和自定义正则表达式之类的高级应用,都得心应手。该库内建AJAX支持,并且可以轻易在每个对象层自定义错误显示信息。qForms处理表单的完全解决方案。为开发者提供诸如多样验证规则,阻止多次提交,锁定/禁用域等特性。formreform不用表格来实现多栏布局通常都很有挑战性。这个小巧的代码库能够把一个简单表单转换成一栏、两栏或四栏格式化布局的表单。利用formreform能自动让表单样式适应任何设计。2. 动画$fx()$fx() 是一个用户为HTML元素添加动画效果的轻量级代码库。利用此库,你可以指定在一定时间内改变任何CSS属性。对于复杂动画,你可以合并效果,给各效果分组,让它们链式反应或者同时发生。你还可以为每一步动画设定不同的回调动作,进行更深入的自定义。JSTweener补间动画的JavaScript库。它的API和著名的ActionScript补间动画引擎Tweener相似。你可以调用动画时间,定义形状变换方式和延迟。在几乎任何时间点(如onStart - 开始时, onComplete -完成时, onUpdate - 更新时),你都可以引发新动作。Facebook Animation用于创建基于CSS的自定义动画的强大代码库。利用一两行Facebook Animation,你就能改善用户界面。本代码库的语法遵循FBJS(在Facebook实用工具中使用的代码库),一旦学会,你也就具备了创建Facebook实用工具的能力!FX一个轻量级代码库,拥有和YUI类似的使用句法。FX可以为几乎所有CSS属性创建补间动画。支持颜色和滚动动画。你只需要设计任意对象,任意属性的起始值和结束值就够了。3. 视觉化和图像特效JS chartsJS charts 可以输出柱状图,饼图和曲线图。只需从一个XML文件或JavaScript数组里调用数据,它就能提供极佳的易用性。图表被输出为png图像文件。该库支持大部分流行的浏览器。Canvas 3D JS Library (C3DL)C3DL让编写3D应用更加容易。它提供一组算法、场景和3D对象类,对于想在浏览器里开发3D内容,但是对3D图像的深层算法不甚了了的程序员真是不小的福音。Processing.js这个JavaScript库指向 Processing 语言 (一个用于图像、动画和交互编程的语言)。它有丰富的特性用于创建2D输出,提供形状/图像绘制方法、颜色处理、字体、对象、算法函数等等。Rapha?l一个极赞的代码库,简化在网页中使用矢量图形的工作。Rapha?l 利用SVG和VML来创建图像,并能为这些图像绑定动作处理器。该库功能强大,包括旋转、动画、缩放和绘制曲线、矩形、圆形等。ImageFX可以为图像添加特效,例如模糊、锐化、浮雕、变亮等等。ImageFX使用画布元素来创建效果。兼容所有主流浏览器(你可以在其页面看到兼容性列表)。此库简单易用,只需要在网页中插入.js文件然后用一行代码调用就够了。PixasticPixastic 使用HTML5的画布对象,此对象可以直接处理像素级数据。支持的效果包括减淡和去色、反相、翻转、亮度和对比度调节、色相和饱和度、浮雕、模糊等等等等。由于画布对象相对较新,各个浏览器对这一JavaScript库的支持程度不尽相同。Reflection.js自动创建倒影效果的无侵入JavaScript库。倒影的高度和透明度可以自定义。使用该库就像给图像添加一个“类”一样简单。在所有主流浏览器中都能正常工作,文件大小不过5 KB。4. 数据库Taffy DB可以作为浏览器中的SQL数据库来使用的JavaScript,也可以看做是一个高级的“数组管理器”。在AJAX化的Web应用中,它可以工作在数据库层。你可以创建、读取、编辑和删除数据,也可以使用循环、归类以及各种高级查询方式。ActiveRecord.js此库支持Google Gears和Chrome,Aptana Jaxer,Adobe AIR ,以及任何支持W3C HTML5 SQL规范的平台(现在Webkit和iPhone也支持了)。它使在JavaScript利用数据库变得简单。使用ActiveRecord.js, 你能自动创建数据表、验证和同步数据等等。5. 字符串和数学函数Date.js和日期打交道总是很容易把人搞昏掉。如此多的点、斜杠和格式。Datejs以令人耳目一新的方式提供或简单或复杂的日期函数。它可以处理如下格式的日期:“Next thursday”(下星期四), “+2 years”(两年后) 以及诸如2009.01.08, 12/6/2001的所有格式。译注:此函数很有用啊,哪位朋友来把它汉化成可以支持中文就好了。Sylvester此JavaScript库可以轻松处理矢量和矩阵。有了它你就不用被一串串循环和大量数组搅得头昏脑胀了。此库包含模数化矢量和任意维度的矩阵的类,从而可以计算无限直线的模数和3D空间里的平面。Pretty Date 一个聪明的JavaScript解决方案,让过去一个月内的日期以更加漂亮和用户友好的方式显示。它能让日期以距离现在多久的方式显示,如“3天以前”,“昨天”。XRegExp正则表达式可以在JavaScript里通过RegExp对象加以利用。 XRegExp 能使正则表达式变得更加强大,它提供一些在将来的浏览器才会实现的特性(据 ECMAScript 4 - ES4 的开发愿景)。使用该库,RegExp对象可以被缓存和再利用,还能为已经存在的RegExp对象添加修改器等等。JavaScript URL Library一个用与方便处理URLs的JavaScript库。如果需要,它可以控制到将URL内每一个部分当做字符串来处理。这一URL代码库刚出炉不久,但已能像刚才所提一样工作。6. 字体typeface.js一个用以在网页上使用任意字体的代码库。与流行的解决方案(如sIFR 和 FLIR)不同,typeface.js 并不需要Flash,是100%的JavaScript应用。要使用任意字体,只需上传其字体文件到一个 基于网页的字体生成器,然后下载渲染过的JavaScript文件,把它添加到你的网页中即可。Cufón与typeface.js十分相似, Cufón 也是一个让你在网页中使用TrueType字体的代码库。同样,它也使用一个生成器来将字体文件转换成VML图像。只需在网页中插入generated .js文件,你即可像使用普通字体一样使用你指定的字体。7. 调试与记录Blackbird在JavaScript开发过程中,经常会用到alert()函数来添加断点。Blackbird 提供一个风格化的控制台,用以记录、查看和过滤JavaScript中的消息,如此即可消除在每个alert()的停顿,并且更好地分析它们,从而加快开发进程。NitobiBug基于浏览器的,跨浏览器 JavaScript 对象记录和检测组件。通过在你的代码中插入规则(和JavaScript对象的用法类似),你可以轻易区别简单类型,如字符串、布尔值和数值,以及复杂元素,如错误信息和JavaScript对象。Firebug LiteFirebug,大概是世界上最好的JavaScript调试工具,可惜只能在Firefox中使用。要在所有浏览器中拥有一个类似工具,向你的网页添加这个Firebug Lite .js文件吧,面对你的是你所熟悉的功能和界面。8. 其他swfobjectswfobject 是最流行的,扩展性最好的插入Flash影片的方式。此库符合Web标准,生成可以通过验证的标记,能够自动检测用户的Flash播放器版本,如果版本不匹配,它还允许你向用户显示代替内容。你可以看一看“为什么应该使用swfobject”这篇文章,写得不错。sorttable and dragtable不管你喜不喜欢,表格仍然是展示数据的最佳方式。不过表格还可以更好用: sorttable 让表格数据可以排序,升序降序均可。你指向为添加class=”sortable” 属性。你还可以排除某些特定的栏,让他们不自动排序,以及指定升序或者降序哪一个为默认值。dragtable 使表格的行列变得可拖动。在网页中插入此库后,同样,给表格添加一个class=”dragtable”即可。如果需要两个功能都用,只需在网页中包含同时两个库,然后添加class=”sortable dragtable” 。DD_roundies and DD_belatedPNGDD_roundies 是一个极佳的不利用图片创建圆角的JavaScript解决方案。它处理的重点在IE,通过使用VML来解决问题。其他浏览器被忽略,因为他们支持CSS的 border-radius 属性。DD_belatedPNG为臭名昭著的IE6 PNG问题提供了一个可自定义的解决办法。不论PNG图像是用于“src”或是“background-image”中, DD_belatedPNG 都能把它解决掉。与其他解决方案不同, “background-position” 和 “background-repeat” 属性也能正常工作!Custom JavaScript Dialog Boxes用于创建自定义对话框的轻量级(约 4.5 KB)代码库。四种对话框可用: alerts(出错), warnings(警告), prompts(提示), success(成功)。利用一个简单的函数,你可以自定义对话框的标题,内容和显示时间。GameJSGameJS 是一个JavaScript版本的 Microsoft’s XNA 游戏框架, 使用 “画布” 作为渲染机制。JavaScript不是编写游戏的最佳平台。不过如果是那些帧速要求较低的游戏,而你又是一个JavaScript开发者,何乐而不为? 此库包含一些控制游戏元素、屏幕显示和键盘操作的方便好用的类。Shortcuts.js自从Google Reader和Gmail之后,Web应用里的键盘快捷键变得越来越流行,因为他们大大提升了易用性。Shorcuts.js提供更为方便地处理键盘快捷键的函数。 使用该库,创建快捷键,然后在按下键盘的同时就运行函数成为更易实现的可能。Mapstraction几个不同的地图供应商都提供了各自不同的API。如果你想在供应商之间转换(比如说从Google Map转到MapQuest),则需要重写一些代码。Mapstraction就是用来帮你解决这个问题的。它提供一个通用 API ,帮你在大多数流行的地图供应商之间转换。只需更新一行代码,即可转换完毕。Amberjack一个小巧的JavaScript库,为你的网站添加上漂亮的导游信息。 一旦启用,一个模式化的内容框就能像到导游一样介绍您的站点,框内可以添加任意你想要的内容。导游内容的代码可以手工编写,也可以用线上工具自动生成。当然,你可以通过编写css或者利用即刻可用的主题来使导游信息符合内容框的样式。JsLoadJavaScript库的远程载入API。JsLoad这个简单的API能够让你从Google的服务器上导入大体积JavaScript文件。JsLoad能自动载入任何版本代码库的依赖文件。