JS框架使用及迁移(二)

B、方法部分
1、方法调用
Prototype:

Javascript代码
$$('.class').invoke('show');
Element.show($("id"));

$("id").invoke("show") 是会出错的，因为$("id") 是 HTML 元素对象，并无 invoke 方法。

jQuery:
Javascript代码
$j("#id").show();
$j(".class").show();

2、迭代：
Prototype:
Javascript代码
[ 'hello', 'world'].each(function(s, index) {
alert(index + ': ' + s);
});

可见javascript 的数组对象被扩展，加入了迭代功能。

jQuery:
Javascript代码
$j([ 'hello', 'world']).each(function(s) {
alert(s+":"+this);
});

包装成 jQuery 对象，然后操作，这里值得注意的是，在回调函数中，this 被赋值为当前元素。

3、事件监听
jQuery 相比 Prototype 一个很好的地方，就是 ready() 事件。
Javascript代码
$j(document).ready(function(){}); // 或者

$j(function(){});

而 Prototype 早期只能通过
Javascript代码
Event.observe(window,'load',function(){})

后来提供了：
Javascript代码
document.observe("contentloaded", function() {})

现在改为：
Javascript代码
document.observe('dom:loaded',function(){})

值得注意的是，这些方法可以多次调用。并且在事件触发后，能按调用先后的程序执行相关代码。
像 BOM 本身的 window.onload 事件，如果多次赋值，会被覆盖。
Javascript代码
function out1()
{
console.log("output 1");
}
function out2()
{
console.log("output 2");
}
window.onload = out1;
window.onload = out2;

以上代码，只会输出 "output 2"，而以下两段代码都会依次输出 "output 3 "、"output 4":
Prototype:
Javascript代码
document.observe('dom:loaded',function(){
console.log("output 3");
});
document.observe('dom:loaded',function(){
console.log("output 4");
});

jQuery:
Javascript代码
$j(function() {
console.log("output 3");

});

$j(function() {
console.log("output 4");

});

Prototype:
Javascript代码
Event.observe('btnok', 'click', btnHandler);

或者
Javascript代码
$('btnok').observe('click', btnHandler);

值得注意的是，对于同一个元素的同一个事件，注册同一个 handler ，Prototype 只注册一次。

也就是说，如下两次调用 observe 注册
Prototype
Javascript代码
function btnHandler()
{
console.log("btn clicked!");
}
Event.observe('btnok', 'click', btnHandler);
$('btnok').observe('click', btnHandler);

但是对于同一个元素、同一个事件，用不同的 handler ，可以注册多次。
Javascript代码
function btnHandler()
{
console.log("btn clicked!");
}
function btnHandler1()
{
console.log("btn clicked 1!");
}
Event.observe('btnok', 'click', btnHandler);
$('btnok').observe('click', btnHandler1);

移除事件绑定处理过程 btnHandler 用如下语句：
Javascript代码
$('btnok').stopObserving('click', btnHandler);

jQuery 则为:
Javascript代码
$j('#btnok').bind('click', btnHandler);

或者更灵活简洁的方法：
Javascript代码
$j('#btnok').click(btnHandler);

值得注意的是，对于同一个元素的同一个事件，注册同一个 handler ，jQuery 可注册多次。
Javascript代码
function btnHandler()
{
console.log("btn clicked!");
}
$j('#btnok').bind('click', btnHandler);
$j('#btnok').click(btnHandler);

在点击了元素 btnok 后，如上代码会有连续两次输出。

对于同一个元素、同一个事件，用不同的 handler ，当然可以注册多次。
Javascript代码
function btnHandler()
{
console.log("btn clicked!");
}
function btnHandler1()
{
console.log("btn clicked 1!");
}
$j('#btnok').bind('click', btnHandler);
$j('#btnok').click(btnHandler1);

移除事件绑定处理过程 btnHandler 用如下语句：
Javascript代码
$j('#btnok').unbind('click', btnHandler);

4、事件冒泡
使用场景，比如有时候，需要对链接进行点击事件处理，并且不想让它进入链接 href 属性指的目标页面，而是想让它有别的操作。
Protoype
Javascript代码
$('link').observe('click', function(event){
    console.log(this); //输出 link 元素
    console.log(this.readAttribute('href'));
    event.stop();
});

jQuery:
Javascript代码
$j('#link').click(function(event){
    console.log(this); //输出空, event.target 才是 html 元素对象
    console.log($j(event.target).attr('href')); //用 $j 转化成为 jQuery 对象才能调用 attr 方法
    event.preventDefault();
});

在如上代码中，点击了链接之后，不会被重定向到目标页面。而是执行完输出之后直接停止。

补充：web前端 , JavaScript ,