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

在如上代碼中,點擊瞭鏈接之後,不會被重定向到目標頁面。而是執行完輸出之後直接停止。

You May Also Like