javascript框架比较（一）

JavaScript 是面向对象的脚本语言，长期以来用作 Web 浏览器应用程序的客户端脚本接口。JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象，并提供了一个能够动态操作这些对象的平台。在最初引入 JavaScript 时，通常只用于提供 Web 页面上的一些不重要的特性，如时钟功能和浏览器状态栏中的滚动文本等。另一个常见的特性是 “rollover link”，就是当用户将鼠标移到图片或文本链接上时，图片或文本链接的颜色会改变。然而，近年来，随着 Asynchronous JavaScript and XML (Ajax) 概念将基于 Web 的编程的交互性提升到一个新高度，JavaScript 也变得越来越重要。在出现 Ajax 之前，所有服务器端处理或数据库访问都需要 “刷新” 整个页面或通过浏览器呈现一个新页面。这不仅减慢了速度并使用户感到沮丧，而且还浪费带宽和资源。

　　Ajax 表示 Asynchronous JavaScript and XML，但是将其称为 XML 已不再合适，因为 Ajax 请求可以返回多种格式的响应，而不限于 XML，例如 JSON (JavaScript Object Notation)。Ajax 的工作方式是允许 JavaScript 异步提交 HTTP 请求到 Web 服务器，并且在不刷新或呈现新页面的情况下呈现响应。相反，开发人员通常使用 DOM (Document Object Model) 操作来修改部分 Web 页面，显示其变化或由 HTTP 响应返回的数据。

　　什么是 JavaScript 框架？

　　JavaScript 本身就是一种功能强大的语言，您不需要额外的框架就可创建富互联网应用程序（RIA）。然而使用 JavaScript 并不是件容易的事，主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML 和 CSS一样，不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。

　　JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。

　　除了解决跨浏览器问题，使用 JavaScript 框架可以更容易地编写检索、遍历、操作 DOM 元素的代码。它们不仅提供获取 DOM 元素引用的快捷函数，而且还允许 DOM 遍历函数以菊花链（daisy-chaining）方式查找任意深度的父元素、子元素、兄弟元素。最后，框架还提供一系列函数来更轻松地操作这些对象，可以改变、添加或删除内容本身；或者使用 CSS 样式类来改变元素的外观。

　　框架的另一重要特性是其改进的事件处理支持。由于不同浏览器的实现方式各不相同，跨浏览器事件处理将会非常艰难。因此 JavaScript 框架通常封装浏览器事件，并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件（如按下 Escape 键、Return 键、光标键，等等）。

　　所有这些特性都非常有用，但 JavaScript 框架有一个特性对于它最近的流行非常重要 — 支持 Ajax。与 JavaScript 的其他许多方面一样，每个 Web 浏览器往往以不同方式支持 Ajax，这使得以一种在所有 Web 浏览器中都受支持的方式处理 Ajax 变得十分复杂。几乎所有 JavaScript 框架都包含某种形式的 Ajax 库支持，通常提供 Ajax 请求和响应对象，以及用于评价响应、更新 DOM 元素、查询特定请求的帮助函数（helper）。

　　JavaScript 框架的典型特性

　　现在，让我们看一看大多数 JavaScript 框架都具备的有用特性。包括：

　　选择器（Selector）

　　DOM 遍历

　　DOM 操作

　　实用（Utility）函数

　　事件处理

　　Ajax

　　在解释每个特性时，我将会用以下的一个或几个 JavaScript 框架举例说明：Prototype、jQuery、YUI、ExtJS 和 MooTools。尽管每个框架的实现和语法都各不相同，但概念都是相同的。每个框架都有一个详细的 API 参考，可帮助您理解如何使用该特定库中的特性。

　　选择器

　　大多数可用的 JavaScript 框架都会实现某种形式的对快速元素选取的支持。通常来说，这些选择器会使获得 HTML 元素引用的过程快很多，并允许通过 ID、类名、元素类型甚至使用一组伪选择器（pseudo-selector）来查找元素。

　　例如，使用常规 JavaScript，您也许会用以下代码通过 ID 来选择 DOM 元素：

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

　　与其他框架一样，MooTools 提供了执行此操作的快捷方法。除了选取该元素，MooTools 还可通过一系列实用函数扩展此元素。其语法如下：

var　theElement　=　$('the_element');

　　如上所示的单美元符号（dollar）函数，在很多（但不是所有）流行的 JavaScript 框架中都可用，而且语法也大体一致。Prototype 库则更进一步，允许通过 ID 一次选取多个元素，并返回元素数组。和 MooTools 一样，可用 Prototype 实用函数扩展这些元素。用 Prototype 一次选取多个元素的语法是：

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

　　在实用函数一节中，您将会学到更多 JavaScript 框架所提供的简化集合迭代的函数。

　　在前面的例子中，必须提供需要选取的元素的 ID。然而，如果要选取多个元素（例如，所有图片）或是具有特定 CSS 类名的所有表行，那又怎么办呢？MooTools（还有其他库）提供了一个简单的方法来实现此功能 — 双美元符号（dollar-dollar）函数。它的工作方式与单美元符号函数相同，不同之处在于它接受 CSS 元素名、类名、伪选择器作为参数，而不是接受元素 ID 作为参数。例如，要使用 MooTools 选取 Web 页面上的所有图片，将用以下代码：

var　allImages　=　$('img');

　　这将返回一个包含文档中的所有图片的数组，其中每一个图片都使用单美元符号函数进行扩展，以包含 MooTools 实用函数。

　　根据标记名选取元素非常有用，但如果只是想根据 CSS 类选择一个元素子集，该怎么办呢？这也很简单。在下面的例子中，MooTools 将会选择 CSS 类名为 “odd” 的所有表行。这在实现表行条状化（在表行之间交替变化背景色）时将非常有用：

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

　　实际上，MooTools 提供了实现表行条状化（row striping）的更好方法。在上面的例子中，假设表中的所有奇数行的 CSS 类名为 “odd”。以下代码不要求对表行定义任何 CSS 类名：

var　allOddRows　=　$('tbody:odd');

　　这是一个伪选择器的例子，将会返回所有符合条件的对象，在本例中为页面中的 tbody（表主体）的所有奇数子元素。MooTools 伪选择器的其他例子包括：

　　checked — 选取所有选中的元素（例如，选中的复选框）

　　enabled — 选取所有启用的元素

　　contains — 选取所有包含作为参数传递给选择器的文本的元素（例如，contains('this text')）

　　如前所述，并非所有 JavaScript 框架都使用单美元符号函数选取 DOM 元素。在 YUI (Yahoo! User Interface) 库第 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 以修改元素。

该文章转摘自-网页制作大宝库(www.dabaoku.com) - 原文链接：http://www.dabaoku.com/jiaocheng/biancheng/javascript/201009136832.shtml

javascript框架比较（一）相关推荐

Javascript框架的自定义事件(转)
很多 javascript 框架都提供了自定义事件(custom events),例如 jquery.yui 以及 dojo 都支持"document ready"事件.而部分自定 ...
【图解】最流行的7个JavaScript 框架各自的优点
2019独角兽企业重金招聘Python工程师标准>>> AngularJ.js 由Google开发,2009年首次发布很流行的前端框架使用Angular.js创建第一个UI,成本 ...
1分钟选好最合适你的JavaScript框架
Javascript框架(以下简称框架)也被称为Javascript库,是一组包含丰富功能和函数的JavaScript代码集,能够帮助开发者快速完成Web设计和开发工作.随着Web社区的越发活跃,新的 ...
《JavaScript框架设计》——1.3　数组化
本节书摘来自异步社区<JavaScript框架设计>一书中的第1章,第1.3节,作者:司徒正美更多章节内容可以访问云栖社区"异步社区"公众号查看. 1.3 数组化浏 ...
一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
2015年最棒的10个 JavaScript 框架
JavaScript是最流行的前端开发程序设计语言.它为WEB开发者提供了能够设计出具有丰富功能.干净用户界面的WEB应用的能力.JavaScript框架使得WEB应用的设计变的简单,并且它能够提供很 ...
javascript漏洞-检测到目标站点存在javascript框架库漏洞
一般是让升级为最新的版本的脚本文件,但是实际使用过程中,有的插件不兼容,盲目升级会导致网站部分插件不可用. 下面是一种解决方案. 比如漏洞扫描出jquery:2.1.4.作以下处理: 一.根据web应 ...
有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取...
点这里阅读目录用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取解决方案为什么公开我们的解决方案实现 AngularJS 服务结论 Pr ...
Vue -渐进式JavaScript框架
介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别? Library 库,本质上是一些函 ...
2017年 JavaScript 框架回顾 -- 前端框架
2019独角兽企业重金招聘Python工程师标准>>> 概述: 对于 JavaScript 社区来说,npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库 ...

javascript框架比较（一）

javascript框架比较（一）相关推荐

最新文章

热门文章