低调的Javascript，我应该使用它吗？管理和组织活动的最佳方式是什么？如何防止效率低下？

我一直在努力选择不引人注目的javascript，而不是在html语法中定义它。我想说服自己走不引人注目的路线，但我很难克服下面列出的问题。你能帮我说服我吗：）

1） 当您以不引人注目的方式绑定事件时，在客户端的机器上查找html元素会有额外的开销，在这种情况下，您不必迭代DOM

2） 使用document.ready（）（jquery）绑定事件与加载页面之间存在延迟。这在非常大的站点上更为明显

3） 如果您悄悄地绑定事件（onclick等），则无法查看html代码并知道有一个事件绑定到特定的类或id。在更新标记时，如果没有意识到您可能影响javascript代码，这可能会产生问题。定义用于绑定javascript事件的css元素时是否有命名约定（我见过ppl使用js_className）

4） 对于一个站点，不同页面有不同的javascript片段。例如，Header.html包含一个nav，它在所有页面上触发javascript事件，其中as homepage.html和searchPage.html包含在各自页面上触发javascript的元素

sudo代码示例：

header.html

<script src="../myJS.js"></script>
<div>Header</div>
<ul>
<li>nav1</li><li>nav2</li>
</ul>

在这种情况下，当您在searchPage上时，它仍将尝试查找不存在且失败的“homepageDiv”。这不会影响功能，但这是额外的不必要的遍历。我可以将其分解为单独的javascript文件，但是浏览器必须下载多个文件，而且我不能只提供一个文件，然后将其缓存到所有页面

使用不引人注目的javascript的最佳方式是什么，这样我就可以轻松地维护一个（相当重的脚本）网站，这样其他开发人员在修改我的代码时就会知道脚本绑定到html元素。并提供代码，以便客户端的浏览器不会查找特定页面上不存在的元素（但可能存在于其他页面上）

---

谢谢

你很困惑。不引人注目的JavaScript不仅仅是在程序中定义事件处理程序。这是一组编写JavaScript的规则，这样脚本就不会影响同一页面上其他JavaScript的功能。JavaScript是一种动态语言。任何人都可以改变任何事情。因此，如果同一页面上的两个单独脚本都按如下方式定义了全局变量

add

，则最后一个定义它的脚本将获胜并影响第一个脚本的功能

// script 1
var add = function (a, b) {
    return a + b;
};

// script 2
add = 5;

//script 1 again
add(2, 3); // error - add is a number, not a function

现在，直接回答您的问题：

在JavaScript中查找元素并向其附加事件侦听器的额外开销并不多。您可以使用新的DOM方法

document.querySelector

快速查找元素并向其附加事件侦听器（查找元素的时间不到1毫秒）

如果要快速附加事件侦听器，请不要在加载文档内容时执行此操作。将事件侦听器附加到正文部分的末尾，或者直接附加到希望附加事件侦听器的HTML代码部分之后

我不认为修改标记会以任何方式影响JavaScript。如果尝试将事件侦听器附加到JavaScript中不存在的元素，它将自动失败或引发异常。无论如何，它都不会影响页面其余部分的功能。此外，HTML设计师实际上不需要知道附加在任何元素上的事件。HTML应该只用于语义标记；CSS用于样式化；JavaScript用于行为。不要把这三个混为一谈

上帝给了我们自由意志。使用它。JavaScript支持条件执行。有

if

语句。查看是否存在

homePageDiv

，然后才将事件侦听器附加到它

尝试：

---

你的问题与低调的JavaScript几乎没有关系。这表明缺乏研究和了解。因此，我投了反对票。对不起。

您感到困惑。不引人注目的JavaScript不仅仅是在程序中定义事件处理程序。这是一组编写JavaScript的规则，这样脚本就不会影响同一页面上其他JavaScript的功能。JavaScript是一种动态语言。任何人都可以改变任何事情。因此，如果同一页面上的两个单独脚本都按如下方式定义了全局变量

add

，则最后一个定义它的脚本将获胜并影响第一个脚本的功能

// script 1
var add = function (a, b) {
    return a + b;
};

// script 2
add = 5;

//script 1 again
add(2, 3); // error - add is a number, not a function

现在，直接回答您的问题：

在JavaScript中查找元素并向其附加事件侦听器的额外开销并不多。您可以使用新的DOM方法

document.querySelector

快速查找元素并向其附加事件侦听器（查找元素的时间不到1毫秒）

如果要快速附加事件侦听器，请不要在加载文档内容时执行此操作。将事件侦听器附加到正文部分的末尾，或者直接附加到希望附加事件侦听器的HTML代码部分之后

我不认为修改标记会以任何方式影响JavaScript。如果尝试将事件侦听器附加到JavaScript中不存在的元素，它将自动失败或引发异常。无论如何，它都不会影响页面其余部分的功能。此外，HTML设计师实际上不需要知道附加在任何元素上的事件。HTML应该只用于语义标记；CSS用于样式化；JavaScript用于行为。不要把这三个混为一谈

上帝给了我们自由意志。使用它。JavaScript支持条件执行。有

if

语句。看看是否<

$(document).ready(function(){
$("ul.li").bind("click",doSomething());
$(".homePageDiv").bind("click",doSomethingElse());
$(".searchPageDiv").bind("click",doSomethingSearchy());
});

// script 1
var add = function (a, b) {
    return a + b;
};

// script 2
add = 5;

//script 1 again
add(2, 3); // error - add is a number, not a function

$(document).ready(function () {
    $("ul.li").bind("click",doSomething());
    if (document.querySelector(".homePageDiv")) {
        $(".homePageDiv").bind("click",doSomethingElse());
    } else {
        $(".searchPageDiv").bind("click",doSomethingSearchy());
    }
});