用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

这并不直接回答你的问题，但你可以使用jQuery库。这很简单，你所要做的就是在顶部加入一个脚本标签：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 

那么你的DIV会是什么样子：

<div id="obj" onmouseover="$('#obj').fadeIn()" onmouseout="$('#obj').fadeOut()"> 

jQuery将处理所有的浏览器的依赖给你，让你不不必担心Firefox和Mozilla等之间的差异......

Answer 2

如果你想保持你的HTML干净，你应该考虑使用JQuery来设置事件。

你的HTML看起来像这样： -

<div id="obj"> 

你的JavaScript看起来像这样 “东西”： - 我在你的JavaScript引入了一些范围界定概念

$(document).ready(function() { 
    $("#obj").mouseover(function() { 
     Page.fade(this, 1); 
     }).mouseout(function(){ 
     Page.fade(this, 0); 
     }); 
}); 

var Page = new function() { 
    // private-scoped variable 
    var DELTA = 0.05; 

    // public-scoped function 
    this.fade = function(divObj, flag) { 
     ... 
    }; 

    // private-scoped function 
    var newOpacity = function (divObj, flag) { 
     ... 
    }; 

    // private-scoped function 
    var setStyle = function (divObj) { 
     ... 
    }; 
}; 

，以确保你是不是将有功能重叠的问题。

Answer 3

你说得对，在HTML中添加处理程序并不好。你也可能失去几个处理程序来处理附加到一个对象的事件。

不幸的是微软在附加事件处理程序方面采取了自己的方式。但是你应该能够编写一个小封装函数来处理这个问题。我们建议您阅读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); 

正如你可以看到我m直接传递对象的引用，所以在你的方法中你已经有了对象的引用。

您可以将其封装在接受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和fade。两个属性都拥有可以访问直接函数中定义的所有变量的函数（它们是闭包）。这意味着他们可以访问从外部无法访问的newOpacity和setStyle。返回的对象被分配给Fader变量。