JavaScript 命名空间和 jQuery 事件处理程序

Posted 2023-02-22

【中文标题】JavaScript 命名空间和 jQuery 事件处理程序

【英文标题】：JavaScript Namespace & jQuery Event Handler

【发布时间】：2013-06-16 06:15:50

【问题描述】：

我创建了一个 javascript 命名空间以避免与其他 Javascript 代码冲突。

var ns = 
   init: function() 
      $('a').click(this.clickHandler);
   ,
   clickHandler: function() 
      // Some code here ..

      // The keyword "this" does not reference my "ns" object anymore. 
      // Now, it represents the "anchor"
      this.updateUI();
   ,
   updateUI: function() 
      // Some code here ...
   
;

请问，如何引用我的封闭命名空间？

【参考方案1】：

这样做的一个好方法是在引用它的函数中定义一个局部变量。当你改变“这个”时，这会有所帮助。您的代码可能如下所示：

var ns = new (function() 
    var self = this;
    self.init = function() 
        $('a').click(self.clickHandler);
    ,
    self.clickHandler = function() 
        // Some code here ..

        // The keyword "this" does not reference my "ns" object anymore. 
        // Now, it represents the "anchor"
        self.updateUI();
   ,
   self.updateUI = function() 
      // Some code here ...
   
)();

这允许您仍然使用 this 引用事件处理程序，然后使用仅在内部可用的本地定义的引用来引用您的命名空间。

【讨论】：

它可以修复，如下所示jsfiddle.net/JYAXL -- 只需要进行一项更改。问题是'self'会在创建对象时获取上下文值（'this'的值）以分配给'ns'。

你是对的，我的错。我在想一个功能。我更新以修复它。

【参考方案2】：

这是一篇文章：http://www.codeproject.com/Articles/108786/Encapsulation-in-JavaScript

它解释了在命名空间中创建一个闭包，您可以在其中存储东西（如原始的“this”）

var ns = (function () 
    var self;

    return 
        init: function () 
            self = this;
            $('a').click(this.clickHandler);
        ,
        clickHandler: function () 
            // Some code here ..
            self.updateUI();
        ,
        updateUI: function () 
            // Some code here ...
        
    ;
)();

FIDDLE HERE

【参考方案3】：

您可以将事件处理程序绑定到匿名函数并在其中调用 clickHandler。这样上下文仍然会引用 ns 对象。

var ns = 
   init: function() 
      var self = this; // store context in closure chain
      $('a').click(function () 
         self.clickHandler();
      );
   ,
   clickHandler: function() 
      this.updateUI();
   ,
   updateUI: function() 
      // Some code here ...
   
;

【讨论】：

'this' 如何在 clickHandler 函数中获取正确的值？

@LeeMeador，上下文指向 dom 对象的事件处理程序中的 dom 对象。在我们的匿名事件处理程序中，上下文指向 dom 元素，我们使用闭包变量来获取原始上下文。最后，当 clickHandler 调用时，它将具有正确的上下文，因为它是由 ns 对象调用的。

我明白了。仍在弄清楚“this”/上下文是如何设置的。我在这里尝试过，以防其他人想看到它。 jsfiddle.net/LMaBq

【参考方案4】：

$.proxy

$('a').click($.proxy(this.clickHandler, this));