HTML 页面中多个 $(document).ready() 有何副作用(如果有)?
我正在使用一个 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 技术交流群。

发布评论
评论(3)
您确实可以根据需要在页面上使用任意多个 $(document).ready()
实例。您可以按照对您的应用程序最有意义的方式对初始化代码块进行分组。不过,您获得的灵活性可能会失去一点清晰度,因为不再那么容易看到 onLoad 触发时会发生什么。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
多个
$(document).ready()
调用没有问题,只有一些注意事项:$(document).ready()
中声明的函数/变量/对象在任何其他中都不可见。请参阅这个简单的演示。另请参阅上一个问题:
There are no problems with multiple
$(document).ready()
calls, only a couple of caveats:$(document).ready()
will not be visible in any others. See this simple demo.Also see this previous question on SO: