`
wangcheng
  • 浏览: 1454536 次
  • 性别: Icon_minigender_1
  • 来自: 青岛人在北京
社区版块
存档分类
最新评论

用prototype改善了一下旧代码

    博客分类：
  • ajax
prototypejQueryAjaxYUIMicrosoft
阅读更多

项目里原来有一段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/

 

  • 描述: prototype类图
  • 大小: 125.4 KB
分享到：
| 在EL表达式中获取名称以 '.' 开头的对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics