用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
• 浏览 1776
• 评论(0)
• 查看更多

相关推荐

K-prototype源代码

采用MATLAB编写，根据原作者论文的思路编写，代码里面存在注释，适合聚类分析学习者查看

23种设计模式之Prototype模式代码

总结一下，Prototype模式是一种有效的创建型设计模式，通过对象的克隆来简化新对象的创建过程，减少重复代码，提高代码复用。在Java等支持克隆操作的编程语言中，实现起来相对简单，但需要注意深拷贝和浅拷贝的区别...

prototypejs和例子代码

在压缩包中的"Demos"文件可能包含了使用PrototypeJS编写的实际示例，这些示例可能涵盖了基本的DOM操作、Ajax请求、事件处理等方面的代码。通过学习这些示例，你可以更好地理解如何在实际项目中应用PrototypeJS。 5...

Prototype_1.6 JavaScript代码和中文帮助手册

该资源包括两个文件，一个是prototype代码，另一个是中文帮助，非常值得下载 ========================================= 以下是prototype框架简介 prototype.js 是Sam Stephenson写的一个Javascript的小框架（实际...

prototype1.4旧中文版

看到一个很好的东西在国内没有被很多人使用起来，实在是不爽，所以花了很大功夫把这个手册翻译成中文，由于这篇文章很长，所以，翻译的工作量很大而且有些地方英文版也没有说清楚，虽得查看源代码，好在不是坚持做完...

java中的prototype.js的代码

java中的prototype.js的代码

prototype-1.7JS代码

有了他会让你的JS写的更加方便，快速,操作DOM变成。

javascript中类和继承（代码示例+prototype.js）

通过函数构造器、原型链以及`prototype.js`文件中可能提供的类和继承工具，我们可以创建复杂的对象结构和组织代码。理解并掌握这些概念有助于提升JavaScript编程能力，更好地适应现代Web开发的需求。

prototype1.6.0prototype1.6.0prototype1.6.0prototype1.6.0

这个页面可能展示了如何在实际项目中集成和使用Prototype库，或者包含了一系列用例和示例代码，供学习者参考。 "jspage_file"可能是一个文件夹，里面包含与"jsPage.html"相关的资源，如CSS样式表、图像或者其他...

C++设计模式代码资源10_prototype.zip

这个"C++设计模式代码资源10_prototype.zip"压缩包显然包含了关于C++实现原型模式的示例代码。 原型模式的核心概念是克隆（Cloning）。在C++中，克隆能力可以通过实现`clone()`方法来赋予一个类。这个方法会返回一...

基于prototype的js异步上传带进度条 有后台代码

本教程将详细介绍如何使用Prototype库实现一个带有进度条的异步文件上传功能，并涉及到后台代码的支持。 首先，我们需要理解Prototype的核心概念。Prototype通过扩展JavaScript的内置对象，如Array、Function和...

Prototype-1.6.0 中文版\英文版\Prototype.js

Prototype.js 是一个广泛使用的JavaScript库，它为JavaScript语言增加了许多实用的功能，使开发Web应用程序变得更加简单。这个压缩包包含了Prototype的1.6.0版本，包括中文版和英文版的文档，以及源代码文件。 首先...

prototype实现超酷进度条 prototype实现超酷进度条代码下载.zip

本示例中，我们关注的是如何使用Prototype JavaScript框架来实现一个“超酷”的进度条效果。Prototype是一个强大的JavaScript库，它提供了许多便利的函数，使得操作DOM（文档对象模型）变得更加简单。 首先，我们要...

prototype帮助中文文档

使用Prototype时，应遵循一些最佳实践，如合理组织代码（使用模块化），避免全局变量污染，以及利用Prototype的缓存机制减少DOM操作的开销。此外，了解并熟练使用Prototype提供的工具和模式，如观察者模式...

JavaScript_Prototype(源代码+中文手册).rar

这个压缩包文件“JavaScript_Prototype(源代码+中文手册).rar”包含了关于JavaScript原型的源代码和中文手册，为学习和理解这一主题提供了丰富的资源。 JavaScript是一种动态类型的语言，其核心特性之一就是原型...

Prototype1.5.1使用手册

《Prototype 1.5.1使用手册》是针对JavaScript库Prototype的一个详细指南，该库是Web开发中的一个强大工具，尤其在处理DOM操作、Ajax交互和函数增强方面表现卓越。本手册以.chm（Compiled Help Manual）格式提供，...

prototype的使用

在实际开发中，`prototype`的使用可以提高代码的复用性和效率。然而，过度使用或不恰当的使用`prototype`可能会导致性能问题，因为每次访问`prototype`上的属性时都需要查找原型链。 总的来说，`prototype`是...

prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

包含的"prototype.js"文件是Prototype 1.6.0的源代码，这对于开发者来说是一份宝贵的参考资料。通过阅读源码，开发者可以直接了解每个函数的实现细节，理解其工作原理，从而更好地应用到自己的项目中。源码中的注释...

prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

这个压缩包包含了Prototype库的多个版本的手册和源代码文件，便于开发者理解和使用。 首先，我们来看`prototype-1.6.0.3.js`，这是Prototype库的1.6.0.3版本的源代码文件。在这个版本中，Prototype提供了许多实用的...

Prototype_1.4.doc，Prototype_1.5.1.chm 中文版

"Prototype_1.4.doc"可能是一个关于Prototype 1.4版本的文档，以.doc格式存储，可能包含了详细的API说明、示例代码和使用指南。而"Prototype_1.5.1.chm"是一个帮助文件（Compiled Help Manual），通常用于存放软件的...