javascript - 用 Javascript 写一个包装器对象

Question

首先，如果我的问题措辞不正确，请允许我道歉 - 我不是专业编码员，所以我的术语可能很奇怪。我希望我的代码不会太尴尬:(

我有一个 fade() 方法，可以通过鼠标悬停使图像淡入淡出。我想使用包装器对象(我认为这是正确的术语)来保存图像元素和一些必需的属性，但我不知道如何实现。 fade() 是从 HTML 调用的，旨在无需太多额外设置即可放入页面(这样我就可以轻松地将新的淡入淡出图像添加到任何 HTML)，就像这样:

<div id="obj" onmouseover="fade('obj', 1);" onmouseout="fade('obj', 0);">

fade(obj, flag) 方法启动一个 SetInterval 使图像淡入，当指针移开时，间隔被清除并创建一个新的 SetInterval 使图像淡出.为了保存不透明状态，我向对象添加了一些属性:obj.opacity、obj.upTimer 和 obj.dnTimer.

一切正常，但我不喜欢向 HTML 元素添加属性的想法，因为这可能会导致将来出现其他方法覆盖这些属性的情况。理想情况下，我认为应该涉及一个包装器对象，但我不知道如何在页面加载时不添加代码来创建对象的情况下干净地完成此操作。如果有人有任何建议，我将不胜感激!

这是我的推子方法:

var DELTA = 0.05;

function fade(id, flag) {

  var element = document.getElementById(id);
  var setCmd = "newOpacity('" + id + "', " + flag + ")";

  if (!element.upTimer) {
    element.upTimer = "";
    element.dnTimer = "";
  }
  if (flag) {
    clearInterval(element.dnTimer);
    element.upTimer = window.setInterval(setCmd, 10);
  } else {
    clearInterval(element.upTimer);
    element.dnTimer = window.setInterval(setCmd, 10);
  }
}

function newOpacity(id, flag) {

  var element = document.getElementById(id);

  if (!element.opacity) {
    element.opacity = 0;
    element.modifier = DELTA;
  }

  if (flag) {
    clearInterval(element.dnTimer)
    element.opacity += element.modifier;
    element.modifier += DELTA;  // element.modifier increases to speed up fade
    if (element.opacity > 100) {
      element.opacity = 100;
      element.modifier = DELTA;
      return;
    }
    element.opacity = Math.ceil(element.opacity);
  } else {
    clearInterval(element.upTimer)
    element.opacity -= element.modifier;
    element.modifier += DELTA;  // element.modifier increases to speed up fade
    if (element.opacity < 0) {
      element.opacity = 0;
      element.modifier = DELTA;
      return;
    }
    element.opacity =
      Math.floor(element.opacity);
  }
  setStyle(id);
}

function setStyle(id) {

  var opacity = document.getElementById(id).opacity;

  with (document.getElementById(id)) {
    style.opacity = (opacity / 100);
    style.MozOpacity = (opacity / 100);
    style.KhtmlOpacity = (opacity / 100);
    style.filter = "alpha(opacity=" + opacity + ")";
  }
}

Answer 1

您是对的，在您的 HTML 中添加处理程序并不好。您还失去了将多个事件处理程序附加到一个对象的可能性。

不幸的是，Microsoft 在附加事件处理程序方面有自己的方式。但是您应该能够编写一个小的包装函数来处理这个问题。

详情建议阅读quirksmode.org - Advanced event registration models .

W3C 兼容浏览器(IE 不是)的示例:不是在 HTML 中添加事件处理程序，而是获取对元素的引用并调用 addEventListener :

var obj = document.getElementById('obj');

obj.addEventListener('mouseover', function(event) {
    fade(event.currentTarget, 1);
}, false);

obj.addEventListener('mouseout', function(event) {
    fade(event.currentTarget, 0);
}, false);

如您所见，我直接传递了对该对象的引用，因此在您的 fade 方法中您已经拥有对该对象的引用。

您可以将它包装在一个接受 ID(或引用)的函数中，每次您想要将事件处理程序附加到某个元素时，您只需将 ID(或引用)传递给此函数即可。

如果你想让你的代码可重用，我建议把所有东西都放到一个对象中，像这样:

var Fader = (function() {
   var DELTA = 0.05;
   function newOpacity() {}

   function setStyle() {}

   return {
       fade: function(...) {...},

       init: function(element) {
           var that = this;
           element.addEventListener('mouseover', function(event) {
               that.fade(event.currentTarget, 1);
           }, false);

           element.addEventListener('mouseout', function(event) {
               that.fade(event.currentTarget, 0);
           }, false);
       }
   };
}())

使用对象来保存您的函数可以减少全局命名空间的污染。

然后你可以调用它:

Fader.init(document.getElementById('obj'));

上面代码的解释:

我们有一个立即函数 (function(){...}()) 这意味着，该函数一次性定义并执行 (()) .此函数返回一个对象(return {...};，{..} 是对象字面量表示法)，它具有属性 init和淡出。这两个属性都包含可以访问立即函数内定义的所有变量的函数(它们是闭包)。这意味着他们可以访问无法从外部访问的 newOpacity 和 setStyle。返回的对象分配给 Fader 变量。