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

问题描述

我正在浏览来自主干.js 截屏视频的优秀 peepcode 演示代码.其中，主干代码都包含在一个匿名函数中，该函数传递给 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);

在我自己的主干代码中，我刚刚将所有代码包装在 jQuery DOM 'ready' 事件中:

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?

推荐答案

您展示的两个代码块在执行的时间和原因方面截然不同.它们并不相互排斥.它们的用途不同.

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

此代码的目的是为您的代码提供模块化"、隐私和封装.

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

这个的实现是一个被调用(jQuery)括号立即调用的函数.将 jQuery 传入括号的目的是为全局变量提供局部作用域.这有助于减少查找 $ 变量的开销，并且在某些情况下可以更好地压缩/优化缩小器.

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
});

jQuery 的DOMReady"函数在 DOM 准备好由您的 JavaScript 代码操作时执行.

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

在 jQuery 的 DOMReady 函数内定义 Backbone 代码是一种糟糕的形式，并且可能会损害您的应用程序性能.在 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 函数之外定义 Backbone 对象.在许多其他人中，我更喜欢在 JavaScript 模块模式中执行此操作，以便我可以为我的代码提供封装和隐私.我倾向于使用显示模块"模式(请参阅上面的第一个链接)来提供对模块之外我需要的位的访问.

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 时抢占先机，从而有可能加快用户体验.它还使代码更加灵活，因为您可以移动事物而不必担心在移动事物时创建更多 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 函数，即使您在其他地方定义了 Backbone 对象.原因是许多 Backbone 应用程序需要以某种方式操作 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屋！