HTML 页面中多个 $(document).ready() 有何副作用(如果有)?

2024-05-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>

现在模板“主页”如下所示:

<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>

我已经尝试过这个 - 令我惊讶的是,它起作用了,因为合并后的最后一页(“主页”)中只有一个 $(document).ready() 。

我不确定我的浏览器(Firefox)或网络框架(Symfony)是否在幕后进行了一些“清理”。

所以我的问题是,如果您想将 jQuery 功能重构为“可重用的小模板”(可以重用以在不同页面中提供相同的功能),那么最好的方法是什么?

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


多个都没有问题$(document).ready()电话,只有几个注意事项:

  • 可读性降低。
  • 范围:在其中声明的函数/变量/对象$(document).ready()在其他人中将不可见。看看这个简单的demo http://jsfiddle.net/vmvhz/.

另请参阅上一个问题:

  • 你可以有多个 $(document).ready(function(){ ... });部分? https://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 页面中多个 $(document).ready() 有何副作用(如果有)? 的相关文章

随机推荐