자바 스크립트에 래퍼 객체 작성

Question

먼저 내 질문에 정확하게 말하지 않으면 사과하겠습니다. 전문 용어가 아닌 이상 전문 용어가 잘못되었을 수도 있습니다. 내 코드가 너무 당황하지 않기를 바란다. (

나는 마우스 롤오버로 이미지를 페이드 인/아웃하는 방법이있다. 나는 이것이 올바른 용어라고 생각한다. 이미지 요소와 몇 가지 필수 속성을 보유 할 수 있지만이를 수행하는 방법을 모르겠습니다. 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 id="obj" onmouseover="$('#obj').fadeIn()" onmouseout="$('#obj').fadeOut()"> 

jQuery를 그렇게 당신을 위해 모든 브라우저 종속성을 처리하면 돈 파이어 폭스와 모질라의 차이점과 같은 것에 대해서는 걱정할 필요가 없습니다.

Answer 2

HTML을 깨끗하게 유지하려면 JQuery를 사용하여 이벤트를 설정하는 것이 좋습니다.

귀하의 HTML은 다음과 같이 표시됩니다 : - 당신이하지 수 있도록

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

나는 당신의 자바 스크립트의 일부 범위 지정 개념을 도입 -

가

<div id="obj"> 

자바 스크립트는이 같은 "뭔가"를 찾습니다 함수가 문제를 무시하게 될 것입니다.

Answer 3

HTML에 핸들러를 추가하는 것이 좋지 않습니다. 또한 하나의 객체에 연결된 이벤트에 대해 여러 핸들러를 가질 수 있습니다.

불행히도 Microsoft는 이벤트 처리기를 연결하는 데있어 독자적인 방법을 사용합니다. 그러나 당신은 그것을 처리하기 위해 작은 래퍼 함수를 ​​작성할 수 있어야합니다.

자세한 내용은 quirksmode.org - Advanced event registration models을 읽어 보시기 바랍니다.

(IE가 아닌) W3C 호환 브라우저 예 : 대신 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(){...}())이 함수가 정의됩니다 및 (())를 실행 가기. 이 함수는 init 및 속성을 갖는 객체 (return {...};, {..}은 객체 리터럴 표기법)를 반환합니다. 두 속성 모두 즉치 함수 내에서 정의 된 모든 변수에 액세스 할 수있는 함수를 보유합니다 (닫음입니다). 즉 외부에서 액세스 할 수없는 newOpacity 및 setStyle에 액세스 할 수 있습니다. 반환 된 개체는 Fader 변수에 할당됩니다.