Question

我正在使用一个遵循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>

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

我试过这个 - 而且令我惊讶的是，它在合并的最后一页（'主页）中只有一个$（文件）.ready（）。

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

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

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

Answer 1

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

可读性降低。
范围：在一个$(document).ready()内声明的函数/变量/对象在任何其他内容中都不可见。看到这个简单的demo。

另见SO上的上一个问题：

Can you have multiple $(document).ready(function(){ ... }); sections?

Answer 2

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

参考文献：jQuery Tutorial on Multiple $(document).ready()

Answer 3

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

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

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

3 个答案: