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

Question

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

mor*_*ous 10 jquery document-ready

我正在使用一个遵循MVC模式的Web应用程序框架(Symfony 1.3.6).

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

假设有一个页面(让我们称之为'主页'),它由几个模板组成 - (代码已经重构,因此'子模板'可以在其他页面上使用.

作为重构的结果,主模板使用的小模板(在我们的示例中为"主页")需要包含与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>

Run Code Online (Sandbox Code Playgroud)

假设模板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>

Run Code Online (Sandbox Code Playgroud)

现在模板'主页'看起来像这样:

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

Run Code Online (Sandbox Code Playgroud)

我试过这个 - 并且令我惊讶的是,它在合并的最终页面('主页)中只有一个$(文档).ready().

我不确定我的浏览器(Firefox)或Web框架(Symfony)是否在幕后做了一些'清理'.

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

顺便说一下,我希望没有人建议写一个jQuery插件,因为那不是我所说的.