在JavaScript对象或外部有事件会更好吗？

在JavaScript对象或外部有事件会更好吗？在JavaScript对象或外部有事件会更好吗？

例如下面是一些简单的代码来产生在页面底部弹出一个工具栏（我使用jQuery在这里）：

tool_bar = {  
    show : function() { 
    $('#bottomBox') 
     .show() 
     .animate({ 'bottom' : '0' }, 700) 
    ; 
    }, 
    close : function() { 
    $('#bottomBox').hide();  
    } 
}; 

$(function() { 
    $('#bottomBox span').click(function() { 
    tool_bar.hide(); 
    }); 
}); 

window.onload = function() { 
    tool_bar.show(); 
};

在上面我有tool_bar外的事情目的。这是更好还是这个：

tool_bar = {  
    show : function() { 
    window.onload = function() { 
     $('#bottomBox') 
     .show() 
     .animate({ 'bottom' : '0' }, 700) 
     ; 
    }; 
    }, 
    close : function() { 
    $('#bottomBox span').click(function() { 
     $('#bottomBox').hide();  
    }); 
    } 
}; 

$(function() { 
    tool_bar.close(); 
}); 

tool_bar.show();

应该提到，两者都有效。我只是想知道什么是更好的做法。

来源

2011-10-26 TK123

我建议封装是一个有价值的目标。这意味着你封装了该对象内的一个对象的行为。外部世界应该能够控制安装或移除对象，并且能够控制客户端可能想要的任何其他行为，但是在对象“内部”的行为应该完全在对象内部实现（至少对于默认行为）。

在您的具体情况，我想你应该让外部代理安装工具栏或删除工具栏，但一旦安装该工具栏的操作应该由工具栏本身来处理。

我建议像这样凭借这些优势的实现：

所有的行为都被封装在对象中
因为ID在传递给构造，就可以有一个以上的
对象负责管理它自己的事件处理程序，外部世界不必知道这一点。
它有show()和hide()外部可用的方法。
您可以轻松添加其他行为。

你会实现这样的工具栏：

var bottomToolbar = new tool_bar("bottomBox", true);

而且，这里是该对象的代码：

// id is a required argument 
// show is an optional argument (true means to show it as soon as possible) 
var tool_bar = function(id, show) { 
    this.id = '#' + id; 

    this.show = function() { 
     $(this.id).show().animate({ 'bottom' : '0' }, 700); 
    }; 

    this.hide = function() { 
     $(this.id).hide(); 
    }; 

    // .ready() code will either be fired immediately if document already ready 
    // or later when document is ready, so the code can be used either way 
    $(document).ready(function() { 
     if (show) { 
      this.show(); 
     } 
     $(this.id + " span").click(function() { 
      this.hide(); 
     }); 
    }); 
}

来源

2011-10-26 23:05:08 jfriend00

我只想做：

$(function() { 

    var bottom = $('#bottomBox') 
    .show() 
    .animate({ 
     'bottom': '0' 
    }, 700); 

    $('span', bottom).click(function() { 
    bottom.hide();  
    }); 

});

你也可以让它变成一个插件：

$.fn.toolbar = function(){ 

    this 
    .show() 
    .animate({ 
     'bottom': '0' 
    }, 700); 

    $('span', this).click(function() { 
    $(this).parent().hide();  
    }); 

    return this; 

} 

$(function() { 

    $('#bottomBox').toolbar(); 

}

来源

2011-10-26 21:38:45 Guffa

看来，OP有一个人'show（）'方法有一个很好的理由。隐藏之后，能够再次显示它会很高兴。你的实现不再有'show（）'方法。 – jfriend00

@ jfriend00：看起来并不如此。问题中的第二个实现没有这种展示方法。 – Guffa

好的，但第一个实现。 – jfriend00

那些你有一些声明的或内置的 - 它并不真正的问题，在哪里你重新定义它的价值;

在你的情况下，两个代码的结果将是相同的。唯一的区别是，当你声明：var x = "x";以外的函数或者如果或者任何运算符 - 它将成为一个全局变量，并立即赋值。您也可以将空变量var x;声明为全局变量，并按函数或通过任何运算符分配值，该运算符将停留在此处。由于window.onload是一个全局对象的事件 - 没关系，你在哪里给它赋值。

来源

2011-10-26 21:41:41

我赞成机制和政策的分离，所以在你的例子我会组织我的代码在第一种方式。

第二种方式是不坏虽然，我只是一个）调用函数不同的东西像showOnLoad()，和b）使用正确的事件注册（Guffa的回答有什么可能注册一个“上的最好办法加载“事件），而不是分配到window.onload。

来源

2011-10-26 21:48:24 millimoose

在JavaScript对象或外部有事件会更好吗？

回答

相关问题