[펌]jQuery in Action 정리 6장 - jQuery 유틸리티 함수

6.1 jQuery 플래그 사용하기

• $.browser, $.boxModel, $.styleFloat

6.1.1 사용자 에이전트 탐지하기

• 브라우저 탐지가 해로운 이유 - 브라우저 탐지는 '증오스럽다'. 브라우저 탐지는 선택할 여지가 없을 때만 사용하는 기술이다. IE, firefox, opera, safari 등등 , 지원하지 않는 브라우저는 에러 발생 ,거대 중첩 조건문에 의해 확장성 떨어짐
• $.browser - 에이전트가 속한 브라우저 종류를 찾으려고 사용하는 플래그 집합을 정의한다. msie, mozilla, safari, opera, version
• $.browser.msie ? 2 : select.option[2] - 브라우저를 탐지하여 처리

6.1.2 박스 모델 확인하기

• W3C 박스 모델은 패딩과 테두리 엘리먼트의 크기를 넓이에서 제외하지만 IE에서는 포함한다.
• $.boxModel - W3C 표준 박스 모델이면 true, IE 박스모델은 false

6.1.3 정확한 float 스타일 탐지하기

• element.style[$.styleFloat] = 'left';
• $.styleFloat 플래그 값은 IE에서 styleFloat이며 다른 브라우저에서는 cssFloat이다.
• 이 플래그를 일반적으로 직접 사용하는 일이 없다.

6.2 다른 라이브러리와 jQuery 함께 사용하기

• $.noConflict() - 다른 라이브러리가 $를 사용하면 그 라이브러리에서 이변수를 사용할 수 있도록 만들어 주는 유틸리티 함수

6.3 자바스크립트 객체와 컬랙션 조작하기

6.3.1 문자열 다듬기

• $.trim(value) - 앞뒤 공백 제거(폼피드, 개행, 리턴, 탭, 수직문자 등 포함)

6.3.2 프로퍼티와 컬렉션 순회하기

• for-in루프 는 문법이 불필요하게 장황하고 복잡해짐
• $.each(container, callback) - container는 순회할 아이템을 가진 배열 혹은 프로퍼티를 가진 객체, callback함수의 첫번째 매개변수는 배열의 인덱스 이거나 객체 프로퍼티의 이름이다.
• var anArray = ['하나','둘','셋'];

$.each(anArray, function(n, value){

    // 여기서 작업한다.

});

• $var anArray = {하나:1, 둘:2, 셋:3};

$.each(anObject, function(name, value){

    // 여기서 작업한다.

});

6.3.3 배열 필터링하기

• 많은 양의 데이터를 다루는 애플리케이션에서 특정조건에 일치하는 엘리먼트를 찾으려면 빈번하게 배열을 순회하여야한다.
• 특정경계에 속하거나 속하지 않는 아이템 혹은 특정 패턴에 일치하는 아이템을 찾기위해 필터링 작업을 한다.
• $.grep(array, callback, invert) - 전달된 배열의 엘리먼트마다 콜백함수를 호출하면서 순회한다. invert 매개변수를 생략하거나 false이면 콜백의 값이 true일 경우 값이 수집된다. invert가 true라면 콜백의 값이 false일 때 값이 수집된다. 원본 배열은 변경되지 않는다.
• var bigNumbers = $.grep(originalArray, function(value){

return value > 100;

}); - 배열중 100보다 큰 값으로 필터링

6.3.4 배열 변환하기

• 데이터가 항상 필요한 형태로만 존재하지는 않는다. 데이터 중심 웨에플리케이션에서 자주 사용하는 주요 동작으로 값의 집합을 다른 집합으로 변환하는 연산이 있다.
• $.map(array, callback) - 전달된 배열의 아이템마다 콜백함수를 호출하면서 순회하며 함수호출로 반환된 값은 새로운 배열로 수집된다.
• var oneBased = $.map([0,1,2,3,4], function(value){return value+1;}); - 0 기반 인덱스에서 1기반 인덱스로 변경한다.
• var oneBased = $.map([0,1,2,3,4], 'a+1'); - 위와 같은식, 간단하게 만드는 표현식 형태의 문자열을 전달 할 수 있다. a라는 매개변수를 값으로 전달 받았다.
• var strings = ['1', '2', '3', '4', 'S', '6'];  // 5가 아니라 S

var values = $.map(strings, function(value){

var result = new Number(value);

return isNaN(result) ? null : result; // 숫자로 성곡적으로 변환했는지 점검 (자바스크립트 isNaN() 메서드), 실패시 null 반환

});

• var characters = $.map(['this', 'that', 'other thing'],

function(value) { return value.split(''); }

);

==> ['t','h','i','s','t','h','a','t','o','t','h','e','r ',' ','t','h','i','n','g'] 합쳐서 분해 됨

6.3.5 자바스크립트 배열 재미있게 사용하기

• $.inArray(value, array) - 전달된 값이 처음 나타나는 위치 인덱스 반환, value 배열에서 찾으려는 값, 찾을 대상 배열 , 찾지 못하면 -1 반환
• var index = $.inArray(2,[1,2,3,4,5]);
• $.makeArray(object) - 유사배열 객체를 자바스크립트 배열로 변환
• $.unique(array) - DOM 엘리먼트의 배열이 주어지면, 원본 배열에서 고유한 엘리먼트로만 구성된 배열 반환.

6.3.6 객체 확장하기

• $.extend(target, source1, source2, ...sourceN) - target에 전달될 객체를 함께 전달된 나머지 객체의 프로퍼티를 사용하여 확장한다. 같은 객체가 있을 때  뒤에 나오는 객체가 앞보다 우선함.

6.4 동적으로 스크립트 로드하기

• $.getScript(url, callback) - url매개변수가 명시한 서버에 GET 요청을 사용해 스크립트를 가져옴

  [출처] jQuery in Action 정리 6장 - jQuery 유틸리티 함수 (iTeaTime~) |작성자 행복한사람