Javascript 创建jQuery插件：关于函数的最佳实践；能见度？

我正在创建一个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行长的函数，人们会因此讨厌我

---

在这种情况下，最佳做法是什么？关于这方面有什么好的教程吗？

你可以封装你的函数来做你想做的事情，如下所示：

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

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

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

声明它有几种风格，有些具有相同的效果，我给出的选项是其中之一，但将内容放在

myMethod

中是一种完全合理的方法

---

更完整地说：

或：

---

相关文章：

---

我会将所有内容都放在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);
}

---

仅仅为了创建一个新的作用域而使用一个大函数并没有什么错。以下内容使

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

---

@尼克：只有一个巨大的函数和零代码重用是相当糟糕的。特别是因为我在doSomething（）中的3或4个不同位置调用了doSomethingElse（）。@margg:你的示例没有显示…如果是这样的话，你应该提供更多关于你的用法的线索，即使暗示这些将用于多个插件也是一个开始。@margg:这将有助于得到更好的答案：）…一个插件方法是标准，多个方法都不是，所以如果没有其他提示，人们会认为你所做的符合大多数情况。这很容易检查<代码>var f=function（）{function g（）{}；返回g；}；变量g1=f（），g2=f（）；警报（g1==g2）如果尼克是对的，你会期望

正确

，如果我是对的，你会期望

错误

。猜猜它是哪一个：）@Tim Down：如果你把它放在闭包之外，那么当然每次都需要一个副本来暴露它，我不确定这是一个有效的测试。要清楚，不是说你错了，只是说测试不是确定它的有效方法。这很有趣，你知道这是否是一种常见的做法吗？那有什么意义？你可以使用局部变量而不是带有属性的对象。我想是的，至少在我和同事中是这样。我见过很多jQuery插件也是以这种方式编写的，或者至少是这种方式的一些变体。“that”对象的目的是避免可能的命名空间冲突。例如，如果我刚刚调用了我的方法init（）、doSomething（）和doSomethingElse（），我可能会意外地以相同的名称调用全局函数。虽然这不太可能，但还是少了一件需要担心的事情。此外，您还可以将“that”对象传递给回调方法，使它们能够访问当前作用域。@harold1983:有任何示例吗？抱歉，我不确定您在这里要做什么。你能举例说明如何使用它吗？关键是

doSomething

和

doSomethingElse

只能在封闭函数内部访问，不能在外部访问。示例是调用

doSomething（this.id）

在

jQuery.fn.myMethod

的定义中。保持

doSomething

和

doSomethingElse

函数不被其他代码访问是我认为您想要的，也是这一点的实现。我是不是误解了这个问题？@tim:太酷了，谢谢！我对这个（函数（）{}）（）不是很熟悉；syntax，有关于这将做什么的文档吗？@margg：无意冒犯，这是一个很好的闭包学习参考。margg：它通常被称为模块模式。如果你在谷歌上搜索，有很多参考资料。这一个看起来很合理：需要注意的是，整个jQuery库都在一个函数中，这是一个完全合法的作用域方法，当您需要闭包时，请使用闭包：）

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

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

  function doSomethingElse() {
    // Something else
  }

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