javascript框架比较(三)
实用函数
很多 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 中的语法有细微差异。然而,当用于 hash 映射或对象而不是数组时,各框架的语法都不一样。例如在 MooTools 中,将用到清单 4 的代码:
清单 4. 在 MooTools 中对基于键/值对的对象使用 each
var hash = new Hash({name: "Joe Lennon", email: "joe@joelennon.ie"});
hash.each(function(value, key) {
alert(key + ": " + value);
});
在 Prototype 中,将用到清单 5 中的代码。
清单 5. 在 Prototype 中对基于键/值对的对象使用 each
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 连接 hover 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 为例,清单 8 显示了用 Prototype 实现的与清单 7 等价的代码。
清单 8. 使用 Prototype 连接 click Event
$('the-button').observe('click', function(e) {
alert('You pushed the button!');
});
您首先将注意到没有 click 函数,而是使用了 observe 函数,该函数在引用它自身之前将事件作为参数。您还可能注意到该函数的参数 e。这就是指向触发事件的元素的上下文变量。为了探究其工作原理,让我们针对 Prototype 重写 清单 6 的代码(请看清单 9)。
清单 9. 使用 Prototype 连接 hover 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 中使用美元符号函数获取上下文变量不同的是,在 Prototype 中需要使用 Event.element() 函数。并且,您需要对 mouseover 和 mouseout 使用不同的函数。
在阅读本文的过程中,您也许会注意到函数使用内联方式创建且都没有命名。这意味着它们无法被重用。Prototype 的 hover 例子展示了如何使用已命名的函数作为替代方法。如清单 10 所示。
清单 10. Prototype 中改进的 hover 例子
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 函数中以参数形式显式传递事件。
Ajax
使用 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 字段包含服务器端脚本的 URL,该脚本将被 Ajax 请求调用。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 字段传递变量,而且必须使用小写指定方法。还有,没有使用 success callback 函数,MooTools 使用了一个 onComplete 函数。最后,与 ExtJS 不同的是,在 MooTools 中,您需要使用 Request 对象的 send() 函数发送请求。
javascript框架比较(三)相关推荐
- 一款优秀的JavaScript框架—AngularJS
AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...
- javascript漏洞-检测到目标站点存在javascript框架库漏洞
一般是让升级为最新的版本的脚本文件,但是实际使用过程中,有的插件不兼容,盲目升级会导致网站部分插件不可用. 下面是一种解决方案. 比如漏洞扫描出jquery:2.1.4.作以下处理: 一.根据web应 ...
- 第一章 : javaScript框架分类及主要功能
从内部架构和理念划分,目前JavaScript框架可以划分为5类. 第一种是以命名空间为导向的类库或框架,如果创建一个数组用new Array(),生成一个对象用new Object(),完全的j ...
- 为什么 Web 开发人员需要学习一个 JavaScript 框架?
原文链接 可能当我们结束本文时,一个新的 Javascript 框架已经在某处启动了.但这确实不在我们的控制范围内.因此,我们应该简单地继续我们所拥有的.至少,由于免责声明,我们可以确定我们不是在发明 ...
- javascript 框架_克服JavaScript框架疲劳
javascript 框架 by Tero Parviainen 通过Tero Parviainen 克服JavaScript框架疲劳 (Overcoming JavaScript Framework ...
- javascript框架比较(四)
最后,让我们看看 Prototype 中的请求是否具有显着的不同(请看清单 13). 清单 13. 一个 Prototype Ajax 请求 new Ajax.Request('server-scri ...
- javascript框架比较(二)
DOM 遍历 根据 ID.元素类型或 CSS 类名查找元素非常有用,但如何根据元素在 DOM 树中的位置执行查找呢?换而言之,根据一个给定的元素查找其父元素.子元素.前一个或后一个兄弟元素.例如,看一 ...
- 10个最受欢迎的 JavaScript 框架,它们的主要特征和功能
多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个挑战.如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么我已经帮你解决了问题.在本文中,我将列出用来构建 Web 应 ...
- 2021 年最佳 JavaScript 框架
据 Stackoverflow 的 2021 年开发者调查,JavaScript 已连续第八年成为使用最多的语言,有 67.7% 的受访者选择它.之所以如此受欢迎,主要是因为 JavaScript 是 ...
最新文章
- Okhttp----缓存的加入方式----附完整demo
- 监管发文:规范大学生群体消费贷款,避免陷入消费贷款陷阱
- 【Python基础】数据项目总结 -- 蛋壳公寓租金分析!
- reactjs Fragment的作用
- 剑指-顺时针打印矩阵
- Microsoft的现代数据管理
- linux 运行 dmol3,Dmol3建模及优化
- Linux加一存在路由没事吧,Linux 添加永久静态路由的方法
- DDD实战成绩管理---用户故事
- Kaggle 注册手机号以获取GPU资源
- 按钮点击触发的事件只生效一次
- 24. 二叉搜索树的后续遍历序列(c++版本)
- poj2594 Treasure Exploration 二分匹配之最小路径覆盖+传递闭包
- ISO27001LA国际信息安全管理主任审核员(IRCA)认证
- 网络工程师成长日记389-防火墙
- 腾讯视频qlv格式转换mp4普通视频方法
- 智能汽车HMI“火了”
- 季琦谈创业:三对矛盾和三个关口[转]
- C语言中 1%3,算术什么意思啊 算数什么意思
- NIO和BIO的比较