HTML页面中多个$(document).ready()的副作用(如果有)是什么? [英] What are the side effects (if any) of multiple $(document).ready() in an HTML page?
问题描述
我正在使用遵循MVC模式的Web应用程序框架(Symfony 1.3.6).
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.
由于重构，主模板使用的小模板(在我们的示例中为主页")需要包含其与jQuery相关的代码.
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.
让我们说主页模板使用2个子模板":
lets say the homepage template uses 2 'sub templates:
- 模板A
- 模板B
假设模板A由以下代码段组成:
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>
假设模板B由以下代码段组成:
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>
我已经尝试过-令我惊讶的是，它的工作原理是，合并的最终页面(首页")中只有一个$(document).ready().
I have tried this - and to my suprise, it worked in that there was only one $(document).ready() in the merged, final page ('homepage).
我不确定我的浏览器(Firefox)或Web框架(Symfony)是否在后台进行了一些清理".
I am not sure if either my Browser (Firefox) or the web framework (Symfony), had done some 'cleaning up' behind the scenes.
所以我的问题是，如果要将jQuery功能重构为可重用的模板"，以便在不同的页面中重复使用以提供相同的功能，那么最好的方法是什么?
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?
顺便说一句，我希望没人建议写一个jQuery插件，因为那不是我在说的.
BTW, I hope no one suggests writing a jQuery plugin, as that is SO not what I'm talking about.
推荐答案
多个$(document).ready()调用没有问题，只有几个警告:
There are no problems with multiple $(document).ready() calls, only a couple of caveats:
- 可读性降低.
- 作用域:在一个
$(document).ready()内部声明的函数/变量/对象在其他任何情况下均不可见.参见此简单的演示.
- Reduced readability.
- Scope: a function/variable/object declared inside one
$(document).ready()will not be visible in any others. See this simple demo.
也请参见前面关于SO的问题:
Also see this previous question on SO:
这篇关于HTML页面中多个$(document).ready()的副作用(如果有)是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
