這個JS對象模式有什麼不對（或對）？

Question

下面是我在javascript對象中使用的模式示例（此示例依賴於jQuery）。 http://pastie.org/private/ryn0m1gnjsxdos9onsyxg

它的工作對我來說相當不錯，但我猜有什麼不對，或者至少次優的這件事，我只是好奇，讓人們的意見。

下面是它的一個小的，內嵌例如：

sample = function(attach) { 
    // set internal reference to self 
    var self = this; 

    // public variable(s) 
    self.iAmPublic = true; 

    // private variable(s) 
    var debug = false; 
    var host = attach; 
    var pane = { 
     element: false, 
     display: false 
    } 

    // public function(s) 
    self.show = function() { 
     if (!pane.display) { 
      position(); 
      $(pane.element).show('fast'); 
      pane.display = true; 
     } 
    } 

    self.hide = function() { 
     if (pane.display) { 
      $(pane.element).hide('fast'); 
      pane.display = false; 
     } 
    } 

    // private function(s) 
    function init() { 
     // do whatever stuff is needed on instantiation of this object 
     // like perhaps positioning a hidden div 
     pane.element = document.createElement('div'); 
     return self; 
    } 

    function position() { 
     var h = { 
      'h': $(host).outerHeight(), 
      'w': $(host).outerWidth(), 
      'pos': $(host).offset() 
     }; 
     var p = { 
      'w': $(pane.element).outerWidth() 
     }; 
     $(pane.element).css({ 
      top: h.pos.top + (h.h-1), 
      left: h.pos.left + ((h.w - p.w)/2) 
     }); 
    } 

    function log() { 
     if (debug) { console.log(arguments); } 
    } 

    // on-instantiation let's set ourselves up 
    return init(); 
} 

我真的很好奇，讓人們對這一想法。

Answer 1

sample = function(attach) { 
    // set internal reference to self 
    var self = this; 

爲什麼不直接使用this？寫Javascript，the one maintaining your code will thank you。

// public variable(s) 
    self.iAmPublic = true; 

    // private variable(s) 
    var debug = false; 
    var host = attach; 
    var pane = { 
     element: false, 
     display: false 
    } 

    // public function(s) 
    self.show = function() { 
     if (!pane.display) { 
      position(); 
      $(pane.element).show('fast'); 
      pane.display = true; 
     } 
    } 

    self.hide = function() { 
     if (pane.display) { 
      $(pane.element).hide('fast'); 
      pane.display = false; 
     } 
    } 

我知道，這是很好的OOP設計，不過說真的，你又增加另一個層間接到普通的JavaScript。你可以用$(e).hide('fast')以及其他你會用e.hide()來隱藏的東西。這種不一致可能會讓你的代碼更加混亂。

// private function(s) 
    function init() { 
     // do whatever stuff is needed on instantiation of this object 
     // like perhaps positioning a hidden div 
     pane.element = document.createElement('div'); 
     return self; 
    } 

Preppend一個_或__之前私有方法和變量，JavaScript沒有私有屬性，所以你必須要依靠慣例，或use closures。

function position() { 
     var h = { 
      'h': $(host).outerHeight(), 
      'w': $(host).outerWidth(), 
      'pos': $(host).offset() 
     }; 
     var p = { 
      'w': $(pane.element).outerWidth() 
     }; 
     $(pane.element).css({ 
      top: h.pos.top + (h.h-1), 
      left: h.pos.left + ((h.w - p.w)/2) 
     }); 
    } 

    function log() { 
     if (debug) { console.log(arguments); } 
    } 

這段代碼有點不理想，因爲函數log（）將從類外調用。我絕對不會把它留在生產代碼上。

// on-instantiation let's set ourselves up 
    return init(); 
}