在 document.ready 上执行 $('#someId').click(function() 是否昂贵？

Question

我的网站有大约 25-30 个不同的页面（页面类型/模板，真的，您可能明白了）。

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

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

在同一个文件中，我有很多这样的文件，但 ID 不同或类被连接

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

....

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

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

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

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

Answer 1

更新：如果您不喜欢 angular 或 ember 等框架，请尝试使用 require-js，它将帮助您以模块化方式加载您想要的内容，这样您就可以只加载您想要的那些挂钩！

这是不好的做法吗？如果你不使用框架或模块化脚本加载（要求）你没有太多选择

如果是这样，还有什么选择？使用框架或模块化脚本加载！

您应该尝试使用 ember.js 或 angular.js，基本上是任何框架。你已经在使用它们了吗？
在不使用任何框架的情况下使用纯 javascript 的 25-30 个不同页面将是一种极其糟糕的体验。
P.S。 => 我在没有任何框架的情况下使用普通的 javsacript 完成了整个在线购物网站，这太可怕了，有太多重复的代码，调试、增强和一切都很困难！一旦我学会了 ember 我感到很欣慰！

Answer 2

除非您想转移到像 React or Angular 这样的结构化框架，否则您可以将每个页面单独 "hookups" 放入 HTML 中的 <script> 标记中。

这对于小型网站来说通常就足够了，但是一旦你变大了，你肯定想要实现某种框架。

Answer 3

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

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，但是初始化是页面特定的

希望这对您有所帮助

在 document.ready 上执行 $('#someId').click(function() 是否昂贵？

Is doing $('#someId').click(function() on document.ready into thin air expensive?

javascript

jquery

onclick

document-ready