创建一个 jQuery 插件：关于函数可见性的最佳实践？

Question

我正在创建一个 jQuery 插件。到目前为止它工作正常，但我对我做事的方式有疑问：

jQuery.fn.myMethod = function() {
  return this.each(function(){
    MyScope.doSomething(jQuery(this).attr("id"));
  });
};

var MyScope = {

  // The functions contained in MyScope are extremely linked to the logic 
  // of this plugin and it wouldn't make a lot of sense to extract them

  doSomething: function(id){
    // something
    doSomethingElse(23);
    // some more code
    doSomethingElse(55);
  },

  doSomethingElse: function(someInt){
    // some code 
  }
};

我使用 MyScope 来存储我所有的“私有”函数。我不希望用户能够去$("p").doSomething()，但我确实需要使用它们。

我可以移动 myMethod 函数中的所有内容，但它会创建一个 100 行长的函数，人们会因此而讨厌我。

在这种情况下，最佳做法是什么？有没有关于这个的很棒的教程？

Answer 1

你可以封装你的函数来做你想做的事，像这样：

jQuery.fn.myMethod = function() {
  return this.each(function(){
    doSomething(jQuery(this).attr("id"));
  });        
  function doSomething(id){
    //do something
  }
  function doSomethingElse(){
    // some code
  }
};

You can view a quick demo here

“我可以移动 myMethod 函数中的所有内容，但它会创建一个 100 行长的函数，人们会因此而讨厌我。” ....为什么？

代码必须在某个地方定义，如果您不希望它可从外部访问，有几种方法，但我不明白为什么有人会不喜欢您这样做。这完全取决于范围和您想要的东西，只要您不多次声明它并且只公开您想要的东西，我看不出有任何问题。

声明它有多种样式，有些效果相同，我给出的选项是其中之一，但是将内容放在myMethod 中是一种非常合理的方法。

---

为了更完整，here's another alternative：

(function($) { 
    function doSomething(id){
      //do something, e.g:  doSomethingElse('bob');
    }
    function doSomethingElse(str){
      //some code
    }
    $.fn.myMethod = function() {
      return this.each(function(){
        doSomething(jQuery(this).attr("id"));
      });   
    };
})(jQuery);

或another:

(function($) { 
    var me = {
        doSomething: function(id){
         //do something, e.g:  this.doSomethingElse('bob');
        },
        doSomethingElse: function(str){
          //some code
        }
    };
    $.fn.myMethod = function() {
      return this.each(function(){
        me.doSomething(jQuery(this).attr("id"));
      });   
    };
})(jQuery);

---

相关文章：

• JavaScript Module Pattern: In-Depth
• JavaScript Closures for Dummies

Answer 2

使用大函数来创建新范围并没有错。以下内容保持doSomething 和doSomethingElse 私有，并避免为myMethod 的每次调用定义新的doSomething 和doSomethingElse 函数，如果将doSomething 和doSomethingElse 放入myMethod 中会发生这种情况的定义。

(function() {
  function doSomething(id) {
    // Something
  }

  function doSomethingElse() {
    // Something else
  }

  jQuery.fn.myMethod = function() {
    return this.each(function(){
      doSomething(this.id);
    });
  };
})();

Answer 3

我会将所有内容都放在 jQuery.fn.myMethod 函数中，以避免可能的命名空间冲突，并使代码更简洁。此模式还允许您创建无法从 myMethod 函数外部访问的私有方法。

jQuery.fn.myMethod = function(options) {
  // Set up a "that" object, which can be referenced from anywhere inside this function
  var that = {};

  // If the plugin needs optional arguments, you can define them this way
  if (typeof(options) == 'undefined') options = {};
  that.options.option1 = options.option1 || 'default value 1';
  that.options.option2 = options.option2 || 'default value 2';

  that.init = function() {
    // psuedo-constructor method, called from end of function definition
  }

  that.doSomething = function() {
    // something
  }

  that.doSomethingElse = function() {
    // something else
  } 

  // Call init method once all methods are defined
  that.init();

  // Return the matched elements, to allow method chaining
  return jQuery(this);
}