Question

在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();

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

Answer 1

我会这样做：

$(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();

}

Answer 2

你有一些声明或内置的东西 - 它并不重要，你在哪里重新定义它的价值;

在您的情况下，两个代码的结果将是相同的。唯一的区别是当你在一个函数或if或者任何运算符之外声明：var x = "x";时，它将成为一个全局变量并立即赋值。您还可以将空变量var x;声明为全局变量，并按功能或通过任何运算符分配值，这将保留在那里。由于window.onload是全局对象的事件 - 无关紧要，您在何处为其赋值。

Answer 3

我赞成机制和策略的分离，因此在您的示例中，我将以第一种方式构建代码。

第二种方式不是坏但是，我只是a）调用与showOnLoad()不同的函数，以及b）使用正确的事件注册（Guffa的答案有可能注册“加载”事件的最佳方式，而不是分配给window.onload。

Answer 4

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

在您的具体情况下，我认为您应该允许外部代理安装工具栏或删除工具栏，但安装后工具栏的操作应由工具栏本身处理。

我建议这样的实现具有以下优点：

所有行为都封装在对象
因为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();
        });
    });
}

在JavaScript对象中或外部使用事件更好吗？

4 个答案: