javascript - 在 document.ready 上执行 $ ('#someId' ).click(function() 会很昂贵吗？

Question

我有一个网站，其中包含 25-30 个不同的页面(页面类型/模板，实际上，您可能已经明白了)。

对于其中的每一个，我都会在 $(document).ready(function() ...); 上连接一些东西，我只是想知道是否所有这些函数都可以放在同一个中.js 文件，这意味着其中许多将徒劳执行，因为我平均每页 Hook 1-2 个 anchor 点击 = 50 个操作被 Hook ，尽管对于任何给定页面只有大约 2 个操作有效。

希望你能关注。为了清楚起见，这里有一些示例代码。

在同一个文件中，我有很多这样的文件，但它们具有不同的 id 或类连接

$(document).ready(function(){
    $('#options-toggler').click(function() {     
        $('#options').toggle(200);
        return false;
    });
});

....

这里的要点是，我有大约 50 个左右的函数，如上面的，设置在一个文件中，该文件加载到您访问的每个页面上，但在任何给定页面上，只有 1-2 个元素可以获取连接起来。

这是不好的做法吗？如果是这样，还有什么选择？我无法想象每个模板只有一个 .js 文件，但请让我知道最佳实践是什么。

如果您需要更多信息，请在评论中告诉我。

编辑也许从上面的文字中还不清楚，但该网站是用 Python 而不是 javascript 实现的。使用 Javascript，我可以做一些简单的事情，例如更新计数器、将保存发送到服务器等。我只看到使用 Javascript 框架的开销，正如这个问题的至少两个答案中所建议的那样。

Answer 1

您可以部分模块化，例如如下所示

main.js

function initializePageOne(){
    $(document).ready(function(){
        $('#options-toggler').click(function() {     
            $('#options').toggle(200);
            return false;
        });
    });
    //Other initialization stuffs relevant to page one
}

function initializePageTwo(){
    $(document).ready(function(){
        $('#options-toggler2').click(function() {     
            $('#options').toggle(200);
            return false;
        });
    });
    //Other initialization stuffs relevant to page two
}

然后在page1.html中放入，

//reference to main.js
<script type="text/javascript">
    initializePageOne();
</script>

对于page2.html

//reference to main.js
<script type="text/javascript">
    initializePageTwo();
</script>

这样，代码都在 main.js 中，但初始化是特定于页面的

希望这有帮助