JavaScript命名空間和jQuery事件處理程序

我創建了一個Javascript命名空間以避免與其他Javascript代碼衝突。JavaScript命名空間和jQuery事件處理程序

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

請問我該如何引用我的封閉名稱空間？

來源

2013-06-19 Ammar

$.proxy

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

來源

2013-06-19 16:04:47 Musa

謝謝你這麼創建一個封閉太多了！ – Ammar

您可以事件處理程序綁定到一個匿名函數，並調用其內部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 ... 
    } 
};

來源

2013-06-19 16:06:43 halilb

'this'如何在clickHandler函數中獲得正確的值？ –

@LeeMeador，上下文指向dom對象的事件處理程序中的dom對象。在我們的匿名事件處理程序中，上下文指向dom元素，我們使用閉包變量來獲取原始上下文。最後，當clickHandler調用時，它將具有正確的上下文，因爲它由ns對象調用。 – halilb

我明白了。還在搞清楚'this'/ context是如何設置的。我在這裏試過，以防其他人想看到它。 http://jsfiddle.net/LMaBq/ –

一個好方法是在引用它的函數中定義一個局部變量。這有助於「此」在您身上發生變化。你的代碼可能是這個樣子：

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

這使您可以仍引用事件處理程序這一點，然後用本地定義的引用，只能從內引用您的命名空間。

來源

2013-06-19 16:15:31 duckbrain

這根本行不通。 – Pointy

以這種方式上下文將指向點擊dom元素。 – halilb

它可以像這裏顯示的那樣修復http://jsfiddle.net/JYAXL/ - 只需要一個更改。問題在於，'self'會在創建對象時被賦予'ns'的時候獲取上下文值（'this'的值）。 –

這裏是一個文章：http://www.codeproject.com/Articles/108786/Encapsulation-in-JavaScript

它說明了在那裏你可以存儲的東西（像原來的「本」）的命名空間

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

來源

2013-06-19 16:18:47

JavaScript命名空間和jQuery事件處理程序

回答

相關問題