HTML頁面中多個$（document）.ready（）有什麼副作用（如果有的話）？

我正在使用一個遵循MVC模式的Web應用程序框架（Symfony 1.3.6）。

視圖層由模板裝飾的。該模板文件也可能包含其他模板 - 這是什麼引起我的問題。

假設有一個頁面（讓稱它爲「主頁」），這是由幾個模板 - （代碼已經重構了這樣的「子模板」可以在其他頁面中使用

。

作爲重構的結果，主模板使用的小模板（在我們的例子中爲'homepage'）需要包含jQuery相關代碼。

可以說主頁模板使用2'sub模板：

template A
B模版

假設該模板包含以下代碼段：

<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插件，因爲這是SO不是我說的。

來源

2010-08-21 morpheous

你的意思是你有一個合併後的函數調用或只有一個字段有其click事件？如果你想確定有關Firefox的清潔，請嘗試wget，你的頁面不會被修改。 – greg0ire 2010-08-21 16:24:51

有沒有多個$(document).ready()調用的問題，只有幾個注意事項：

降低可讀性。
範圍：在一個$(document).ready()內部聲明的函數/變量/對象在任何其他視圖中都不可見。看到這個簡單的demo。

也可參閱所以這先前的問題：

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

來源

2010-08-21 16:29:17 karim79

+1，關於範圍的好處。 – 2010-08-21 16:31:08

jsut現在發現了關於jsfiddle。謝謝=） – Galen 2010-08-21 20:45:30

只要你喜歡你可以用確實的$(document).ready()的多個實例的網頁上。您可以按照最適合您的應用程序的方式將您的初始化代碼塊分組。但是，您獲得的靈活性可能會失去一點清晰度，因爲在onLoad發生火災時發生的情況不再那麼容易。

參考文獻：jQuery Tutorial on Multiple $(document).ready()

來源

2010-08-21 16:25:09

+1。這正是我需要看到的。 – morpheous 2010-08-21 16:28:16

-1

如果你想重用在不同頁面上的JS代碼片段，您可以使用每個模塊的view.yml配置文件是這樣的：

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

來源

2010-08-21 16:27:16 greg0ire

HTML頁面中多個$（document）.ready（）有什麼副作用（如果有的話）？

回答

相關問題