jQuery插件共享函数和变量

时间:2012-10-03 18:30:43

标签: jquery plugins

我正在研究一个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是一个选项,但如果你有大量的变量和函数需要通过插件中的多个方法访问,这似乎会变成一个巨大的混乱。

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

1 个答案:

答案 0 :(得分:1)

Javascript中(可以说)更常见的陷阱之一是{ }没有将范围定义为其他C风格的语言;功能呢。

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

在公共函数

中声明函数

这就是你在上面展示的内容。您在另一个函数(定义范围)中声明了两个函数。在容器函数的子级别中声明的任何内容都可以在其范围内的任何位置获得,包括两个内部函数的范围。

// 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()看起来似乎是可行的,但是虽然它肯定有其用途,但我不知道如何能够通过提供您描述的功能来增加额外开销,因为它可以轻松地(并且本地地)通过简单的语言机制(尽管可读性需要一些时间来适应)。