JS 框架使用及迁移(二)

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

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

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


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

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

$j("#id").show();
$j(".class").show();


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

[ 'hello', 'world'].each(function(s, index) {
  alert(index + ': ' + s);
});

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

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

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

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

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

$j(document).ready(function(){}); // 或者

$j(function(){});


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

Event.observe(window,'load',function(){})

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

document.observe("contentloaded", function() {})

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

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;  

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");   
});  

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");   
  
});  

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

});

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

});

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

Event.observe('btnok', 'click', btnHandler);

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

$('btnok').observe('click', btnHandler);

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

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

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);  

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);  

$('btnok').stopObserving('click', btnHandler);



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

$j('#btnok').bind('click', btnHandler);

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

$j('#btnok').click(btnHandler);

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

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);  

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);  

$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();   
});  

$('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();   
});  

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

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

推荐链接
见证又一个准百万富翁的诞生！
3G培训就业月薪平均7K+，不3K就业不花一分钱！
20-30万急聘多名天才Java/MTA软件工程师