javascript - 代码审查 : Efficient? 它会工作吗?

标签 javascript

澄清

这是检查用户是否更改和表单中的值的脚本的一部分。如果用户在更改值后尝试离开页面,他们会通过 onbeforeunload 收到提醒,并会看到离开页面或留下的选项。

棘手的部分是确定(多个)选择列表的更改状态......这就是这个问题适用的地方。我只是想看看是否有人能发现任何潜在的问题。

有人提到总是使用默认值进行比较可能没有意义。但是,在这种情况下它确实有意义。如果用户更改了一个值,然后在离开页面之前继续将其更改回原始值,他们可能不想要“您在页面上更改了一些东西,离开还是留下?”弹出警报。


下面的代码旨在检查选择列表 (<select>) 以查看“已选择”属性是否与默认“已选择”属性相同。它应该适用于多选列表和单选项选择列表。

函数IsSelectChanged' should returnif the selected option(s) are not the same as the default and如果所选选项与默认选项相同,则为 false。

代码:

<select>
    <option selected="selected">Opt 1</option>
    <option>Opt 2</option>
</select>
<script>
    // the code:
    function IsSelectChanged(select){
        var options = select.options,
            i = 0,
            l = options.length;
        // collect current selected and defaultSelected
        for (; i < l; i++) {
            var option = options[i];
            // if it was selected by default but now it is not
            if (option.defaultSelected && !option.selected) {
                return true;
            }
            // if it is selected now but it was not by default
            if (option.selected && !option.defaultSelected) {
                return true;
            }
        }
        return false;
    }

    // implementation:
    $("select").change(function(){
        doSomethingWithValue( IsSelectChanged(this) );
    });
</script>

代码应该适用于 select允许多选/初始选择和单选变体的列表(如上所示)。

任何人都可以在这里发现任何潜在的错误或效率低下吗?或者知道更好的方法吗?

谢谢

最佳答案

好吧,我不知道它会变得“高效”多少,但是您基本上是在循环体(2 个 if 语句)中执行 XOR,那么为什么不使用一个呢? IIRC,JS 没有明确的 XOR 只有一个位(更多信息)[^ https://developer.mozilla.org/en/JavaScript/Reference/Operators/Bitwise_Operators] .可以通过使用三元运算符将 1 或 0 的值传递给它来实现使用按位 ^ 模拟实际 XOR 的变通方法,例如:

if ((option.defaultSelected ? 1 : 0) ^ (option.selected ? 1 : 0)) { return true }

如果您想要简洁(感谢 @some 的想法,请参阅此答案下方的评论了解详细信息);

if (option.defaultSelected ^ option.selected) { return true }

将实现与代码中的两个 if 语句相同的效果。

关于javascript - 代码审查 : Efficient? 它会工作吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4028061/

相关文章:

javascript - 使用 Javascript : How to unlock a partially locked layer? 的 Photoshop 脚本

JavaScript 通过名称调用对象方法

javascript - 使用 moment.js 将 date() 设置为用户时区的午夜

c# - 使用正则表达式删除 JavaScript

javascript - 轮播宽度问题

加载页面时 Javascript 函数不起作用

javascript - Protractor Promise fn 不是一个函数

javascript - videojs的时间格式

javascript - 使用动态创建的链接在 AngularJS 中下载文件

c# - 从后面的代码中提升 Javascript 确认框