用prototype改善了一下旧代码

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

js 代码

var xRequest;
function createXMLHttpRequest() {
    var xHttpRequest = false;
    try {
        xHttpRequest = new XMLHttpRequest();
    } catch (trymicrosoft) {
        try {
            xHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (othermicrosoft) {
            try {
                xHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (failed) {
                xHttpRequest = false;
            }
        }
    }
    if (!xHttpRequest) {
        alert("Error initializing XMLHttpRequest!");
    }
    return xHttpRequest;
}

function editPartnerSite() {
    var img = document.getElementById("partnerSiteImg");
    img.setAttribute("src", "/partneradmin/image/save.gif");
    img.onclick = savePartnerSite;

    var label = document.getElementById("partnerSiteStr");

    var txtInput = document.createElement("input");
    txtInput.id = "partnerSiteInput";
    txtInput.type = "text";
    txtInput.value = label.firstChild.nodeValue;

    var parentNode = label.parentNode;
    parentNode.replaceChild(txtInput, label);
}

function savePartnerSite() {
    var txtInput = document.getElementById("partnerSiteInput");
    var newSiteStr = txtInput.value;
    txtInput.disabled = "disabled";

    var img = document.getElementById("partnerSiteImg");
    img.setAttribute("src", "/partneradmin/image/wait.gif");
    img.onclick = "";

    xRequest = createXMLHttpRequest();

    var saveSiteUrl = "/partneradmin/PartnerSet.do?method=savePartnerSite&newsite=" + escape(newSiteStr);

    xRequest.open("GET", saveSiteUrl, true);
    xRequest.onreadystatechange = rebuildPartnerSite;
    xRequest.send(null);
}

function rebuildPartnerSite() {
    var request = xRequest;
    if (request.readyState == 4) {
        if (request.status == 200) {
            var result = request.responseText;

            //if (result) {
                var txtInput = document.getElementById("partnerSiteInput");

                var label = document.createElement("label");
                label.id = "partnerSiteStr";
                label.appendChild(document.createTextNode(txtInput.value));
                var parentNode = txtInput.parentNode;
                parentNode.replaceChild(label, txtInput);

                var img = document.getElementById("partnerSiteImg");
                img.setAttribute("src", "/partneradmin/image/edit.gif");
                img.onclick = editPartnerSite;
            //} else {

            //}

        } else if (request.status == 404) {
            alert("Request URL does not exist");
        } else {
            alert("Error: status code is " + request.status);
        }
    }
}

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

js 代码

window.onload = function(){
    Element.hide('emailInput');
    Element.hide('partnerSiteInput');
}

function editPartnerSite() {
    $('partnerSiteInput').value = $('partnerSiteStr').innerHTML;

    Element.hide('partnerSiteStr');
    Element.show('partnerSiteInput');

    var img = $('partnerSiteImg');
    img.src = '/partneradmin/image/save.gif';
    img.onclick = savePartnerSite;
}

function savePartnerSite() {
    $('partnerSiteImg').src = '/partneradmin/image/loading.gif';

    var url = "/partneradmin/PartnerSet.do";
    var pars = 'method=savePartnerSite&newsite=' + escape($('partnerSiteInput').value);
    var mailAjax = new Ajax.Request(
        url,
        {
            method: 'get',
            parameters: pars,
            onComplete: rebuildPartnerSite
        }
    );
}

function rebuildPartnerSite(originalRequest) {
    $('partnerSiteStr').innerHTML = originalRequest.responseText;

    Element.show('partnerSiteStr');
    Element.hide('partnerSiteInput');

    var emailImg = $('partnerSiteImg');
    emailImg.src = "/partneradmin/image/edit.gif";
    emailImg.onclick = editPartnerSite;
}

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

相关连接

http://www.prototypejs.org/

http://jquery.com/

 

• 
• 描述: prototype类图
• 大小: 125.4 KB

• 查看图片附件

分享到：

动态CSS | 在EL表达式中获取名称以 '.' 开头的对象

• 2007-03-11 15:49
• 浏览 1798
• 评论(0)
• 查看更多

相关推荐

基于freeRTOS和STM32F103x的手机远程控制浴室温度系统设计源码

该项目是一款基于freeRTOS操作系统和STM32F103x微控制器的手机远程控制浴室温度系统设计源码，共包含1087个文件，包括580个C语言源文件、269个头文件、45个汇编源文件、36个数据文件、36个目标文件、35个编译规则文件、28个包含文件、27个文本文件、6个源文件、3个归档文件。此系统通过手机远程实现对浴室温度的有效控制，适用于智能浴室环境管理。

LABVIEW程序实例-web写数据.zip

labview程序代码参考学习使用，希望对你有所帮助。

LABVIEW程序实例-前面板对象常用属性.zip

labview程序代码参考学习使用，希望对你有所帮助。

LABVIEW程序实例-通过全局变量发送数据.zip

labview程序代码参考学习使用，希望对你有所帮助。

LABVIEW程序实例-数组大小.zip

labview程序代码参考学习使用，希望对你有所帮助。