モジュールパターンを使用していますか？ /デフォルトの出発点ですか？

Question

メッセージの下に私はパターンを使用し、うまく動作します。メッセージ[]のインスタンスは1つしかなく、プライベートです。私はそのオブジェクトをどのように使うのかというと、表示はパブリックです。第二の目的について

- エフェクト

デフォルトの方法、

私はそれ私がオブジェクト指向JavaScriptを書くデフォルトの方法にしたいという理由だけで、このパターンに影響を更新するつもりでした。

これ以外にも考慮すべき点がありますか、これはオブジェクトを作成するための出発点です。 Cにおいて

++はデフォルトの開始点があるかもしれない：

class MyClass 
{ 
private: 
protected: 
public: 
}; 

また、潜在的な非効率

効果単にフェードインまたは要素をフェードアウト。私は、ちらつきを避けるために、タイマーを要素のプロパティにします。これにより、要素ごとに1つの不透明度レベルしか設定できません。

しかし、これは時々、同じ要素で複数のエフェクトインスタンスが実行されていると私は信じています。同じタイマーを共有しているため、まったく同じことをやっているだけです。

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

効果

/** 
*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

ここも一般に公開された内部コンストラクタconstructMessage(element)、プライベート変数$messages、およびプライベート関数internalDisplay(type, effects)でモジュールを実装する1つの方法です。

effectsは、関数display(type, effects)のパラメータであることに注意してください。これにより、ユニットテストが容易になります。Effectsのモックを渡すことができます。

コードは、JavaScriptで名前空間とプライベートメンバーを行う一般的な方法です。ご覧のように、あなたの「クラス」はあなたが選択的に外部に公開する私的な機能を持つことができます。

最後に、モジュールと「クラス」の名前は最適ではありませんが、この単純な例では十分です。

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