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

Answer 2

使用大型函数创建新范围没有任何问题。以下内容使doSomething和doSomethingElse保持私有状态，并避免为doSomething的每次调用定义新的doSomethingElse和myMethod函数，如果您放置{{在doSomething的定义中{1}}和doSomethingElse。

myMethod

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

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

3 个答案: