1

以下のメッセージでは、パターンを使用していますが、正常に機能します。message []のインスタンスは1つだけで、プライベートです。私がオブジェクトを使用する方法であるため、表示は公開されています。

2番目のオブジェクトについて-効果

デフォルトの方法、

オブジェクト指向JavaScriptを作成するデフォルトの方法にしたいという理由だけで、Effectsをこのパターンに更新しようとしていました。

考慮すべき他の/より良いものがありますか、またはこれはオブジェクトを書くための良い出発点ですか？

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

1 に答える 1

1

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

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
    };
})();
于 2012-04-18T22:42:07.843 に答える