從模塊內執行DOM準備好的JQuery函數？

Question

我有一些實驗輸入檢查的Javascript：

$(function(){ 
    var check_stuff = function(elem){ 
    //...code to check stuff 
    }; 

    // grab every input element with a checkable class 
    $('input.checkable').each(function(i) { 
    $(this).click(function(){ 
     if check_stuff(elem) { 
     $(this).submit(); // submit if passes checks 
     } 
    }; 
    }); 
}); 

其中一期工程。但是，我擔心這會污染全球空間。因此，如果'jquery_stuff'函數是在jQuery中的某個地方定義的，或者由另一個共享$的模塊定義的，我實際上已經重寫了它。那是對的嗎？

如果我刪除第一行$：

(function(){ 

那麼相信我創建一個標準的JavaScript匿名函數，從而有效隔離check_stuff。但是：

$(this).click(function(){ 

...不再在DOM準備好的時候執行（因爲它一經執行就執行）。我試過用jQuery（document）.ready來包裝它以達到無效的效果。

什麼是創建模塊的正確方法，該模塊執行準備好的代碼塊？

Answer 1

您可以將代碼包裝在self-executing anonymous function中。此代碼將運行，並且此函數中包含的所有變量僅存在於該函數的本地範圍內。函數定義後的()將立即執行該函數。

格式：

(function(){ 

})(); 

廣場，在DOM準備&你會好到哪裏去。

$(function(){ 

    (function(){ 
     //your code for the module 
    })(); 

}); 

例子：http://jsfiddle.net/VZ2ay/2/

Answer 2

$(func)是jQuery(document).ready(func)的簡稱。如果您省略了jQuery構造函數$，則會創建一個普通函數。要調用該函數，該函數後加括號，來調用它：

(function(){ 
    .... 
})(); //Parentheses to invoke the function 

//Another option 
(function(){...}()) 

//Illegal method (error): 
function(){...}() 

Answer 3

我不知道這是「正確的方式」，但爲什麼不這樣做：

(function($){ 
    // ... 
    $(function(){ 
     // code that you want to run when the dom finishes loading 
    }); 
    // ... 
}(jQuery)); 

---

（具體說明）編輯： 這樣做是它在jQuery的傳遞作爲參數，這樣就可以繼續使用$封閉內引用jQuery的像你使用JS創建了一個閉合。在閉包中，你可以創建你的模塊需要的變量。這些將不能在閉包之外訪問，所以你不會污染全局名稱空間。

這裏是你習慣的jQuery ready函數。這裏是你在dom完成加載之後調用你想要運行的代碼的地方。

更新：查看http://jsfiddle.net/D6Hax/以查看此功能。

Answer 4

[審查意見後更新]

我仍然不認爲你用污染的原代碼的全局命名空間。

var foo = "I am outside!"; 
var bar = "I am outside!"; 

$(function() { 
    var foo = "I am in jQuery!"; 
    bar = "I am in jQuery!"; 
}); 

setTimeout(function() { 
    alert('foo says: '+foo); 
    alert('bar says: '+bar); 
}, 5000); 

foo和bar位於全局命名空間中。在文檔就緒函數中，在foo之前添加'var'將其標記爲局部變量。這被證明是真實的，因爲'foo'的全球版本沒有得到更新。通過省略bar上的'var'，我們隱式地使用全局名稱空間，所以現有變量IS被更新。

Answer 5

我可能是充滿了它的這個答案，但這樣的事情應該工作：

$(function(){ 
    (function(){ 
    var check_stuff = function(elem){ 
    //...code to check stuff 
    }; 

    // grab every input element with a checkable class 
    $('input.checkable').each(function(i) { 
    $(this).click(function(){ 
     if check_stuff(elem) { 
     $(this).submit(); // submit if passes checks 
     } 
    }; 
    }); 
) 
}); 

你還在創建將在DOM ready事件後運行一個匿名函數。

Answer 6

這個鏈接看看http://www.yuiblog.com/blog/2007/06/12/module-pattern/

myModule = (function(){ 
    //functions/variables here does not pollute global namespace 
})(); 

你可以打電話Mymodule中對文檔準備初始化函數例如