JQuery 첫 실행 문장들 비교

출처: https://recollectionis.tistory.com/146 [커피와 개발자]

 

$(document).ready(function(){ ... });  // 페이지 로딩시 

$(function(){ ... });

(function($){ ... })(jQuery);

 

첫줄의 소스는 페이지 로딩시 실행
두번째줄의 소스는 함수를 실행 하라는 의미
세번째줄의 소스는 jquery를 사용할 때, $ 의 의미를 jquery에서 사용하겠다는 의미가 내포되어있다.
$ 를 jquery만 사용하는 것이 아니라 다른 라이브러리에서도 사용할 수 있기 때문
함수에서 $ 의미는 jquery 객체로 사용이 되는 것 

windows.onLoad();는 $(document).ready(function(){ ... }); 이후 실행된다.

 

(function($){

    // 플러그인 코드 작성 부분

})(jQuery);

 

위의 래핑된 함수는 jQuery 객체를 단일 인자로 가지며 호출받는 인자의 이름을 $로 지정했기 때문에 래핑된 함수 내에서 $ 별칭을 다른 라이브러리와의 충돌에 대한 염려없이 사용할 수가 있으며 또한 코드의 가독성도 높일 수가 있다.

 

jQuery 자체 기능 중 일부는 전역함수를 통해 사용한다. jQuery 전역함수는 실제로 jQuery객체의 메소드지만, 현실적으로 jQuery 네임스페이스(namespace)의 함수이다.

 

대표적인 jQuery의 전역함수로는 $.each(), $.map(), $.merge(), $.ajax()등등...이 있으며 jQuery 라이브러리에서 이와 같은 전역함수가 유틸리티 메소드(utility method)로 제공된다.

 

이런 유틸리티 메소드는 자주 사용하는 기능을 간편하게 사용할 수 있도록 도와주지만 이 함수들을 사용하지 않고 사용자 정의의 유틸리티 메소드를 직접 만드는 방법도 어렵지 않다.

 

 

다음의 코드는 $.sum() 유틸리티 메소드로 배열을 전달받아 배열에 있는 값들을 더하고 그 결과를 반환한다.

 

JAVASCRIPT

(function($){

    $.sum = function(array) {

        var total = 0;

        $.each(array, function(idx, value){

            value = $.trim(value);

            value = parseFloat(value) || 0; total += value;

        })

        return total;

    }

})(jQuery);

var result = $.sum([20,30,15,45]);

console.log(result); // 110

출처: https://webclub.tistory.com/108 [Web Club]