かけがえのない愛

8.1 Ajax 간략히 살펴보기

8.1.1 XHR 인스턴스 생성하기

8.1.2 요청 보내기

8.1.3 진행 상황 추적하기

8.1.4 응답 얻기

• Ajax를 사용하는 개발자가 다뤄야할 고통
  • XHR 객체를 인스턴스화 하는데 브라우저에 종속적 코드 필요
  • 준비 핸들러는 필요없는 상태 변화를 걸러내야 한다.
  • 준비 핸들러는 XHR인스턴스를 호출하는 참조를 자동으로 얻지 못한다.
  • 응답결과는 형태에 따라 다양한 방법으로 다뤄야 한다.

8.2 엘리먼트에 콘텐츠 로드하기

• Ajax를 사용하는 가장 빈번한 상황은 서버에서 콘텐츠를 가져와서 원하는 DOM 위치에 삽입하는 것이다.
• 콘텐츠는 대상 컨테이너의 자식이 되는 HTML코드이거나 대상엘리먼트의 콘텐츠가 되는 보통 텍스트다.
• $('#someContainer).load('/serverResource'); - 간단하다.

8.2.1 jQuery로 콘텐츠 로드하기

• load(url, parameters, callback) - parameters 매개변수가 요청 매개변수로 제공되면 POST HTTP 메서드를 사용하여 요청을 만들고, 그렇지 않으면 GET 메서드로 요청을 만든다. (GET URL에 URI인코딩 형태의 쿼리문자열 추가)
• $('.injectMe').load('/someResource #div'); - 응답 엘리먼트에서 오직 <div>엘리먼트만 삽입한다.
• serialize() - 폼 컨트롤에서 요청 매개변수를 가져와 쿼리 문자열을 만들어줌(선택안된 체크박스 라디오버튼 드롭다운, 비활성화된 컨트롤과 같은 엘리먼트는 제외)
• serializeArray() - 자바스크립트 배열형태로 폼데이터를 반환. 폼 컨트롤 이름과 값을 name 프로퍼티와 value 프로퍼티로 가짐

8.2.2 목록 데이터 동적으로 로드하기

• $(function(){

             $('#styleDropdown')

                  .change(function(){   // 스타일 드롭다운을 감싸고 변경 핸들러를 바인딩한다.

                     var styleValue = $(this).val();

                     $('#detailsDisplay').load(

                            'getDetails.jsp',     // 선택된 스타일 데이터를 로드한다.

                            { style : styleValue } // GET 패러메터

                     );

                  })

                  .change();               // 변경 핸들러를 실행한다.

             });

8.3 GET과 POST 요청 만들기

• GET은 멱등 요청이며 캐시에 적합하다.
• POST는 데이터 전송에 주로 쓴다.

8.3.1 jQuery를 사용하여 데이터 얻기

• $.get(url, parameters, callback) - 명시된 URL을 사용하여 GET요청을 전송
• $.get( 'reflectData.jsp', {a:1, b:2, c:3}, function(data) {alert(data);} );

8.3.2 JSON 데이터 얻기

• XML이 데이터 전송기법으로 적당하지 않을때 사용
• $.getJSON(url, parameters, callback)

8.3.3 POST 요청 만들기

• $.post(url, parameters, callback)

8.4 Ajax 요청 직접 제어하기

8.4.1 Ajax 요청 직접 설정하고 생성하기

8.4.2 요청에 기본값 설정하기

8.4.3 전역함수

 

 

7.1 확장을 사용하는 이유

• 사이트 전체에 일관된 코드 스타일을 유지하는 데 도움을 줌
• jQuery의 강력한 기능을 상속받아 사용 가능

7.2 jQuery 플러그인 제작 지침

7.2.1 필드와 함수 이름 짓기

• 플러그인 개발시에 파일이름이 다른 파일과 충돌하지 않도록 만드는 방법
  • 접두어로 jquery.를 사용한다.
  • 이어서 플러그인 이름을 적는다.
  • .js로 파일 이름을 끝맺는다.
• jquery.fred.js
• http://docs.jquery.com/Plugins 페이지의 플러그인 목록을 살펴보는 것도 좋다.

7.2.2 $를 경계하라

• 별칭 jQuery를 사용하는 방법도 있으나 $쪽이 훨신 편리하다.

7.2.3 복잡한 매개변수 목록을 단순하게 만들기

• function complex(p1, p2, p3, p4, p5, p6, p7) {  - 매개변수가 많음
• complex(valueA, null,null,null,null,null, valueB); - null 입력이 많음
• complex(valueA, {p7:valueB}); - options hash를 이용하는 방법
• complex(valueA, {p3:vlaueC, p4:valueD})); - 이런 방법도

7.3 사용자 정의 유틸리티 함수 작성하기

• $.say = function(what) { alert('I say ' + what); }

7.3.1 데이터를 조작하는 유틸리티 함수 만들기

• $.toFixedWidth(value, length, fill) - 전달된 값을 고정폭 필드로 채우는 함수를 만들어 보자
• (function($){

   $.toFixedWidth = function(value, length, fill) {

        var result = value.toString();

        if(!fill) fill = '0;;

        var padding = length - result.length;

        if(padding < 0) {

             result = result.substr(-padding);

        }

        else {

             for(var n = 0; n < padding; n++)

                 result = fill + result;

        }

        return result;

   };

})(jQuery); - 이렇게 구현한다.

7.3.2 날짜 형식기 만들기

7.4 새로운 확장 메서드 추가하기

• 확장 메서드를 추가하여 강력함을 필요한 만큼 확장할 수 있다.

7.4.1 확장메서드에 여러동작 적용하기

• 두가지 이상 되는 기능을 수행하는 새로운 플러그인 메서드 개발

7.4.2. 확장메서드에서 상태 유지하기

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~) |작성자 행복한사람