1

在下面的消息中，我使用了该模式，它工作正常。message[] 只有一个实例，它是私有的。显示是公开的，因为这就是我使用对象的方式。

关于第二个对象 - 效果

默认方式，

我打算将 Effects 更新为这种模式只是因为我想让它成为我编写面向对象 JavaScript 的默认方式。

是否还有其他/更好的事情需要考虑，或者这是编写对象的一个​​很好的起点。

在 C++ 中，默认起点可能是：

class MyClass
{
private:
protected:
public:
};

此外，潜在的低效率

效果只是淡入或淡出一个元素。我将计时器设为元素的属性以避免闪烁。这样做只允许为每个元素设置一个不透明度级别。

然而，这让我相信有时我有多个效果实例在同一个元素上运行。他们只是碰巧在做同样的事情，因为他们共享同一个计时器。

/**
 *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和私有函数internalDisplay(type, effects)。

请注意，这effects是函数的参数display(type, effects)。这简化了单元测试，因为您可以传入 mock 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 回答