javascript_jquery_basic_4_1

jQuery 플러그인 제작

jQuery 확장 소개

jQuery가 가진 기능 이외에 기능이 필요한 경우 새로운 기능을 추가하여 기능을 확장하는 방법

jQuery 확장 요소의 종류

1. 유틸리티
   코딩에 도움을 주는 기능들을 의미한다.
   사용법은 주로 jQuery 인스턴스를 생성하지 않고 다음과 같이 jQuery 클래스에 직접 접근해서 사용한다.

jQuery.유틸리티();

$.유틸리티();

2. 플러그인
   노드를 다루는 특정 기능을 재사용하고자 할 때 사용하는 포장 기능이다.
   사용법은 주로 다음과 같이 jQuery 객체를 생성한 후에 사용한다.

$("선택자").플러그인(옵션);

var $결과 = $("선택자");
$결과.플러그인(옵션);

jQuery 유틸리티 만들기

자주 사용하는 유틸리티

• trim()
  문자열에 시작과 끝에 있는 공백을 제거한다.

• index()
  일치하는 요소중에 주어진 요소를 찾는다.

• proxy()
  함수 내부의 this를 특정 객체로 변환한다.

  this에서 발생하는 문제
  문제 해결 방법
  Function.prototype.bind
  JavaScript 프록시(Proxy)

• extend()
  두개 이상의 객체의 내용을 첫번째 객체로 병합한다.

  jQuery.extend()

• data() 해당 엘리먼트에 Javascript Type의 value를 로 저장하거나 저장되어있는 데이터를 읽어온다.

  jQuery: data() 이해와 활용

jQuery Utilities
jQuery Utilities (Tutorialspoint)

jQuery 플러그인 만들기

특정 기능을 재사용하고자 할 때 사용하는 포장 기능이다.

플러그인 구조

(function($) {
    $.fn.플러그인이름 = function(속성 값) {
        this.each(function(index) {

        }
        return this;
    }
})(jQuery)

jQuery 플러그인은 jQuery 클래스의 fn이란 곳에 플러그인을 만든다.
여기서 fn은 prototype을 줄여 쓴 닉네임일 뿐이다.
jQuery 플러그인은 모두 jQuery의 인스턴스 메서드일 뿐이다.

실습

사용자 정의 jQuery 플러그인 만들기

실습
each 실습
accordion 실습

find, filter, children

• find : 검색된 결과 객체 집합의 모든 하위레벨(자식)을 검색 할때 사용 합니다.
  • ("A").find("B") : A 하위에서 B를 찾음
• filter : 검색된 결과 객체 집합에서 특정 집합으로 다시 한번 검색 할때 사용합니다.
  • ("A").filter("B") : A 내에서 B를 찾음
• children : 검색된 결과 객체 집합 직속 하위레벨(자식)을 검색 할때 사용합니다.
  • ("A").chlidren() : A 하위의 요소들

find, filter, children

extend() 메서드를 활용한 플러그인 옵션 처리

매개변수가 여러개인 경우

var a = {opt1: 1, opt2: 1};
var b = {opt1: 2, opt3: 2};
var c = {opt1: 3};
var r = jQuery.extend(a, b, c);

console.log("A: opt1=" + a.opt1 + " opt2=" + a.opt2 + " opt3=" + a.opt3);
console.log("B: opt1=" + b.opt1 + " opt2=" + b.opt2 + " opt3=" + b.opt3);
console.log("C: opt1=" + c.opt1 + " opt2=" + c.opt2 + " opt3=" + c.opt3);

console.log("R: opt1=" + r.opt1 + " opt2=" + r.opt2 + " opt3=" + r.opt3);
console.log("A === R?: " + (a === r));

"A: opt1=3 opt2=1 opt3=2"
"B: opt1=2 opt2=undefined opt3=2"
"C: opt1=3 opt2=undefined opt3=undefined"

"R: opt1=3 opt2=1 opt3=2"
"A === R?: true"

1. 첫번째 객체에 두번째 객체의 속성을 추가한다. 만약, 속성이 이미 존재하는 경우 덮어쓴다.
2. 첫번째 객체에 속성을 추가하는 것을 전달된 매개변수 객체 개수 만큼 순차적으로 진행한다.
3. 첫번째 매개변수를 반환한다.

기본 옵션 처리에 유용하게 사용됨

// 기본 옵션 처리
function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  };
  var allOptions = jQuery.extend(
    defaultOptions,
    userOptions
  );
  doSomething(allOptions);
}

foo({foo:1}); // allOption === {foo:1, bar:2}
foo({foo:1, baz:1}); // allOption === {foo:1, bar:2, baz:1}

첫번째 객체가 변경되지 않게 하는 경우

var a = {foo: "1", bar: "2"};
var b = {foo: "2", baz: "3"};
var c = jQuery.extend({}, a, b);

console.log(c === a); // false
console.log(c); // opt1: "2", opt2: "2", opt3: "3" 

매개변수가 한개인 경우
jQuery.extend()에 매개변수가 한개인 경우 jQuery 객체 자체가 수정될 객체로 된다.

console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );

// Before: undefined
// After: 1

How does extend() work in jQuery?