jQuery 插件共享函数和变量

Question

我正在开发一个 jQuery 插件，对于在同一命名空间内的方法之间共享函数和变量有点困惑。我知道以下方法会起作用:

    (function($){

    var k = 0;
    var sharedFunction = function(){
                //...
                }

    var methods = {

    init : function() { 
      return this.each(function() {
          sharedFunction();
        });
    },

     method2 : function() { 
      return this.each(function() {
          sharedFunction();
        });
    }
  };

$.fn.myPlugin = function(method) {
    // Method calling logic
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || ! method){
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' +  method + ' does not exist here');
    }    
  };

})(jQuery);

但是，我想知道是否有更好的方法来做到这一点。虽然我知道变量“k”和函数“sharedFunction”在技术上不是全局的(因为它们不能直接在插件外部访问)，但这看起来充其量是不复杂的。

我知道 $.data 是一个选项，但是如果您有大量的变量和函数需要通过插件中的多种方法访问，这看起来可能会变得非常困惑。

任何见解将不胜感激。谢谢!

Answer 1

Javascript 中(可以说)更常见的陷阱之一是 { } 没有像其他 C 风格语言那样定义作用域；函数可以。

考虑到这一点，除了使变量成为全局变量之外，还有两种方法(我通常使用)在两个单独的函数之间共享变量:

在公共(public)函数内声明函数

这就是您在上面演示的内容。您在另一个函数(定义范围)内声明两个函数。在容器函数的子级中声明的任何内容都可以在其作用域中的任何位置使用，包括两个内部函数的作用域。

// this is a self-calling function
(function () {

    var foo;

    var f1 = function () {
        // foo will be accessible here
    },

    f2 = function () {
        // ... and foo is accessible here as well
    }

})();

老实说，这根本不“简单”，并且通常是为了代替无法在 Javascript 中定义函数作用域以外的作用域而完成的。

命名空间通用成员

您可以在全局范围内定义一个对象，然后只需使用变量/函数扩展它。您确实必须走向全局，但您可以通过确保只做一次来最大限度地减少您的足迹。

window.app = {
    foo : 'bar'
};

(function () {

    var f1 = function () {
        // app.foo will be accessible here
    };

})();

(function () {

    var f2 = function () {
        // ... and here as well, even though we're 
        // in a totally different (parent) scope
    };

})();

使用 $().data() 似乎可行，但虽然它确实有其用途，但我不建议在可能的情况下增加额外的开销来提供您所描述的功能通过简单的语言机制可以轻松(并且原生地)实现(尽管可读性需要一些时间来适应)。