javascript - 不显眼的 Javascript，我应该使用它吗？管理和组织事件的最佳方式是什么？如何防止效率低下？

Question

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

1) 当您不显眼地绑定(bind)事件时，客户端计算机上会产生额外的开销来查找 html 元素，而当您执行操作时，您不必迭代 DOM。

2) 使用 document.ready() (jquery) 绑定(bind)事件与页面加载之间存在滞后。这在非常大的网站上更为明显。

3) 如果您不显眼地绑定(bind)事件(onclick 等)，则无法查看 html 代码并知道有一个事件绑定(bind)到特定的类或 id。当更新标记并且没有意识到您可能会影响 JavaScript 代码时，这可能会出现问题。定义用于绑定(bind) javascript 事件的 css 元素时是否有命名约定(我见过 ppl 使用 js_className)

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

sudo 代码示例:

标题.html

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

主页.html

<@include header.html>
<div class="homepageDiv">some stuff</div>

搜索页.html

<@include header.html>
<div class="searchpageDiv">some other stuff</div>

myJS.js

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

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

使用不显眼的 javascript 的最佳方法是什么，以便我可以轻松维护一个(漂亮的脚本重)网站，以便另一个开发人员在修改我的代码时意识到脚本被绑定(bind)到 html 元素。并提供代码，以便客户端的浏览器不会查找特定页面上不存在的元素(但可能存在于其他页面上)。

谢谢!

Answer 1

你很困惑。不显眼的 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

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

1. 在 JavaScript 中查找元素并向其附加事件监听器的额外开销并不多。您可以使用新的 DOM 方法 document.querySelector 快速查找元素并向其附加事件监听器(查找该元素所需的时间不到 1 毫秒)。
2. 如果您想快速附加事件监听器，请不要在加载文档内容时执行此操作。将事件监听器附加到正文部分的末尾，或者直接附加到您希望附加事件监听器的 HTML 代码部分之后。
3. 我不明白改变标记会如何以任何方式影响 JavaScript。如果您尝试将事件监听器附加到 JavaScript 中不存在的元素，它将默默失败或引发异常。无论哪种方式，它都不会影响页面其余部分的功能。此外，HTML 设计者实际上不需要了解任何元素所附加的事件。 HTML 只应该用于语义标记； CSS 用于样式设置； JavaScript 用于行为。不要混淆三者。
4. 上帝赋予我们自由意志。用它。 JavaScript 支持条件执行。有 if 语句。查看 homePageDiv 是否存在，然后才向其附加事件监听器。

尝试:

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

你的问题与不显眼的 JavaScript 没有什么关系。这表明缺乏研究和理解。因此，我对此投反对票。抱歉。