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

发布于 09-15 01:09 字数 1463 浏览 7 评论 0原文

我正在使用一个 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 插件,因为这不是我所说的。

I am using a web application framework (Symfony 1.3.6), which follows the MVC pattern.

The view layer is comprised of a template decorator. The template file may also include other templates - this is what gives rise to my question.

Assuming that there is a page (lets call it the 'homepage'), which is comprised of several templates - (the code has been refactored out so the 'sub templates' can be used on other pages.

As a result of the refactoring, the small templates - which are used by the main template - ('homepage' in our example), need to contain their jQuery related code.

lets say the homepage template uses 2 'sub templates:

  • template A
  • template B

assume that template A consists of the following snippet:

<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field1').click(function(){
      alert('Field 1 clicked!');
   });
</div>
</script>

assume that template B consists of the following snippet:

<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field2').click(function(){
      alert('Field 2 clicked!');
   });
</div>
</script>

Now the template 'homepage' looks like this:

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

I have tried this - and to my suprise, it worked in that there was only one $(document).ready() in the merged, final page ('homepage).

I am not sure if either my Browser (Firefox) or the web framework (Symfony), had done some 'cleaning up' behind the scenes.

So my question is that what is the best way to proceed if you want to refactor jQuery functionality into 'little reusable templates' that can be reused to provide the same functionality in different pages?

BTW, I hope no one suggests writing a jQuery plugin, as that is SO not what I'm talking about.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

明天过后2024-09-22 01:09:47

多个 $(document).ready() 调用没有问题,只有一些注意事项:

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

另请参阅上一个问题:

There are no problems with multiple $(document).ready() calls, only a couple of caveats:

  • Reduced readability.
  • Scope: a function/variable/object declared inside one $(document).ready() will not be visible in any others. See this simple demo.

Also see this previous question on SO:

倾听心声的旋律2024-09-22 01:09:47

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

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

You can indeed use as many instances of $(document).ready() on a page as you like. You can group your blocks of initialization code in whichever way makes the most sense for your application. What you gain in flexibility you may lose a bit in clarity, though, since it's no longer as easy to see what happens when onLoad fires.

References: jQuery Tutorial on Multiple $(document).ready()

两个我2024-09-22 01:09:47

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

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

If you want to reuse js code snippets on different pages, you can use the view.yml config file in each of your modules like this:

firstActionSuccess:
  javascripts: [js1.js, js2.js]
secondActionError:
  javascripts: [js1.js, js3.js]
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文