$(function() {}); and (function() {})();
js의 형태.
1. jQery(callback): DOM 로딩이 끝나고 실행될 함수를 bind
$(function()
//내용
});
참고: jQuery API
설명:
위의 function은 $(document).ready()와 같은 역할.
DOM 로딩이 완전히 끝나고 js를 불러야만 할 때 이런방식을 사용하는 것 같다.
예를 들면 DOM 조작해야 할게 많은 프로젝트일까?
cf1) .ready(handler)
설명:
-DOM이 완전히 로드 되고 나서 실행해야만 하는 함수를 쓸 때.
-ready가 넘겨주는 handler는 주로 익명함수를 쓴다.
-아래 세개 문법은 모두 같은 것임.
$(document).ready(handler)
$().ready(handler)
$(handler)
-대부분의 스크립트는 DOM계층만 구성되면 실행될 수 있기에 DOM만 준비되면 넘길수 있는 ready()를 쓰는게 낫다(js의 load이벤트보다)
cf2) js의 load이벤트
참고: 프론트엔드 개발자를 위한 자바스크립트 프로그래밍
설명:
-페이지를 완전히 불러왔을 때 window에서, 모든 프레임을 완전히 불러왔을 때 프레임셋에서, 이미지나 객체를 완전히 불러왔을 떄 <img>요소나 <object>요소에서 발생
-이미지같은 모든 요소가 완전히 받아질 때까지 트리거가 걸리지 못한다.
DOM만 준비되고 스크립트를 실행해도 되면 .ready()나 $(handler)를 쓰고, 모든 요소가 완전히 로드되고 나서 스크립트를 실행해야 하면 load이벤트를 쓰는 것 같다.
2. (handler)()
(function() {
//내용
})();
설명:
-위는 즉시 실행함수로 DOM과는 상관 없는 공통적인 함수를 모아놓을 때 쓰는 것 같다.
-1번 방식은 각 화면의 html파일에서 해당js를 부른다면, 2번 방식의 js는 index.html과 같은 총괄(?공통?)하는 html에서 공통의 js를 부른다.
사용예
(function(global) {
function a() {};
function b() {};
global.validation = {
a: a,
b: b
};
})(window);
위 처럼 validation으로 모듈화 하여 혹시모를 function이름 중복을 예방한다.
다른 파일에서 validation.a() 와 같이 전역함수로 쓸 수 있다.
+
프로젝트 소스에 두가지 방식이 있어서 정리해 봤다.
가독성이 향상되는 문단 구성을 생각해봐야겠다.