Javascript 使用模块模式？/默认起点？

在下面的消息中，我使用了该模式，效果很好。消息[]只有一个实例，它是私有的。显示是公共的，因为这是我使用对象的方式

关于第二个对象-效果

默认方式，

我打算更新这个模式的效果，只是因为我想让它成为我编写面向对象JavaScript的默认方式

是否有其他/更好的事情需要考虑，或者这是编写对象的良好起点

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

class MyClass
{
private:
protected:
public:
};

还有一个潜在的低效率问题

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

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

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

/**
*信息
*元素-保存要通过.innerHTML将消息发送到的元素
*类型-确定要发送的消息
*/
var Message=（函数（）
{
变量消息=
{
名称：'请输入有效名称'，
电子邮件：“请输入有效的电子邮件”，
电子邮件：“请输入有效的电子邮件。”，
密码：“请输入密码，6-40个字符”，
url:'请输入有效的url'，
标题：“请输入有效的标题”，
tweet:“请输入有效的tweet”，
空：“请填写所有字段”，
相同：“请使电子邮件平等”，
take:'抱歉，该电子邮件已被接收'，
验证：“请联系以重置密码”，
};
var消息=函数（元素）
{
this.element=元素；
};
Message.prototype.display=功能（类型）
{
this.element.innerHTML=消息[类型]；
新效果（）；
};
返回消息；
}());

效果

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

/**
*效果-根据需要构建
*元素-使元素保持淡入淡出状态
*方向-确定淡入元素的方式
*最大时间-渐变的长度
*/
变量效应=函数（）
{
this.fade=功能（元素、方向、最大时间）
{
element.appeased=0；
clearTimeout（element.timeout\u id）；
函数next（）
{
元素+=10；
如果（方向==“向上”）
{
element.style.opacity=element.appeased/max_time；
}
否则，如果（方向==‘向下’）
{
element.style.opacity=（max_time-element.appeased）/max_time；
}
if（element.appead这里有一种方法来实现一个模块，该模块具有内部构造函数
constructMessage（element）
，该构造函数也公开，私有变量
$messages
，以及私有函数
内部显示（类型、效果）

请注意，
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
    };
})();
下面是一种实现模块的方法，该模块具有内部构造函数
constructMessage（元素）
，该构造函数也公开，私有变量
$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
    };
})();