用prototype改善了一下旧代码

项目里原来有一段ajax的应用，功能很简单，控制几个页面元素，加上一个后台提交，代码如下：

js 代码

1. var xRequest;   
2. function createXMLHttpRequest() {   
3.     var xHttpRequest = false;   
4.     try {   
5.         xHttpRequest = new XMLHttpRequest();   
6.     } catch (trymicrosoft) {   
7.         try {   
8.             xHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");   
9.         } catch (othermicrosoft) {   
10.             try {   
11.                 xHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");   
12.             } catch (failed) {   
13.                 xHttpRequest = false;   
14.             }   
15.         }   
16.     }   
17.     if (!xHttpRequest) {   
18.         alert("Error initializing XMLHttpRequest!");   
19.     }   
20.     return xHttpRequest;   
21. }   
22.   
23. function editPartnerSite() {   
24.     var img = document.getElementById("partnerSiteImg");   
25.     img.setAttribute("src", "/partneradmin/image/save.gif");   
26.     img.onclick = savePartnerSite;   
27.   
28.     var label = document.getElementById("partnerSiteStr");   
29.        
30.     var txtInput = document.createElement("input");   
31.     txtInput.id = "partnerSiteInput";   
32.     txtInput.type = "text";   
33.     txtInput.value = label.firstChild.nodeValue;   
34.        
35.     var parentNode = label.parentNode;   
36.     parentNode.replaceChild(txtInput, label);   
37. }   
38.   
39. function savePartnerSite() {   
40.     var txtInput = document.getElementById("partnerSiteInput");   
41.     var newSiteStr = txtInput.value;   
42.     txtInput.disabled = "disabled";   
43.        
44.     var img = document.getElementById("partnerSiteImg");   
45.     img.setAttribute("src", "/partneradmin/image/wait.gif");   
46.     img.onclick = "";   
47.   
48.     xRequest = createXMLHttpRequest();   
49.   
50.     var saveSiteUrl = "/partneradmin/PartnerSet.do?method=savePartnerSite&newsite=" + escape(newSiteStr);   
51.   
52.     xRequest.open("GET", saveSiteUrl, true);   
53.     xRequest.onreadystatechange = rebuildPartnerSite;   
54.     xRequest.send(null);   
55. }   
56.   
57. function rebuildPartnerSite() {   
58.     var request = xRequest;   
59.     if (request.readyState == 4) {   
60.         if (request.status == 200) {   
61.             var result = request.responseText;   
62.                
63.             //if (result) {   
64.                 var txtInput = document.getElementById("partnerSiteInput");   
65.        
66.                 var label = document.createElement("label");   
67.                 label.id = "partnerSiteStr";   
68.                 label.appendChild(document.createTextNode(txtInput.value));   
69.                 var parentNode = txtInput.parentNode;   
70.                 parentNode.replaceChild(label, txtInput);   
71.        
72.                 var img = document.getElementById("partnerSiteImg");   
73.                 img.setAttribute("src", "/partneradmin/image/edit.gif");   
74.                 img.onclick = editPartnerSite;   
75.             //} else {   
76.                
77.             //}   
78.   
79.         } else if (request.status == 404) {   
80.             alert("Request URL does not exist");   
81.         } else {   
82.             alert("Error: status code is " + request.status);   
83.         }   
84.     }   
85. }  

这几天看了prototype，决定把这段程序改善一下，完成后如下：

js 代码

1. window.onload = function(){   
2.     Element.hide('emailInput');    
3.     Element.hide('partnerSiteInput');   
4. }   
5.   
6. function editPartnerSite() {   
7.     $('partnerSiteInput').value = $('partnerSiteStr').innerHTML;   
8.   
9.     Element.hide('partnerSiteStr');    
10.     Element.show('partnerSiteInput');    
11.        
12.     var img = $('partnerSiteImg');   
13.     img.src = '/partneradmin/image/save.gif';   
14.     img.onclick = savePartnerSite;   
15. }   
16.   
17. function savePartnerSite() {   
18.     $('partnerSiteImg').src = '/partneradmin/image/loading.gif';   
19.        
20.     var url = "/partneradmin/PartnerSet.do";   
21.     var pars = 'method=savePartnerSite&newsite=' + escape($('partnerSiteInput').value);   
22.     var mailAjax = new Ajax.Request(   
23.         url,   
24.         {   
25.             method: 'get',   
26.             parameters: pars,   
27.             onComplete: rebuildPartnerSite   
28.         }   
29.     );   
30. }   
31.   
32. function rebuildPartnerSite(originalRequest) {   
33.     $('partnerSiteStr').innerHTML = originalRequest.responseText;   
34.        
35.     Element.show('partnerSiteStr');    
36.     Element.hide('partnerSiteInput');    
37.        
38.     var emailImg = $('partnerSiteImg');   
39.     emailImg.src = "/partneradmin/image/edit.gif";   
40.     emailImg.onclick = editPartnerSite;   
41. }  

使用prototype后，代码行数缩少了近50%，理解起来也更清晰．还有一个 jQuery 的框架，据说比prototype还牛，最近要跟YUI整合．

相关连接

http://www.prototypejs.org/

http://jquery.com/