怎么运用JavaScript框架提高web顺序效率

摘要：当代站点和web使用顺序趋向于依托客户端的大量的javascript来提供丰厚的交互。特别是议决不刷新页面的异步央求来前往数据或从服务器端的脚本（或数据系统）中得到呼应。在这篇文章中，你将会明白到javascript框架如何更快、更简约的树立互动性强、呼应快得站点和web使用顺序。

导言：JavaScript是一种面向对象的脚本言语，不断以来用作Web浏览器使用顺序客户端脚本接口的挑选。JavaScript准许Web开发人员编程与网页上的对象的任务,为凭空操作这些对象提供了一个平台。当JavaScript开始推出时，它通常用来提供一些微缺乏道的功用，如时钟、在浏览器形态栏中滚动文本。另外一个常用特征就是“rollover link”,即当用户的鼠标滑过对象时，其文本的颜色或背景图片发作改动。但是，近年来Ajax为网络编程带来了全新的互动，JavaScript几经生长变得愈加有用。在Ajax之前，任何服务器端处理或数据库访问都须要整页面被“刷新”或由浏览器出现新的页面。这不只缓慢，令用户绝望，并且也糜费了带宽和资源。

Ajax就是异步的JavaScript和XML，虽然援用XML不在有效，但是Ajax能对除了XMl的其它几种格式的数据作出呼应，如JSON(JavaScript对象表示法)。 Ajax的任务原理是，以异步的方式提交一个 HTTP央求提交到web服务器，不刷新也不出现整个页面，仅出现呼应的内容。相反，开发人员通常运用DOM（文档对象模型）操作修正网页的一局部，HTTP呼应前往的数据将反映这些改动。

什么是JavaScript框架？

JavaScript自身是一种十分强悍的言语，你不须要任何额定的框架就可以树立由它支持的富互联网使用系统（RIA）。但是，运用JavaScript并不是一件容易的事，首要是由于在试图提供多种浏览器支持时各种并发症的出现。和HTML和CSS一样，不一样的浏览器的JavaScript执行方式不一样，那么确保您的JavaScript代码跨浏览器兼容可以说是一个恶梦。

一个JavaScript框架或库实践上是一系列工具和函数，它能更容易发生跨浏览器兼容的JavaScript代码。每个库在许多盛行的最新版本的Web浏览器阅历了严厉测试。因而，您完全可以相信，运用这些框架中的任何一个，您的基于JavaScript的RIA在不一样的浏览器安宁台中将大体一致。

除了浏览器兼容性疑问外，JavaScript框架可以更容易地编写代码去获取、遍历及操纵DOM元素。它们不只能提供一个快捷的函数来获取一个DOM元素的援用，并且还准许菊花式的DOM遍历函数链查找父母、子女或任何深度的兄弟节点元素。开头，框架提供了一系列的函数，使其更容易的操纵这些对象，准许其内容修正、添加、删除，或许操纵class的样式而影响元素的外观。器事情处理可以说是一个恶梦。因而，JavaScript框架通常将浏览器事情包装起来，并提供一系列有用的跨浏览器函数来处理它们。一些框架也提供了规范化的代表键盘键码系列的事情（如Esc键、Enter键、光标等等）。

 

一切这些功用是十分有用的，JavaScript框架已在其近来盛行Ajax使用中起主要作用。和JavaScript其他方面一样，每个Web浏览器倾向于支持以不一样的方式Ajax，使Ajax支持一切的浏览器将是很繁重的任务。几乎一切的JavaScript框架都包括必需方式的Ajax库，通常是提供Ajax央求和呼应对象，在对呼应作出评价后，更新DOM元素，轮询一个特定的央求。

一个JavaScript框架的典型特征

如今让咱们看看大非少数JavaScript框架都具有的一些功用。这些特征有：

• 挑选器
• DOM遍历
• DOM操作
• 适用函数
• 事情处理
• Ajax

为了更好的诠释这些特征，我将从下面一个或多个JavaScript框架中罗列一个例子：Prototype, jQuery， YUI，ExtJS和 MooTools。虽然每个框架的执行情况和语法不一样，但其观念大致类似。每个框架有一个细致的API参考，你可以参考它决议如何运用这些特定库的特征功用。

挑选器

大非少数JavaScript框架可完成某种方式的高速元素挑选。普通来说，这些挑选器使获取一个元素的援用愈加速捷，并准许你议决ID、class、元素类型或一些伪类挑选符来选取元素。

比如，运用通常的JavaScript，你可以运用下面的代码借助ID来获得DOM元素。

var theElement = document.getElementById('the_element');

与其他多个框架一样，MooTools提供了一个执行该操作的快捷方法。除了挑选元素，MooTools议决自己一系列的功用函数扩展了元素。

var theElement = $('the_element');

$函数在多个盛行的框架（并非一切）中可用，其语法大致类似。Prototype更深一层，议决ID在任什么时辰候可以挑选多个元素，前往的是一个元素数组。与的语法是这样的：

 

var elementArray = $('element_one', 'element_two', 'element_three');

在适用函数这一局部，你将明白到JavaScript框架提供的一些函数迭代咱们的集合愈加容易。

在先面的例子，你必需提供你欲挑选元素的ID。但是，你要挑选多个元素该如何办？一切image、拥有特定className的表格的每一行。MooTools（其它的多个库）提供了一个十分容易的方法来做到这一点－－$$函数。除了元素的ID外，他还可以接受以下参数：元素的名字、类名以及伪类挑选器，其任务原理与$函数类似。比如，运用MooTools获取页面上一切的图片，你可以运用下面的代码：

var allImages = $$('img');

这将得到文档中一切imag的数组，每一个议决$函数和原本用函数执行扩展。

议决tag标签来选取对象是十分有用的，但假设你只想基于元素的class选取它的局部子集，遮盖如何办？一样很容易。在下面的例子中，MooTools将挑选table中class为“odd”的行，这在对每行执行操作时很有用（交替变换表格每一行的颜色）。

var allOddRows = $$('tr.odd');

现实上，MooTools提供了一个更好的方法执行行操作。在先面的例子中，假定table的奇数行授予了类名“odd”。那么下面的代码不须要在table的每一行上定义任何类名。

var allOddRows = $$('tbody <IMG class=wp-smiley alt=:o src="/img/2010-4-20/2010420837462218.gif"> dd');

这是一个伪类挑选器的例子，它前往婚配规范的任何对象。在这个例子中，后果为页面中tbody元素中一切奇数行的子元素。MooTools其它伪类元素的例子包括：

• checked 一切被选中的元素（比如：选中的复选框）；
• enabled 一切可用的元素；
• contains 一切包括文本（作为参数传递给挑选器）的元素。

如前所述，并非一切的JavaScript框架都运用$函数来选取DOM元素。在YUI（Yahoo用户界面）的第三个版本中，下面的代码是议决ID来选取元素的（留意：YUI3须要在ID前加上字符#）。

一样，议决tag或class来选取元素也不是运用$$函数，在YUI中你要运用Y.all来替代。

var allOddRows = Y.all('tr.odd');

ExtJS以一样的方式任务，议决ID挑选元素用下面的语法：

var theElement = Ext.get('the_element') ;

而议决tag和class来获取元素则用下面的语法：

var allOddRows = Ext.select('tr.odd');

在下一章中，你将明白到如何运用JavaScript框架来悄悄松松遍历DOM对象，换句话说，找到与选定元素有父子和兄弟联络的元素。

转载地址：http://www.denisdeng.com/?p=699

原文地址：http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html