10

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

我已经尝试过了——令我惊讶的是，它的工作原理是在合并的最后一页（'主页）中只有一个 $(document).ready()。

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

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

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

4

3 回答 3

13

多次调用没有问题$(document).ready()，只有几个警告：

  • 降低可读性。
  • 范围：在其中声明的函数/变量/对象$(document).ready()在任何其他人中都不可见。请参阅这个简单的演示。

另请参阅关于 SO 的上一个问题：

于 2010-08-21T16:29:17.500 回答
5

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

参考：关于多个 $(document).ready() 的 jQuery 教程

于 2010-08-21T16:25:09.977 回答
-1

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

firstActionSuccess:
  javascripts: [js1.js, js2.js]
secondActionError:
  javascripts: [js1.js, js3.js]
于 2010-08-21T16:27:16.460 回答