javascript - 健壮的 JavaScript 代码

Question

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

非常感谢任何帮助。

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，因此您也可以从 onsumbit 处理程序返回 false 来阻止表单提交。