'jQuery'에 해당되는 글 13건

  1. 2014.07.15 jQuery 확장
  2. 2014.07.15 jQuery Utility API
  3. 2014.07.14 jQuery 새로운 기술이 아니라 새로운 생각

jQuery 확장

Posted by 단순대왕 jQuery : 2014. 7. 15. 14:24

jQuery 확장을 사용하는 이유

- 사이트 전체에 일관된 코드 스트일을 유지하는데 도움이 된다.

- jQuery가 재사용 가능한 도구들과  API를 제공한다.

- jQuery가 제공하는 기반 코드를 활용할 수 있다.

파일과 함수 이름 짓기

- 접두어로 jquery.를 사용한다.

- 이어서 플러그인 이름을 적는다.

- 선택적으로 플러그인의 메지어와 마이너 버전 값을 적는다.

- .js 로 파일 이름을 끝맺는다.

$를 경계하라

(function($){

    // 플러그인 정의

})(jQuery);

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

- 선택사항 해시(options hash)를 사용한다. 선택사항 해시를 사용하면 선택적인 매개변수는 매개변수

  정보를 이름/값 쌍 형식의 프로퍼티로 가지는 자바스크립트의 Object 인스턴스로 전달

- complea(valueA, {p7:valueB});

- complae(valueA, {p3: valuceC, p4:valueD, p5:valueB});

- complex(p1, options)

  function complex(p1, options){

      var settings = $.extend({

        option1: defaultVaule1,

        option2: defaultValue2,

        option3: defaultValue3

    }, options||{});

    // 함수 나머지 부분

  }

- ||{}를 사용하여  options 객체가 null이거나 undefined인지 확인한다. 만약 options 변수가 false라면

  (null과 undefined는 조건식에서 false이다) 빈 객체가 사용된다. 


'jQuery' 카테고리의 다른 글

jQuery 확장 메소드 만들기  (0) 2014.07.16
jQuery Deprecated API  (0) 2014.07.15
jQuery 사용자 정의 함수 만들기  (0) 2014.07.15
jQuery Utility API  (0) 2014.07.15
jQuery 새로운 기술이 아니라 새로운 생각  (0) 2014.07.14
  

jQuery Utility API

Posted by 단순대왕 jQuery : 2014. 7. 15. 10:39

$.fx.off 

- 효과를 활성화하거나 비활성화한다.

$.support 

- 지원하는 기능의 세부사항을 제공한다.

$.browser 

- 상세한 브라우저 정보를 제공한다.

$.trim(value) 

- 문자열 다듬기. 공백 문자열을 제거하고 결과를 반환

- $('#someField').val($.trim($('#someField').val())); 

$.each(container, callback) 

- 프로퍼티와 컬렉션 순회

- $.each(anArray, function(배열의 인덱스 또는 객체 프로퍼티 이름, 배열의 아이템 또는 프로퍼티 값){

   });

* DOM 엘리먼트 확장 집합의 엘리먼트를 순회하는 each() method도 있음

$.grep(array, callback, invert) 

- 배열 필터링

- 콜백 함수의 반환 값은 값이 $.grep() 함수의 값으로 반환된 새로운 배열로 수집될지 아닐지 결정

- var zips = $.grep(

   orgArray, 

   function(현재 데이터 값, 원본 배열의 인덱스){ return value.match(/^\d{5}(-\d{4})?$/) != null;}, 

   true);

$.map(array, callback)

- 배열 변환하기

- 함수 호출로 반환된 값은 새로운 배열로 수집

- var oneBased = $.map([0,1,2,3,4], function(현재 데이터 값, 원본 배열의 인덱스){return value+1;});

$.inArray(value, array)

- 전달된 값이 처음 나타나는 위치 인덱스를 반환

- var index = $.inArray(2, '1,2,3,4,5]);

$.makeArray(Object)

- 전달된 유사 배열 객체를 자바스크립트 배열로 변환

- 유사 배열 객체: var images = document.getElementsByTagName("img"); // NodeList

$.unique(array)

- DOM 엘리머트 배열이 주어지면, 원본 배열에서 고유한 엘리먼트로만 구성된 배열을 반환

$.merge(array1, array2)

- 두 번째 배열의 값들을 첫 번째 배열에 추가하고, 그 결과를 반환

- 첫 번째 배열을 수정되어 반환

- $.merge([1,2,3,4,5], [6,7,8,9,0]);

$.extend(deep, target, source1, source2, ... sourceN)

- target에 전달된 객체를 함께 전달된 나머지 객체의 프로퍼티를 사용하여 확장

- deep: 깊은 복사 또는 얕은 복사를 결정

- target: 원본 객체의 프로퍼티를 복사하여 프로퍼티가 추가되는 객체

- source: target 객체에 추가되는 프로퍼티를 가진 하나 이상의 객체

var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97 };

var object2 = {  banana: { price: 200 },  durian: 100};

$.extend( object1, object2 );

// {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

// 중복되는 객체가 있으면 object2 기준, object1 + object2

$.extend( true, object1, object2 );

// {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}

// 중복되는 프로퍼티가 있으면 object2 기준, object1 + object2

$.extend( false, object1, object2 );

// {"apple":0,"banana":{"weight":52,"price":100},"cherry":97}

// 중복되는 모든 값에 object1 기준, object1

$.param(param, traditional)

- 쿼리 문자열로 인코딩 (encodeURIComponent())

- $.param({'a thing':'it&s=value', 'another thing':'another value'});

// a+thing=it%26s%3Dvalue&another+thing=another+value

- traditional: 중첩된 구조의 쿼리 문자열을 구성

$.isArray(o)

- o가 자바스크립트 배열이면 true/ 유사 배열이면 false

$.isEmptyObject(o)

- o가 자바스크립트 프로퍼티가 없는 객체이면 true

$.isFunction(o)

- o가 자바스크립트 함수이면 true

$.isPlainObject(o)

- o가 객체 리터럴({}) 이나 new Object()로 생성되었다면 true

$.isXMLDoc(node)

- node가 XML 문서이거나, XML 문서 안에 위치한 노드일 경우 true

$.noop

- 아무것도 하지 않는다.

$.contains(container, containee)

- 엘리먼트가 또 다른 엘리먼트의  DOM계층에 포함되어 있는지 검사

$.data(element, name, value)

- 전달된 엘리먼트에 데이터를 명시한 이름으로 저장하거나 가져온다.

- value: 값이 생략되면 전달된 이름에 맞는 데이터를 가져온다.

- $('div').data("test", {first:'16', last:'pizza'});

  $('span.first').text($(div).data(test).first);

$.removeData(element, name)

- 전달된 엘리먼트에 저장된 데이터를 제거한다.

$.proxy(function, proxy)

$.proxy(proxy, property)

- 함수가 호출될 때 객체를 미리 함수에 바인딩할 수 있다.

- 바인딩된 객체는 해당 함수의 컨텍스트가 된다.

- function: 프록시 객체로 미리 바인딩될 함수

- proxy: 프록시 함수 컨텍스트로 바인딩될 객체

- property: 바인드된 함수를 포함하는 프록시로 전달된 객체에 위치한 프로퍼티의 이름

- $('#testButton, #buttonContainer').click(

    function(){  say(this.id);  }

);

$('#testButton, #buttonContainer').click(

    $.proxy(function(){  say(this.id);  }, $('#controlPanel')[0]) 

);

- $.proxy()를 가장 빈번하게 사용하는 예는 객체의 메소스를 핸들러로 바인딩하려는 때이며, 메소드를

  지닌 객체가 마치 메소드를 직접 호출한 것과 동일하게 핸들러의 함수 컨텍스트로 할당

- var o = {  id:'o', hello:function(){alert(this.id);  }

- $(해석가능한  표현식).click(o.hello); // 함수 컨텍스트는 o가 아닌 현재 버블링 엘리먼트

- $(해석가능한 표현식).click(  $.proxy(o.hello, o)  ); // 함수 컨텍스트는 o

또는

- $(해석가능한 표현식).click(  $.proxy(o, 'hello')  ); // 함수 컨텍스트는 o

$.parseJSON(json)

- 전단된 JSON 문자열을 파싱하여, 그 결과(객체)를 반환한다.

$.globalEval(code)

- 전역 컨텍스트에서 전달된 자바스크립트 코드를 평가한다.

$.getScript(url, callback)

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

- url 매개변수가 명시한 서버에 GET 요청을 사용하여 스크립트를 가져오며, 성공시 콜백함수 실행


'jQuery' 카테고리의 다른 글

jQuery 확장 메소드 만들기  (0) 2014.07.16
jQuery Deprecated API  (0) 2014.07.15
jQuery 사용자 정의 함수 만들기  (0) 2014.07.15
jQuery 확장  (0) 2014.07.15
jQuery 새로운 기술이 아니라 새로운 생각  (0) 2014.07.14
  

jQuery 새로운 기술이 아니라 새로운 생각

Posted by 단순대왕 jQuery : 2014. 7. 14. 15:45

1. 튀지 않는 자바스트립트

HTML 문서에서 스타일 정보를 분리하는 것과 마찬가지로 문서에서 동작을 분리하는 작업은 커다란 이점을

제공한다.

이러한 전략을 튀지 않는 (unobtrusive) 자바스트립트라고 하며, 개발자들이 동작을 분리하도록 요구한다.

튀지 않는 자바스크립트는 HTML 페이지의 <body>에 포함된 자바스크립트 표현식이나 구문을 잘못된

것으로 본다. onclick과 HTML 엘리먼트의 어트리뷰트나 페이지 몸체 <body>에 위치한 스크립트 블록이

해당된다.

그럼 어떻게 onclick 어트리뷰트를 사용하지 않고 버튼을 동작하게 할까?


----- HTML Code -----

<button type="button" id="testButton">클릭하세요.</button>


----- script -----

<script type="text/javascript">

window.onload = function(){

    document.getElementById('testButton').onclick = function(){

        document.getElementById('xyz').style.color = 'red';

    };

};

</script>


2. 브라우저 탐지의 대안은 무엇일까?

어떤 브라우저를 사용하는지 반드시 알아야 할까? 브라우저 탐지를 고려하는 이유는 오직 하나다.

사용할 수 있는 브라우저의 기능과 특징을 알기 위함이다. 결국 필요한건 브라우저의 기능과 특징이다.

브라우저를 확인하여 추측하기 보다는 기능을 확인해보는 것은 어떨까?

이러한 기법을 요소 탐지 (Feature Detection)이라고 한다. 요소 탐지는 특정 객체나 프로퍼티 또는 

메소드가 존재하는지 확인하여 분기하는 코드를 사용한다.

if(element.attachEvent){

    element.attachEvent('onclick', someHandler);

}

else if(element.addEventListener){

    element.addEventListener('click', someHandler);

}

else{

    throw new Error ('이벤트 핸들링이 지원되지 않습니다.);

}


3. 문서 준비 핸들러

튀지 않는 자바스크립트를 적용하면 동작은 문서 구조에서 분리된다.

그러므로 문서 마크업 외부에서 동작을 정의하여 페이지 엘리먼트의 연산을 수행한다.

이를 위해 DOM엘리먼트를 모두 로드할 때까지 동작의 실행을 기다려야 한다.

이러한 방식은 문서 전체가 로드된 이후에 정의된 코드가 실행되도록 만든다. 이렇게 하면 브라우저는

DOM 트리를 생성할 뿐만 아니라 모든 외부 리소스까지 로드된 후에야 onload 코드를 실행하고 페이지를

브라우저에 표시한다.

이보다 나은 접근법은 문서 구조를 파싱하고 브라우저가 HTML을 최종 DOM트리도 변활할 때까지만

기다린 다음 동작을 적용하는 스크립트를 실행하는 것이다.

jQuery에는 DOM트리가 로드된 다음 다른 외부 리소스를 로드할 때까지 기다릴 필요 없이 코드를

실행하는 간단한 방법이 있다.


jQuery(document).ready(function(){

    $("div.notLongForThisWorld").hide();

});

먼저 document 인스턴스를 jQuery 함수로 감싼 다음 ready() 메소드를 호출한다.

ready()메소드는 문서를 조작할 준비가 되었을 때 실행될 함수를 매개변수로 전달받는다.


jQuery(function(){

    $("div.notLongForThisWorld").hide();

});


jQuery() 혹은 $()에 함수를 전달하면 브라우저는 DOM이 모두 로드될 때까지 코드 실행을 미뤄둔다.


jQuery(function($){

    alert("ready");

});

jQuery 함수에 매개변수로 함수를 전달하면 해당 함수를 준비 핸들러로 선언한다.

$식별자를 사용하여 준비 핸들러로 전달되는 매개변수를 하나 선언한다.

jQuery는 준비 핸들러의 매개변수로 항상 jQuery 참조를 전달하기 때문에 $는 준비 핸들러 안에서

어떠한 외부 정의와 상관없이 jQuery객체를 참조할 수 있다.


var $ = "hi!";

jQuery(function(){

alert('$ = ' + $);

});

// 결과 

$ = hi!


var $ = "hi!";

jQuery(function($){

alert('$ = ' + $);

});

// 결과

$ = function(selector, context){

    return new (jQuery.fn.init)(selector, context);

}


'jQuery' 카테고리의 다른 글

jQuery 확장 메소드 만들기  (0) 2014.07.16
jQuery Deprecated API  (0) 2014.07.15
jQuery 사용자 정의 함수 만들기  (0) 2014.07.15
jQuery 확장  (0) 2014.07.15
jQuery Utility API  (0) 2014.07.15
  
 «이전 1 2  다음»