从模块内执行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中对文档准备初始化函数例如