Verwenden des Modulmusters?/Ein Standardstartpunkt?

Question

Unten in Nachricht verwende ich das Muster und es funktioniert gut. Es gibt nur eine Instanz von Nachricht [] und sie ist privat. Die Anzeige ist öffentlich, so benutze ich das Objekt.

das zweite Objekt Bezug - Effekte

Eine Standardmethode,

Ich wollte Effekte auf dieses Muster einfach aktualisieren, weil ich es den Standard-Weg machen wollen, ich Object Oriented JavaScript schreiben.

Gibt es andere/bessere Dinge zu berücksichtigen oder ist dies ein guter Ausgangspunkt für das Schreiben von Objekten.

In C++ ein Ausgangspunkt Standard könnte sein: ein Element

class MyClass 
{ 
private: 
protected: 
public: 
}; 

Auch kann eine potentielle Ineffizienz

Effekte einfach in verblaßt oder ausblendet. Ich mache den Timer zu einer Elementeigenschaft, um Flimmern zu vermeiden. Dadurch kann nur ein Deckkraftgrad pro Element festgelegt werden.

Dies führt jedoch zu der Annahme, dass ich manchmal mehrere Effekte Instanzen auf dem gleichen Element ausgeführt habe. Sie tun genau das Gleiche, weil sie den gleichen Timer haben.

/** 
*Message 
* element - holds the element to send the message to via .innerHTML 
* type - determines the message to send 
*/ 

var Message = (function() 
{ 
    var messages = 
    { 
     name:   'Please enter a valid name', 
     email:  'Please enter a valid email', 
     email_s:  'Please enter a valid email.', 
     pass:   'Please enter passoword, 6-40 characters', 
     url:   'Please enter a valid url', 
     title:  'Please enter a valid title', 
     tweet:  'Please enter a valid tweet', 
     empty:  'Please complete all fields', 
     same:   'Please make emails equal', 
     taken:  'Sorry, that email is taken', 
     validate:  'Please contact <a class="d" href="mailto:me@host.com">support</a> to reset your password', 
    }; 
    var Message = function (element) 
    { 
     this.element = element; 
    }; 
    Message.prototype.display = function(type) 
    { 
     this.element.innerHTML = messages[ type ]; 
     new Effects().fade(this.element, 'down', 4000); 
    }; 
    return Message; 
}()); 

Effekte

/** 
*Effects - build out as needed 
* element - holds the element to fade 
* direction - determines which way to fade the element 
* max_time - length of the fade 
*/ 

var Effects = function() 
{ 
    this.fade = function(element, direction, max_time) 
    { 
     element.elapsed = 0; 
     clearTimeout(element.timeout_id); 
     function next() 
     { 
      element.elapsed += 10; 
      if (direction === 'up') 
      { 
       element.style.opacity = element.elapsed/max_time; 
      } 
      else if (direction === 'down') 
      { 
       element.style.opacity = (max_time - element.elapsed)/max_time; 
      } 
      if (element.elapsed <= max_time) 
      { 
       element.timeout_id = setTimeout(next, 10); 
      } 
     } 
    next(); 
    } 
}; 

Answer 1

Hier ist ein Weg, ein Modul mit einem internen Konstruktor zu implementieren constructMessage(element), das auch öffentlich ausgesetzt ist, private Variable $messages und die private Funktion internalDisplay(type, effects).

Beachten Sie, dass effects ein Parameter für die Funktion display(type, effects) ist. Dies erleichtert das Testen von Einheiten, da Sie dann eine Kopie Effects übergeben können.

Der Code ist eine gängige Methode, um Namespaces und private Member in JavaScript auszuführen. Wie Sie sehen können, kann Ihre "Klasse" private Funktionen haben, die Sie selektiv nach außen freigeben.

Schließlich sind die Modul- und "Klassen" -Namen nicht die besten, aber sie sind gut genug für dieses einfache Beispiel.

var MessageModule = MessageModule || (function() { 

    function constructMessage(element) { 

     var messages = { 
      name:   'Please enter a valid name', 
      email:  'Please enter a valid email', 
      email_s:  'Please enter a valid email.', 
      pass:   'Please enter passoword, 6-40 characters', 
      url:   'Please enter a valid url', 
      title:  'Please enter a valid title', 
      tweet:  'Please enter a valid tweet', 
      empty:  'Please complete all fields', 
      same:   'Please make emails equal', 
      taken:  'Sorry, that email is taken', 
      validate:  'Please contact support to reset your password' 
     }; 

     function internalDisplay(type, effects) { 
      element.innerHTML = messages[type]; 
      effects.fade(element, "down", 4000); 
     } 

     return { 
      display: internalDisplay 
     }; 
    } 

    return { 
     Message: constructMessage 
    }; 
})();