logo标签列表

在HTML页面中多次使用$(document).ready()会有什么副作用（如果有的话）？

jquerydocument-ready
10

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

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

假设存在一个页面（我们称之为“主页”），该页面由几个模板组成——（代码已被重构，以便“子模板”可用于其他页面）。

由于重构，被主模板使用的小模板（在我们的例子中是“主页”）需要包含其jQuery相关的代码。

假设主页模板使用了2个“子模板：

  • 模板A
  • 模板B

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

<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field1').click(function(){
      alert('Field 1 clicked!');
   });
</div>
</script>
假设模板 B 包含以下片段：
<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field2').click(function(){
      alert('Field 2 clicked!');
   });
</div>
</script>

现在模板“homepage”的样子是这样的：

<html>
  <head>
    <title>Multiple jQuery snippet test</title>
    <script src="path_to_jquery"></script>
 </head>
 <body>
   <div>include_template('template A')</div>
   <div>include_template('template B')</div>
 </body>
</html>
我曾尝试这样做，令我惊讶的是，在合并的最终页面（'homepage'），只有一个$(document).ready()函数能够正常工作。
我不确定是我的浏览器（Firefox）还是web框架（Symfony）在幕后进行了一些“清理”。
所以，我的问题是，如果您想将jQuery功能重构为“可重用的小模板”，以便在不同的页面中重新使用提供相同的功能，最佳方法是什么？
顺便说一句，希望没有人建议编写jQuery插件，因为那不是我所谈论的。
你的意思是你得到了一个合并的函数调用还是只有一个字段有其点击事件？如果你想确保 Firefox 清理，尝试使用 wget，你的页面不会被修改。 - greg0ire
3个回答
14

多个$(document).ready()调用并不会产生问题，但需要注意以下几点：

  • 降低可读性。
  • 作用域：在一个$(document).ready()中声明的函数/变量/对象在其他$(document).ready()中将不可见。可以参考这个简单的演示。

另外可以查看 SO 上的这个之前的问题：

5
您可以在页面上使用任意数量的 $(document).ready() 实例。您可以按照对您的应用程序最有意义的方式分组初始化代码块。虽然您在灵活性方面获得了优势，但可能会失去一些清晰度，因为不再容易看到 onLoad 触发时会发生什么。
参考文献：jQuery Tutorial on Multiple $(document).ready()
-1

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

firstActionSuccess:
  javascripts: [js1.js, js2.js]
secondActionError:
  javascripts: [js1.js, js3.js]
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接