jQuery

(eunyoung) — Fri, 16 May 2008 00:10:55 +0900

jQuery는 55KB js파일로 파일안에 이벤트가 들어있고 jQuery를 호출하여,
코드를 간단하게 작성할 수 있다.

자바스크립트로 tab메뉴를 만들때, 어떤 식으로 넘길까 고민하던중.
제이쿼리에 대해 알게 되었고, 날코딩을 했다면 5-6줄 길어졌을 코드가 1줄로 깔끔하게 정리되었다.

제이쿼리의 강력함은 알게되었지만 어떠한 기능이 있는지 자세히 몰라서
안쓰고 있던 중.. 정리해 두면 좀 쓸껏 같아서 포스팅 한다.

라고 했으나..
역시나 정리문서가 있네-_- => http://visualjquery.com/1.1.1.html

클로져 함수를 공부해보자!

(eunyoung) — Wed, 14 May 2008 01:24:56 +0900

자바스크립트는 내장된 함수의 지역변수를 반환해서 외부에서도 호출할 수 있는
"클로저"라는 기능을 갖는다.

중첩함수와 비슷하나 더 큰 개념이 숨어있고, 함수가 동작하는 데 필요한 데이터 영역이 확장되는 자바스크립트 만의 유연함을 보여주는 대표적인 기능이다.

예를들면,

function sayHello2(name)
{
var _hello = 'Hello';
var text =_hello + name;
var sayAlert = function() { alert(text); }
return sayAlert;
}
var say2 = sayHello2('Jane');
say2();

이 함수는 다른 함수안에 함수를 생성하였기 때문에 클로저를 가진다고 할 수 있다.

씨언어 같은 경우에는 함수가 호출되어 반환되면 메모리가 해제되기 때문에
지역변수에 접근 할 수 없는 반면 자바스크립트의 클로저함수는
함수가 존재할때 처럼 모든 지역변수의 복사본을 유지한다.
또한 꼭 가비지 컬렉션에 의해서 제거 되지 않기 때문에 var _hello = 'Hello'; 를
계속 참조하여 강제적으로 클로저를 해제하는 상태를 만들어줘야한다.

보통 say2 = null; 을 시켜주면 메모리에서 반환되어 클로저를 해제할 수 있다.

주의할 점.

function leakMemory(){
   var el = document.getElementById('el');
   var o = { 'el' : el };
   el.o = o;
}

위의 코드는 el로 식별되는 요소로 접근하기위해 DOM으로 접근한다.
그리고 이것을 매우 간단하게 표현한 함수 리터럴을 사용해서 새로운 객체 참조를 생성하는데 사용한다. 이 객체는 이름 없는 객체를 생성하고, 이 이름없는 객체는 DOM객체를 el이라는 이름의 프로퍼티에 배정한다.

그리고 나서가 문제다.
자바스크립트 객체와 DOM 객체간의 순환 참조로 인해 클로저가 종료되지 않는 경우가 발생하면, 페이지를 닫아도 할당된 메모리는 해제되지 않는다.

반복문에서 메모리가 누수된다면 그 양은 엄청나게 불어난다.
따라서, 일반적으로 함수를 내부에 정의하는 것보다, 아래 코드와 같이 작성하는것이
함수안에서 클래스 지역변수를 사용하여 클로저를 일으키지 않는 방법이다.

<script type ="text/javascript">
function myObject(){
   this.startTime = new Date();
}
myObject.prototype.elapsedTime = function(){
   var now = new Date();
   var elapsed = now - this.startTime;
   return elapsed;
}
var obj = new myObject();
function call(){
   alert("객체 나이 : " +obj.elapsedTime());
}
</script>
<input type = "button" onclick ="call();" value ="호출">

참고사이트 : http://jibbering.com/faq/faq_notes/closures.html
http://www.javascriptkit.com/javatutors/closures.shtml