鲁棒Javascript代码

Question

我已经完成了一个脚本，它为特定的url创建了一个模式，然后加载图像内容。我想知道是否有一种方法可以使这段代码更加健壮，并且即使所有的内容都存在，页面也会持续加载。

任何帮助都是非常感谢的。

function displayContent() {
    document.getElementById("findCar").onsubmit = function () {
        var registration = document.getElementById("regPlate").value,
            reference = document.getElementById("stockRef").value;
        var regArray = registration.split(''),
            refArray = reference.split(''),
            referenceNinth = refArray[10];
        reverseReg = regArray.reverse();
        var obfuscated = new Array();
        var obf_index = 0;
        for (i = 0; i <= 6; i++) {
            obfuscated[obf_index] = refArray[i];
            obf_index++;
            obfuscated[obf_index] = reverseReg[i];
            obf_index++;
        }
        obfuscated.push(referenceNinth);
        obfuscatedString = obfuscated.join("");
        var camera = new Array();
        var cameraSize = "350";
        var cam_index = 0;
        for (i = 0; i <= 1; i++) {
            if (i > 0) cameraSize = "800";
            camera[cam_index++] = cameraSize + "/f";
            camera[cam_index++] = cameraSize + "/i";
            camera[cam_index++] = cameraSize + "/6";
            camera[cam_index++] = cameraSize + "/5";
            camera[cam_index++] = cameraSize + "/4";
            camera[cam_index++] = cameraSize + "/r";
        }
        for (i = 0; i <= 11; i++) {
            document.write("<img src='http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "'/>");
        }

    };
}

Answer 1

编辑:要防止页面重新加载，您需要在onsubmit处理程序中防止默认表单提交。关于如何做到这一点，请看我后面的答案。

当您对已经加载的文档调用document.write()时，它会清除前一个文档的内容，并开始编写一个新文档，这可能会造成您提到的“连续加载”的印象。如果这不是您想要的行为，那么您应该通过直接插入新的DOM节点而不是使用document.write()来动态地将图像内容添加到页面中。

您可以通过替换以下内容来做到这一点：

    for (i = 0; i <= 11; i++) {
        document.write("<img src='http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "'/>");
    }

就像这样：

    for (i = 0; i <= 11; i++) {
        var img = new Image();
        img.src = 'http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "'
        document.body.appendChild(img);
    }

为了帮助您重新编写/重新组织代码，使其成为更好的代码，http://codereview.stackexchange.com站点应该将这些类型的问题放在哪里。另外，如果有人想要以有意义的方式帮助您，您可能需要描述一下您实际上试图用前30行代码实现什么，因为它们的目的并不是很明显，理解它可能有助于理解如何简化实现。

其他可能导致页面重新加载的内容：

1. 按下按钮提交的表格
2. window.location设置
3. 页面HTML中的元刷新数据
4. 单击要使用JS处理的链接，但并不会阻止遵循该链接的默认行为。

现在我看到您的事件处理程序是onsubmit。这可能意味着你收到了一份表格。如果将(e)作为参数添加到处理程序中，则可以使用e.preventDefault()防止表单提交并导致页面重新加载。

因为您只是使用普通的javascript，所以您也可以从您的return false处理程序中提取onsumbit，以防止表单提交。