HTML页面中多个$（document）.ready（）的副作用（如果有的话）是什么？

我正在使用一个遵循MVC模式的Web应用程序框架（Symfony 1.3.6）。

视图层由模板装饰器组成。模板文件还可能包含其他模板 – 这就是我的问题所在。

假设有一个页面（让我们称之为’主页’），它由几个模板组成 – （代码已经重构，因此’子模板’可以在其他页面上使用。

作为重构的结果，主模板使用的小模板（在我们的示例中为“主页”）需要包含与jQuery相关的代码。

让我们说主页模板使用2’子模板：

假设模板A包含以下代码段：

This is field 1
  $(document).ready(function(){ $('#field1').click(function(){ alert('Field 1 clicked!'); });

假设模板B包含以下代码段：

 This is field 2
  $(document).ready(function(){ $('#field2').click(function(){ alert('Field 2 clicked!'); });

现在模板’主页’看起来像这样：

   Multiple jQuery snippet test    include_template('template A')
 include_template('template B')

我试过这个 – 而且令我惊讶的是，它在合并的最终页面（’主页）中只有一个$（document）.ready（）。

我不确定我的浏览器（Firefox）或Web框架（Symfony）是否在幕后做了一些’清理’。

所以我的问题是，如果你想将jQueryfunction重构为’可重用的小模板’，可以重复使用以在不同的页面中提供相同的function，那么最好的方法是什么？

顺便说一句，我希望没有人建议写一个jQuery插件，因为这不是我所说的。

多个$(document).ready()调用没有问题，只有几点需要注意：

另见SO上的上一个问题：

您确实可以在页面上使用尽可能多的$(document).ready()实例。您可以按照对应用程序最有意义的方式对初始化代码块进行分组。你获得的灵活性可能会让你失去一点清晰度，因为在onLoad开火时不再那么容易看到会发生什么。

参考：多个$（文档）.ready（）的jQuery教程

如果要在不同的页面上重用js代码片段，可以在每个模块中使用view.yml配置文件，如下所示：

 firstActionSuccess: javascripts: [js1.js, js2.js] secondActionError: javascripts: [js1.js, js3.js]

Interesting Posts