2010-04-15 70 views
53

直到現在,我只把我所有的jQuery善良放在$(document).ready()函數中,包括在某些用戶交互中使用的簡單函數。jquery文檔內部或外部的函數準備好

但是,不需要加載DOM文檔或只是事後才調用的函數也可以放在$(document).ready()之外。例如,考慮一個非常簡單的驗證功能,如:

function hexvalidate(color) { 
// Validates 3-digit or 6-digit hex color codes 
var reg = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/; 
return reg.test(color); 
} 

該功能只從$(document).ready()功能雖然中調用。

什麼是最佳實踐(語法,速度);在或裏面放置這樣的功能 jQuery文件就緒功能嗎?

回答

69

把它放在裏面所以它不會污染全局命名空間。由於JavaScript的範圍鏈,它還確保了函數名稱的更快解析。

放在以外如果它是一個可重用的組件,所以你可以很容易地將它在一個單獨的文件中移動並從不同的上下文中調用。

既然你已經使用JQuery,這一點,實在值得一提的是,在你的情況,你可能需要定義hexvalidateJQuery plugin,然後調用它

+1

+1 - 漂亮的編輯。 – karim79 2010-04-15 13:11:01

7

將這些函數放入文檔就緒函數的一個優點是它們不會污染您的全局名稱空間......缺點是如果您需要它們在頁面上的其他位置,則它們將不可用。

4

如果你所有的功能只是從jQuery(function() { })塊中調用,把它們放在裏面。否則,你會不必要地污染全局命名空間,這可能導致衝突。

只聲明其他作用域中代碼也使用的全局函數。

2

如果您創建的函數需要在$(document).ready()函數的範圍之外進行調用,請將其保留在$(document).ready()函數之外。

否則保持它內部。

10

我不認爲你應該使用任何'正義功能'擺在首位。在OOP javascript中,「函數」通常屬於四種不同類型之一:

  • 構造函數或匿名的「init」閉包 - 用於構造對象。函數是一些對象
  • 實用程序的一部分 - - 被允許是全球
  • 方法的功能的唯一類型的構造器/方法的內部函數,從外
  • 恆無形 - 作爲傳遞功能恆定參數

例如

(function() { <- init closure 

     function helper1() { <- utility } 

     globalSomething = { 

       foobar: function() { <- method 
        xyz.replace(/.../, function() { <- constant }) 

       } 
     } 
)() 

在你的榜樣, 'hexvalidate' 顯然是驗證對象,這反過來又可以製成一個jQuery插件的一部分:

(function($) { 
     $.validate = { 
      hexColor: function(color) { ... your code } 
      more validators... 
     } 
    )(jQuery)