JavaScript是一种面向对象的脚本语言，长期以来一直是Web浏览器应用程序选择的客户端脚本接口。 JavaScript使Web开发人员可以通过编程方式处理Web页面上的对象，从而提供了一个可即时处理这些对象的平台。 首次引入JavaScript时，它通常用于在网页上提供一些琐碎的功能，例如时钟和浏览器状态栏中的滚动文本。 另一个常见功能是“滚动链接”，当用户将鼠标滑过该链接时，链接的图像或文本颜色将发生更改。 但是，近年来，随着异步JavaScript和XML（Ajax）的概念为基于Web的编程带来了全新的交互性，JavaScript已经变得越来越有用。 在Ajax之前，任何服务器端处理或数据库访问都将要求“刷新”整个页面或由浏览器呈现新页面。 这不仅对于用户而言是缓慢且令人沮丧的，而且浪费带宽和资源。
尽管对XML的引用不再有效，但Ajax代表异步JavaScript和XML，因为Ajax请求可以返回XML以外的其他几种格式的响应，例如JSON（JavaScript对象表示法）。 Ajax的工作方式是允许JavaScript异步向Web服务器提交HTTP请求，并在不刷新或呈现新页面的情况下呈现其响应。 取而代之的是，开发人员通常会使用DOM（文档对象模型）操作来修改Web页面的一部分，以反映HTTP响应返回的更改或数据。
什么是JavaScript框架？
JavaScript本身是一种非常强大的语言，您不需要任何其他框架即可创建由JavaScript支持的Rich Internet Applications（RIA）。 但是，使用JavaScript并不是一件容易的事，主要是由于在尝试为多个Web浏览器提供支持时出现了复杂性。 像HTML和CSS一样，不同的浏览器具有不同JavaScript实现，因此确保您JavaScript代码与跨浏览器兼容可能是一场噩梦。
JavaScript框架或库是一组实用程序和函数，它们使生成跨浏览器兼容JavaScript代码变得更加容易。 每个库都在许多流行的Web浏览器的现代版本上进行了严格的测试，因此，您可以确信，通过使用这些框架之一，基于JavaScript的RIA可以在不同的浏览器和平台上类似地工作。
除了解决跨浏览器的问题外，JavaScript框架还使编写检索，遍历和操作DOM元素的代码更加容易。 它们不仅提供简写函数来获得对DOM元素的引用，而且还允许以菊花链方式遍历DOM遍历函数，以查找任何深度的父元素，子元素或同级元素。 最后，这些框架提供了一系列功能，使这些对象的操作更加容易，从而允许更改，添加或删除内容本身。 或将要处理的类CSS样式影响元素的外观。
JavaScript框架的另一个重要功能是其对事件处理的改进支持。 由于浏览器之间的实现方式不同，跨浏览器事件处理可能是一场噩梦，因此JavaScript框架通常会包装浏览器事件并提供一系列有用的跨浏览器兼容功能来处理它们。 一些框架还提供了一系列标准化的键代码，它们代表基于键盘的事件（例如，按Escape键，Return键，光标键等）。
所有这些功能都非常有用，但是JavaScript框架的一个方面在最近的流行中发挥了重要作用-Ajax支持。 像JavaScript的许多其他方面一样，每个Web浏览器都倾向于以不同的方式支持Ajax，这使得在所有Web浏览器中都支持的方式下使用Ajax变得很繁琐。 几乎所有JavaScript框架都包含某种形式的Ajax库支持，该支持通常提供Ajax请求和响应对象，以及用于评估响应，更新DOM元素和轮询特定请求的助手。
JavaScript框架的典型功能
现在，让我们看一下大多数JavaScript框架共有的一些有用功能。 这些功能是：
- 选择器
- DOM遍历
- DOM操作
- 实用功能
- 事件处理
- 阿贾克斯
在对每个功能的解释中，我将提供以下JavaScript框架中的一个或多个示例：原型，jQuery，YUI，ExtJS和MooTools。 尽管每个人的实现和语法会有所不同，但是概念通常是相同的。 每个框架都有详细的API参考，您可以参考该API参考，以确定如何在特定的库中使用这些功能。
选择器
大多数可用JavaScript框架都实现了对快速元素选择的某种形式的支持。 一般而言，这些选择器使获取HTML元素的引用的过程变得更快，并且允许您通过ID，类名，元素类型或使用一系列伪选择器来搜索元素。
例如，使用常规JavaScript，您可以使用以下代码通过其ID选择DOM元素：
var theElement = document.getElementById('the_element');与其他几个框架一样，MooTools提供了执行此操作的简便方法。 除了选择元素之外，MooTools还通过一系列MooTools实用程序功能扩展了该元素。 这样做的语法是：
var theElement = $('the_element');如上所示，dollar函数可在几种（但不是全部）流行JavaScript框架中使用，并且语法通常相似。 原型库更进一步，允许一次通过ID选择多个元素，并返回一个元素数组。 像MooTools一样，这些元素通过Prototype实用程序功能进行了扩展。 通过原型一次选择多个元素的语法为：
var elementArray = $('element_one', 'element_two', 'element_three');在“ 实用程序功能 ”部分，您将了解JavaScript框架提供的一些功能，这些功能使迭代集合变得更加容易。
在前面的示例中，您必须提供要选择的元素的ID。 但是，如果要选择多个元素，例如所有图像或具有特定CSS类名称的每个表行，该怎么办？ MooTools（和其他一些库）提供了一种非常简单的方法来实现此功能-美元功能。 除了接受CSS元素名称，类名称和伪选择器作为参数（而不是元素ID）作为参数外，它的工作方式与Dollar函数类似。 例如，要使用MooTools选择网页上的所有图像，您将使用以下代码：
var allImages = $$('img');这将返回文档中所有图像的数组，每个图像都由dollar函数扩展以包括MooTools实用程序函数。
通过标签名称选择元素很有用，但是如果您只想基于CSS类选择元素的子集呢？ 这也很简单。 在以下示例中，MooTools将使用CSS类“ odd”选择每个表行，这对于实现行条带化（在表行之间交替背景颜色）很有用：
var allOddRows = $$('tr.odd');实际上，MooTools提供了一种更好的执行行分割的方法。 在前面的示例中，假定表中的每个奇数行都被赋予CSS类名称“ odd”。 以下代码不需要在表行上定义任何CSS类名称：
var allOddRows = $$('tbody:odd'); 这是伪选择器的示例，它返回与规范匹配的所有对象，在这种情况下，返回页面上tbody （表主体）元素的每个奇数子元素。 MooTools伪选择器的其他示例包括：
-
checked-选择所有选中的元素（例如，选中的复选框） -
enabled-选择所有已启用的元素 -
contains—选择所有包含作为参数传递给选择器的文本的元素（例如，contains('this text')）
如前所述，并不是所有JavaScript框架都将dollar函数用于DOM元素选择。 在YUI（Yahoo！用户界面）库的版本3中，以下代码用于通过其ID选择元素（请注意，YUI 3要求您在ID本身之前传递ID选择器字符＃）：
var theElement = Y.one('#the_element'); 类似地，在YUI中，您使用Y.all函数来代替使用美元或美元函数通过标记或类名检索元素：
var allOddRows = Y.all('tr.odd');ExtJS以类似的方式工作，使用以下语法通过ID选择元素：
var theElement = Ext.get('the_element');以及以下用于按标记和类名称进行选择的语法：
var allOddRows = Ext.select('tr.odd');在下一节中，您将看到JavaScript框架如何使您轻松地遍历DOM，换句话说，就是找到与所选元素具有父，子或同级关系的元素。 您还将了解有关库如何让您操纵DOM来修改元素的信息。
DOM遍历
根据元素的ID，元素类型或CSS类名称查找元素非常有用，但是如果要根据元素在DOM树中的位置查找元素，该怎么办。 换句话说，假设您有一个给定的元素，并且想要找到其父元素，其子元素之一或其上一个或下一个同级元素。 例如，采用清单1中所示的以下HTML代码段。
清单1. HTML代码段（一个HTML表）
<table>
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="row-001">
<td>Joe Lennon</td>
<td>joe@joelennon.ie</td>
<td><a href="#">Edit</a>
<a href="#">Delete</a></td>
</tr>
<tr id="row-002">
<td>Jill Mac Sweeney</td>
<td>jill@example.com</td>
<td><a href="#">Edit</a>
<a href="#">Delete</a></td>
</tr>
</tbody>
</table> 清单1使用缩进来说明每个元素出现在DOM节点树中的位置。 在这种情况下， table元素是root元素，具有两个子节点thead和tbody 。 thead元素有一个子节点tr ，其中有三个子节点-所有th元素。 tbody元素有两个子元素，均为tr元素，每个都有三个子元素。 在每行的第三个孩子有两个的儿童，这两者都是a （锚）标签。
如您所知，您可以使用JavaScript框架中的Selector函数通过其ID轻松选择元素。 在这种情况下，您有两个具有ID的元素—分别是ID为row-001和row-002的tr （表行）元素。 要使用Prototype选择第一个tr元素，可以使用以下代码：
var theRow = $('row-001'); 在上一节中，您还了解了可以使用选择器根据元素的类型或CSS类检索元素。 在这种情况下，可以使用以下语法选择所有td元素：
var allCells = $$('td'); 此代码的问题在于，此代码将返回DOM中的每个td元素。 但是，如果只想获取ID为row-001的行中的td元素怎么办？ 这就是DOM遍历功能发挥作用的地方。 首先，让我们使用Prototype选择ID为row-001的tr元素的所有子元素：
var firstRowCells = theRow.childElements(); 这将返回theRow变量的子元素数组（您之前将其设置为ID为row-001的元素）。
接下来，假设您只想获取该行的第一个子元素，在这种情况下，就是内容为“ Joe Lennon”的td元素。 为此，请使用以下语句：
var firstRowFirstCell = theRow.down();很简单，对吧？ 此特定用法等效于：
var firstRowFirstCell = theRow.childElements()[0];也可以表示为：
var firstRowFirstCell = theRow.down(0);JavaScript索引以零（0）开头，因此上述声明实质上是在告诉JavaScript选择第一个子代。 要选择第二个孩子（包含电子邮件地址joe@joelennon.ie的单元格），可以使用：
var firstRowSecondCell = theRow.down(1);或者，您可以将DOM从同级导航到同级。 在这种情况下，第二个单元格是第一个单元格的下一个同级，因此您可以使用以下语句：
var firstRowSecondCell = firstRowFirstCell.next(); 这与down()函数的工作方式相同，因此要选择第三个单元格，可以使用：
var firstRowThirdCell = firstRowFirstCell.next(1);除了使用索引查找要查找的特定节点之外，Prototype还允许您使用CSS选择器语法。 给定清单1中的示例，让我们找到包含Jill Mac Sweeney详细信息的行的第二个链接（“ Delete”链接）：
var secondRowSecondLink = $('row-002').down('a', 1); 在这种情况下，您使用的是美元的函数来找到ID行002的元素，向下遍历DOM来第二下一后代a （锚）元素。
一些框架还允许您“遍历”遍历函数，这意味着您可以将遍历命令彼此串联。 在Prototype中表示先前示例的另一种方式是：
var secondRowSecondLink = $('row-002').down('a').next();考虑以下示例：
var domTraversal = $('row-001').down().up().next().previous(); 如您所见，菊花链允许您将多个DOM遍历语句连接在一起。 实际上，上面的示例实际上最终选择了tr元素row-001 ，因此菊花链就从它开始的地方结束了！
DOM操作
以前，您了解了选择器和DOM遍历如何使使用JavaScript框架轻松选择特定元素。 但是，为了更改网页上特定元素的外观或内容，您需要操纵DOM并应用该更改。 使用纯JavaScript可能很麻烦，但是，值得庆幸的是，大多数JavaScript框架都提供了有用的功能，使其易于实现。
假设您有一个id为the-box的div元素：
<div id="the-box">Message goes here</div>要使用jQuery更改文本“ Message go here”，您可以简单地使用：
$('#the-box').html('This is the new message!');实际上，您可以在此函数内使用HTML代码，并且浏览器会对其进行解析。 例如：
$('#the-box').html('This is the <strong>new</strong> message!');在这种情况下，在DOM中表示的div元素的内容将如下所示：
<div id="the-box">This is the <strong>new</strong> message!</div> 当然，在某些情况下，您需要实际使用特殊字符，例如大于或小于符号。 您可以使用jQuery的text函数来代替指定特殊HTML实体代码：
$('#the-box').text('300 > 200'); 这会将div元素更新为以下代码：
<div id="the-box">300 > 200</div>在上面的示例中，现有内容被新内容替换。 如果您只想将消息附加到文本上怎么办？ 幸运的是，jQuery为此提供了append函数：
$('#the-box').append(', here goes message'); 应用这个原来的div元素，在内容div元素现在会是什么样子：
<div id="the-box">Message goes here, here goes message</div>除了附加之外，您还可以“附加”内容，以便将其插入到现有内容之前而不是之后。 另外，jQuery提供了一些功能，可以在给定元素之前或之后插入内容。 有用于替换内容，清空内容，完全从DOM中删除元素，克隆元素等功能。
除了DOM操纵功能外，JavaScript框架通常还包含一些用于以编程方式操纵元素的样式和CSS类的函数。 例如，假设您有一个表格，并且想在鼠标移到表格上方时突出显示一行。 您创建了一个名为hover的特殊CSS类，并且想要将此类动态添加到行中。 在YUI中，您可以使用以下代码来检查该行是否已经具有hover类，如果有则将其删除，如果没有则将其添加：
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');同样，大多数JavaScript框架都内置了CSS操作功能。
实用功能
许多JavaScript框架都带有大量实用程序功能，这些功能使使用JavaScript开发应用程序更加容易。 本文涉及的内容太多了，因此，我将讨论大多数框架共有的最值得注意的功能之一。
如果您使用过JavaScript中的数组，则可能熟悉使用for循环遍历数组以使用其值的情况。 例如，考虑清单2中的代码：
清单2.遍历JavaScript数组的传统方法
var fruit = ['apple', 'banana', 'orange'];
for(var i = 0; i < fruit.length; i++) {
alert(fruit[i]);
} 清单2中的代码很好，但是有点麻烦。 大多数JavaScript框架都包含一个each函数，该函数为数组中的每个元素调用一个指定的函数。 使用MooTools，您可以使用清单3中的代码执行与清单2中相同的操作。
清单3.在MooTools中使用each函数
['apple', 'banana', 'orange'].each(function(item) {
alert(item);
});清单3中的语法与Prototype和jQuery中使用的语法相同，但是对于诸如YUI和ExtJS之类的语法而言则略有不同。 但是，当将语法应用于哈希映射或对象而不是数组时，语法在框架之间会有所不同。 例如，在MooTools中，您可以使用清单4中的以下代码。
清单4.在MooTools中的基于键/值对的对象上使用每个对象
var hash = new Hash({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(value, key) {
alert(key + ": " + value);
});但是，在Prototype中，这看起来更像清单5中的代码。
清单5.在Prototype中基于键/值对的对象上使用每个对象
var hash = $H({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(pair) {
alert(pair.key + ": " + pair.value);
}); 每个框架都包含更多有用的函数，通常分为String函数， Number函数， Array函数， Hash函数， Date函数等。 有关更多信息，请参见相关JavaScript框架的API参考。
事件处理
每个JavaScript框架都实现了跨浏览器事件处理的支持，鼓励您从事件的旧式内联附加方式转到简化的方法。 考虑清单6中的jQuery示例，在该示例中您将基于hover事件突出显示div元素。
清单6.使用jQuery附加悬停Event
$('#the-box').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeClass('highlight');
}); 这是由jQuery实现的特殊事件，您会注意到它提供了两个函数，第一个函数在触发onMouseOver事件时调用，第二个函数在触发onMouseOut事件时调用。 这是因为没有用于hover标准DOM事件。 让我们看一个更典型的事件，例如click （请参见清单7）。
清单7.使用jQuery附加click Event
$('#the-button').click(function() {
alert('You pushed the button!');
});如您所见，在这种情况下，只有一个函数参数。 jQuery以这种方式处理大多数JavaScript事件。 在jQuery中使用事件处理程序时，上下文变量引用触发事件的元素。 某些框架无法以这种方式工作。 以Prototype为例，它的等效清单7类似于清单8中的代码。
清单8.使用原型附加click Event
$('the-button').observe('click', function(e) {
alert('You pushed the button!');
}); 您会注意到的第一件事是没有click函数，而是一个observe函数，它在函数引用本身之前将事件作为参数。 您还将注意到该函数接受一个参数e 。 这是上下文变量，它引用引发事件的元素。 为了了解它的工作原理，让我们重写清单6中的Prototype代码（请参见清单9）。
清单9.使用原型附加悬停Event
$('the-box').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('highlight');
});
$('the-box').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('highlight');
}); 与jQuery不同，在jQuery中，您只需要使用dollar函数来获取上下文变量，而在Prototype中，您需要使用Event.element()函数。 此外，您还将看到需要将mouseover和mouseout的功能分开。
您可能在本文的整个过程中已经注意到，这些函数是内联创建的，并且未命名。 这意味着它们无法重复使用。 这个原型悬停示例提供了一个机会来展示如何使用命名函数。 清单10给出了一个示例。
清单10. Prototype中改进的悬停示例
function toggleClass(e) {
var el = Event.element(e);
if(el.hasClassName('highlight'))
row.removeClassName('highlight');
else
row.addClassName('highlight');
}
$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass); 您会注意到，这一次您仅定义了一个由mouseover和mouseout事件调用的函数。 然后，此函数确定该元素是否已经具有突出显示的类名，并根据其发现删除或添加。 您会注意到参数e是隐式传递的。 换句话说，您没有在observe函数中显式传递事件作为参数。
阿贾克斯
使用JavaScript框架最令人信服的原因之一是针对标准化的跨浏览器Ajax请求。 Ajax请求是通常对服务器端脚本发出的异步HTTP请求，该脚本以XML，JSON，HTML或纯文本等格式返回响应。 大多数JavaScript框架都具有某种形式的Ajax对象，该对象带有一个请求方法，该方法接受一系列选项作为参数。 这些选项通常包括callback函数，一旦脚本从Web服务器接收到响应，就会调用这些函数。 让我们看一下ExtJS，MooTools和Prototype中的Ajax请求。
首先，看一下典型的ExtJS Ajax请求（请参见清单11）。
清单11. ExtJS Ajax请求
Ext.Ajax.request({
url: 'server_script.php',
params: {
name1: 'value1',
name2: 'value2'
},
method: 'POST',
success: function(transport) {
alert(transport.responseText);
}
}); ExtJS中的request方法采用单个参数，即具有各种字段（包括url ， params ， method和success 。 url字段包含将由Ajax请求调用的服务器端脚本的URL。 params字段本身是一个对象，由将传递到服务器端脚本的键/值对组成。 method字段可以是两个值之一： GET或POST 。 默认为未定义，但是如果请求中包含params ，则默认情况下将其视为POST 。 最后一个字段success是Web服务器返回成功响应时将调用的函数。 在这种情况下，假定服务器端脚本返回纯文本，并通过警报框向用户显示此文本。
接下来，让我们研究在MooTools中相同的请求是什么样的（请参见清单12）。
清单12.一个MooTools Ajax请求
new Request({
url: 'server-script.php',
data: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onComplete: function(response) {
alert(response);
}
}).send(); 如您所见，MooTools与ExtJS非常相似。 您会注意到，变量不是使用params而是使用data字段传递的，并且该方法需要以小写字母指定。 另外，MooTools使用了onComplete函数，而不是成功的callback函数。 最后，与ExtJS不同，在MooTools中，您实际上需要使用Request对象的send()函数send() Request 。
最后，让我们看一下Prototype是否有很大的不同（参见清单13）。
清单13.一个原型Ajax请求
new Ajax.Request('server-script.php', {
params: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onSuccess: function(transport) {
alert(transport.responseText);
}
}); 原型再次沿相同的方向运行，但语法差异很小。 对于初学者来说，Prototype的Request对象对其构造函数使用两个参数。 第一个参数是要向其发出请求的URL，第二个参数是具有典型Ajax选项的对象，如前两个所示。 当然，由于URL现在作为单独的参数传递，因此它不在选项列表中。 另外，值得注意的是，与MooTools不同，Prototype Ajax Request对象构造函数隐式发送请求，因此您无需调用任何方法即可实际发起HTTP请求。
大多数JavaScript框架对Ajax的支持远远超出了此处的说明。 一些显着的增强功能包括使用收到的响应自动更新元素，而无需任何特殊的onSuccess函数。 如您在Google搜索引擎上可能已经看到的那样，某些库甚至还包括预构建的自动完成功能，在键入时会建议典型的搜索查询。
在下一部分中，您将了解JavaScript框架为Web开发人员提供的用户体验（UX）增强功能。
UX增强
到目前为止，本文完全集中于使用JavaScript框架的编程优势以及它们如何使交互式应用程序的编码更容易。 但是，对于大多数框架而言，还有另一个方面使它们的使用前景诱人：用户界面（UI）组件和用户体验增强功能可以轻松包含并且通常需要花费大量精力进行构建。
本节将分别探讨以下每个框架的UX增强功能：原型，jQuery，YUI，ExtJS和MooTools。
原型
原型是不包含现成的UI组件或UX增强功能的少数JavaScript框架之一。 相反，它将所有这些内容推迟到其姊妹库script.aculo.us（或Scripty2，因为它是最新版本）。 Script.aculo.us添加了对原型中各种效果和行为的支持。 这些效果包括突出显示，变形，折叠，摇晃，滑动，膨化等。 Script.aculo.us还具有拖放支持，以及滑块，就地Ajax编辑器和自动完成器。 与某些框架不同，Script.aculo.us将任何控件（例如滑块和自动完成器）的设计留给开发人员，不提供任何可用于工作的标准外观。
jQuery的
与原型不同，jQuery在核心库中包括一些基本的UX增强功能。 这些类似于script.aculo.us附带的一些基本效果，例如滑动和淡入淡出。 但是，对于更高级的UX功能，您需要下载jQuery UI库，该库包含比jQuery核心更多的效果，以及诸如拖放，调整大小和排序之类的交互功能。 与script.aculo.us不同，jQuery UI还包含一些小部件或组件，这些组件使有吸引力的界面的开发更加容易。 目前，这些组件包括手风琴，日期选择器，对话框，进度栏，滑块和选项卡。 这些小部件是完全可使用的，并且jQuery UI包含广泛的主题，可用于将组件适合您自己的特定网站或Web应用程序。 图1展示了Cupertino主题中的jQuery UI Datepicker小部件的示例。
图1. jQuery UI Datepicker小部件
UI
原型和jQuery不包含现成的UI小部件，而Yahoo! 用户界面库（YUI）包含一个存储桶。 除了拖放支持和调整大小之外，YUI的版本2还包括自动完成器，日历控件，轮播组件，图表，对话框，进度条，富文本编辑器（或WYSIWYG文本区域），滑块，选项卡，树等。 在撰写本文时，YUI的版本3中未包含任何上述小部件。 图2是一起使用的一系列这些组件的示例。
图2. YUI复杂示例应用程序
ExtJS
与YUI一样，ExtJS包含大量现成的组件，最著名的是一些非常强大的网格控件，它们支持内联编辑，分页，过滤，分组，汇总，缓冲和数据绑定。 ExtJS组件具有专业的外观，并且完全可以使用。 ExtJS随附的其他一些小部件包括选项卡，图表，窗口（对话框），树，布局管理器，增强的表单控件，工具栏和菜单，拖放以及直接远程处理。 这实际上只是从表面上了解ExtJS必须提供的功能，因此，如果您正在寻找大量的RIA组件，请务必访问ExtJS网站。 图3显示了一个用ExtJS开发的示例Web桌面，说明了库的功能多么丰富。
图3. ExtJS桌面示例应用程序
Moo工具
MooTools与Prototype和jQuery保持一致，因为它不包含现成的UI控件和小部件。 像jQuery一样，它选择包含一组有限的效果。 它通过MooTools.More.js扩展包括更高级的UX增强功能。 但是，此扩展不仅仅是一个UX / UI插件，还包括Array ， Date ， Hash和String类的一些有趣的附加组件，以及一些其他的Element扩展。 在UX增强方面，MooTools.More.js包含拖放支持和一些其他效果。 该插件还拥有一些UI控件，例如手风琴，可排序HTML表格，滚动条，工具提示和Ajax微调器叠加层。 但是，像script.aculo.us一样，您可以自己实现这些控件的设计。
框架比较
表1提供了本文讨论的五个框架中可用功能的详细比较。
表1.框架功能比较
| 原型 | jQuery的 | UI | ExtJS | Moo工具 | |
|---|---|---|---|---|---|
| 最新版本 | 1.6.1 | 1.4.1 | 3.00 | 3.1 | 1.2.4 |
| 执照 | 麻省理工学院 | 麻省理工学院 | BSD | 商业和GPL v3 | 麻省理工学院 |
| 浏览器兼容性 | |||||
| IE支持 | 6.0+ | 6.0+ | 6.0+ | 6.0+ | 6.0+ |
| Firefox支持 | 1.5+ | 2.0+ | 3.0+ | 1.5+ | 2.0+ |
| Safari支持 | 2.0.4+ | 3.0+ | 4.0+ | 3.0+ | 2.0+ |
| 歌剧支持 | 9.25+ | 9.0+ | 10.0+ | 9.0+ | 9.0+ |
| Chrome支持 | 1.0+ | 1.0+ | 未经审核的 | 未经审核的 | 未经审核的 |
| 核心功能 | |||||
| Ajax支持 | 是 | 是 | 是 | 是 | 是 |
| DOM操作 | 是 | 是 | 是 | 是 | 是 |
| DOM遍历 | 是 | 是 | 是 | 是 | 是 |
| 事件处理 | 是 | 是 | 是 | 是 | 是 |
| JSON格式 | 是 | 是 | 是 | 是 | 是 |
| 选择器 | 是 | 是 | 是 | 是 | 是 |
| UX / UI增强功能 | |||||
| 手风琴 | 没有 | jQuery UI | 没有 | 是 | MooTools更多 |
| 动画 | 文字的 | 是 | 是 | 是 | 是 |
| 自动完成 | 文字的 | 没有 | 是 | 是 | 没有 |
| 浏览器历史 | 文字的 | 没有 | 是 | 是 | 没有 |
| 日历 | 没有 | jQuery UI | 是 | 是 | 没有 |
| 制图 | 没有 | 没有 | 是 | 是 | 没有 |
| 拖放 | 文字的 | jQuery UI | 是 | 是 | MooTools更多 |
| 格网 | 没有 | 没有 | 是 | 是 | MooTools更多 |
| 进度条 | 没有 | jQuery UI | 是 | 是 | 没有 |
| 调整大小 | 没有 | jQuery UI | 是 | 是 | 没有 |
| 富文本编辑器 | 没有 | 没有 | 是 | 是 | 没有 |
| 滑杆 | 文字的 | jQuery UI | 是 | 是 | MooTools更多 |
| 标签 | 没有 | jQuery UI | 是 | 是 | 没有 |
| 主题 | 没有 | jQuery UI | 是 | 是 | MooTools更多 |
| 树视图 | 没有 | 没有 | 是 | 是 | 没有 |
其他值得注意的框架
为了简洁起见，本文研究了五个可用的更流行JavaScript框架。 这并不意味着它们一定是最受欢迎，最佳或功能最丰富的。
其他值得一提并值得一看JavaScript框架包括：
- 卡布奇诺咖啡
- 道场
- 辉光
- GWT
- MochiKit
- Qooxdoo
- 里亚托
- 里科
- 发芽核心
- 轻快
- UIZE
摘要
在本文中，向您介绍了JavaScript框架的概念，并了解了它为什么对开发网站和Web应用程序有益。 概述了这些框架的一些常见功能，并提供了一些示例说明如何在较流行的库中实现它们。 然后，您了解了UX和UI增强功能，它们是本文涵盖的五个框架中的每个框架的一部分或作为单独的附件。 最后，向您展示了一个直截了当的功能比较表，突出显示了每个框架具有和不具有的选项。 掌握了这些信息后，您就可以在对哪种框架最适合您和您的开发团队做出明智的决定之前，准备好进一步研究这些框架。
翻译自: https://www.ibm.com/developerworks/java/library/wa-jsframeworks/index.html
5600
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
