为什么要定义一个匿名函数，并将它传递的jQuery作为参数？ [英] Why define an anonymous function and pass it jQuery as the argument?

问题描述

我期待通过优良的窥视code演示$ C $从Backbone.js的截屏℃。在这里面，骨干code是所有封闭在传递jQuery对象的匿名函数：

I'm looking through the excellent peepcode demo code from the backbone.js screencasts. In it, the backbone code is all enclosed in an anonymous function that is passed the jQuery object:

(function($) {
  // Backbone code in here
})(jQuery);

在我自己的骨干code，我刚刚结束我的所有code在jQuery的DOM'准备好'事件：

In my own backbone code, I've just wrapped all my code in the jQuery DOM 'ready' event:

$(function(){
  // Backbone code in here
});

什么是第一种方法的点/优势？这样做可以创建一个匿名函数，然后与jQuery对象传递作为函数参数，有效地确保$是jQuery对象立即执行。这是唯一的点 - 保证jQuery是必然会$，还是有其他原因，要做到这一点

What's the point/advantage of the first approach? Doing it this way creates an anonymous function that is then executed immediately with the jQuery object being passed as the function argument, effectively ensuring that $ is the jQuery object. Is this the only point - to guarantee that jQuery is bound to '$' or are there other reasons to do this?

推荐答案

$ C $的两个街区c您已经表明在何时以及为什么他们执行显着不同。它们不互相排斥的。他们没有达到同样的目的。

The two blocks of code you have shown are dramatically different in when and why they execute. They are not exclusive of each other. They do not serve the same purpose.

(function($) {
  // Backbone code in here
})(jQuery);

这是一个的JavaScript模块的模式，与调用立即执行功能。

This is a "JavaScript Module" pattern, implemented with an immediately invoking function.

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript


• http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

这code的作用是提供您code模块化，隐私和封装。

The purpose of this code is to provide "modularity", privacy and encapsulation for your code.

这样做的实现是立即调用（jQuery的）括号调用的函数。传递的jQuery到括号的目的是提供本地作用域到全局变量。这有助于减少仰视 $ 变量的开销数量，并允许更好地融为一体pression /优化在某些情况下minifiers。

The implementation of this is a function that is immediately invoked by the calling (jQuery) parenthesis. The purpose of passing jQuery in to the parenthesis is to provide local scoping to the global variable. This helps reduce the amount of overhead of looking up the $ variable, and allows better compression / optimization for minifiers in some cases.

立即调用函数的执行，好了，马上。只要函数定义完成，则执行该功能。

Immediately invoking functions are executed, well, immediately. As soon as the function definition is complete, the function is executed.

这是一个别名jQuery的domready中功能： http://api.jquery.com/ready/

This is an alias to jQuery's "DOMReady" function: http://api.jquery.com/ready/

$(function(){
  // Backbone code in here
});

在DOM准备好你的JavaScript code被操纵jQuery的domready中功能执行。

jQuery's "DOMReady" function executes when the DOM is ready to be manipulated by your JavaScript code.

这是不好的形式来定义jQuery的domready中函数内的骨干code，并有可能损害你的应用程序的性能。此功能不会被调用，直到DOM加载并准备进行操作。这意味着你等待，直到在浏览器解析了DOM至少一次您要定义对象之前。

It's bad form to define your Backbone code inside of jQuery's DOMReady function, and potentially damaging to your application performance. This function does not get called until the DOM has loaded and is ready to be manipulated. That means you're waiting until the browser has parsed the DOM at least once before you are defining your objects.

这是一个更好的主意来定义domready中的功能以外的骨干对象。我，等等，preFER做这一个JavaScript模块模式里面，这样我可以为我的code提供的封装和隐私。我倾向于使用泄露模块模式（参见上面的第一个链接）提供访问，我需要我的模块之外的位。

It's a better idea to define your Backbone objects outside of a DOMReady function. I, among many others, prefer to do this inside of a JavaScript Module pattern so that I can provide encapsulation and privacy for my code. I tend to use the "Revealing Module" pattern (see the first link above) to provide access to the bits that I need outside of my module.

通过定义对象domready中的功能之外，并提供一些方法来引用它们，你让浏览器获得头处理你的JavaScript开始，可能加快了用户体验。这也使得code更加灵活，因为你可以不必担心当你搬东西创造更多domready中的功能走动的东西。

By defining your objects outside of the DOMReady function, and providing some way to reference them, you are allowing the browser to get a head start on processing your JavaScript, potentially speeding up the user experience. It also makes the code more flexible as you can move things around without having to worry about creating more DOMREady functions when you do move things.

你可能要使用一个domready中的功能，不过，即使你定义你的主干对象别处。的原因是，许多骨干应用需要操纵以某种方式在DOM。要做到这一点，你需要等到DOM准备好，因此，你需要使用domready中的功能已被定义后，启动应用程序。

You're likely going to use a DOMReady function, still, even if you define your Backbone objects somewhere else. The reason is that many Backbone apps need to manipulate the DOM in some manner. To do this, you need to wait until the DOM is ready, therefore you need to use the DOMReady function to start your application after it has been defined.

您可以找到大量的网络上这样的例子，但这里是一个非常基本的实现，同时使用一个模块和domready中的功能：

You can find plenty of examples of this around the web, but here's a very basic implementation, using both a Module and the DOMReady function:

// Define "MyApp" as a revealing module

MyApp = (function(Backbone, $){

  var View = Backbone.View.extend({
    // do stuff here  
  });

  return {
    init: function(){
      var view = new View();
      $("#some-div").html(view.render().el);
    }
  };

})(Backbone, jQuery);



// Run "MyApp" in DOMReady

$(function(){
  MyApp.init();
});

这篇关于为什么要定义一个匿名函数，并将它传递的jQuery作为参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！