对HTML5至关重要的10个Javascript资源

Javascript对于许多HTML5元素而言是必不可少的，例如canvas、audio和WebGL。在开发过程中，有一些工具、库和框架资源能为开发者提供很大的帮助。下面，让我们来详细了解其中的一些资源。

1. HTML5样板

如果你已经在使用HTML5，那么对这方面应该有所了解。HTML5样板允许开发者使用可下载的模板来构建出色的站点，这些模板包含了Normalize.css、jQuery和Modernizr（后续会有更多介绍）。若开发者需要一些特殊的模板而自己又无法创建，还可以要求定制框架。

此外，HTML5样板还包含了Apache设置，能够为开发者更便捷地提供卓越的性能。

2. Fabric.js

Fabric.js是一个基于HTML5新元素（如画布）的JS库。它具备解析SVG元素的能力，并支持使用内置对象，例如分组和遮蔽。通过Fabric.js，开发者可以轻松创建动画，无论是简单的几何形状，还是真实图像或高分辨率图像，都能适用。

虽然不使用Fabric.js也能在画布上进行绘画，但该库能让开发者更轻松地创建复杂图形，并且在图形操作和动画制作方面更加得心应手。它拥有一个扩展的事件系统，允许执行诸如鼠标滑过之类的操作，还支持在每一个像素点上进行拖放操作。

3. Modernizr

如前文所述，Modernizr是Web上最流行的JS库之一，许多框架都包含了这个库。使用Modernizr，即使浏览器不支持HTML5，开发者也可以利用有条件的JS和CSS来创建网页。

其工作原理是在页面加载时运行，检测浏览器特性，然后创建一个JS对象，并为HTML元素添加相应的类，以便使用CSS。由于它是开源的，设计者可以通过有条件的加载与回退机制，使用HTML5和CSS3，从而让没有最新版本浏览器的用户也能获得良好的体验。

如果你是WordPress爱好者，还有一个需要手动安装的Modernizr插件可供使用。

4. Backbone.js

Backbone.js允许开发者通过添加绑定键值的模型和自定义事件来创建Web应用程序。它可以连接到所有预配置的JSON API，并且拥有丰富的API和大量的事件处理功能。

在Backbone.js中，数据可以被当作模型来处理。当用户的行为导致数据发生改变时，模型会自动触发一个改变事件，这意味着模型改变时会相应地更新HTML，而无需从其他地方粘贴代码。Document Cloud就是使用Backbone.js构建的，你可以去查看参考。

5. Dirty Markup

如果你更喜欢在本地工作时使用网络工具，尤其是当你对JS不够自信，或者是Web开发新手时，那么Dirty Markup是一个不错的选择。它是一款免费的应用程序，不仅可以快速、简单地清理JS代码，还能用于清理HTML5和CSS代码。

Dirty Markup将HTML清理、CSS清理和JS美化功能整合在一起，为开发者提供了一个在同一地方整理所有代码的优质资源。它使用了Ace编辑器，这是一个与Sublime Text功能类似的线上代码编辑器。使用时，只需将代码粘贴到选项框旁边的编辑器框中，然后点击“清理”按钮即可。

6. JFormer

JFormer是一个用于添加表格的高效资源，由精通jQuery的开发者编写。它允许开发者在客户端和服务器端对表格进行验证，并使用Ajax在不改变页面的情况下处理表格数据。使用JFormer生成的表格符合所有必要的标准。

JFormer在MIT许可下可以免费使用，并且提供了现成的模板，能帮助开发者更快速、方便地运行。此外，开发者还可以编辑CSS，使表格样式更符合项目需求。

7. Live.js

Live.js是一个监测工具，它通过向服务器发送标题请求来监测Javascript和CSS的变化。一旦有必要的更改，这些更改会动态应用于CSS、HTML和Javascript，页面会自动重载。

该工具的框架和语言是独立的，意味着它可以支持多种语言，并且与Firefox、Chrome、Safari、Opera和IE 6以上的浏览器兼容。据开发者称，使用Live.js可以让开发者告别频繁切换窗口的操作。

8. Chart.js

Chart.js是一个使用画布和SVG元素创建各种图表（如饼状图、调查图和环形图等）的便捷工具。虽然它本身不具备交互功能，但可以结合Fabric.js来实现交互效果。此外，Chart.js还可用于SVG元素的动画制作。

使用Chart.js可以创建复杂的图表，并且在使用SVG时，能获得更佳的滚动和页面性能。

9. Grunt

Grunt已经成为一个非常受欢迎的资源，它是一个基于Javascript运行的任务自动化工具，允许开发者自动执行常见的重复性任务，如简化、编译、单元测试等。

Grunt拥有一个庞大且实用的生态系统，包含了许多可以帮助开发者自动执行任务的插件。

10. Cocos2D-Javascript

对于喜欢开发游戏的开发者来说，Cocos2D-Javascript是一个在浏览器中运行2D游戏和图形的引擎。这意味着开发者无需安装额外的插件（如Flash和Java），即可在浏览器中进行2D渲染。

虽然有文档指出，由于部分浏览器不支持HTML5，可能无法实现内在渲染，但目前这已经不再是一个普遍问题。在实际工作中，大多数浏览器都能支持画布和SVG项目。不过，为了确保旧版本浏览器的用户也能正常体验游戏，可以通过插件创建一个回退机制。

综上所述，Web正在不断发展和完善，用户界面和用户体验已经成为设计的重要元素之一。JS的强大功能使得这些方面变得更加出色。考虑到这一点，任何优秀的开发者都应该积累足够的知识，以便有效地将JS嵌入到HTML5中。如果你还没有尝试过使用JS和新的HTML5元素，不妨现在就开始尝试。