Question

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

关于第二个对象 - 效果

默认方式

我打算将效果更新到这个模式只是因为我想让它成为我编写面向对象的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();
    }
};

Answer 1

以下是实现具有内部构造函数constructMessage(element)的模块的一种方法，该模块也公开公开，私有变量$messages和私有函数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
    };
})();

使用模块模式？ /一个默认的起点？

1 个答案: