jQuery 실전 독서 노트(7장 확장 jQuery)

확장 jQuery는

$에 직접 정의된 실용 함수

jQuery 패키지를 조작하는 방법

1. jQuery 플러그인 개발 가이드
1.1 파일 및 함수 이름 지정

파일 이름에 jquery 접두사 추가

접두어 뒤에 플러그 인의 이름

플러그인의 주 버전 번호와 차 버전 번호(선택 가능)

로.js 종료

1.2 주의$
(function($){
 //
//플러그인 정의
 //
})(jQuery);
1.3 단순화 매개변수 목록
options 산열 값을 사용합니다.
예: complex(valueA, {p7: valueB});
complex(valueA, {
  p3: valueC,
  p4: valueD,
  p7: valueB
});
간소화된 함수 서명:complex(p1,options)
함수에서 $.extend()는 이러한 옵션을 기본값과 결합합니다.
function complex(p1, options) {
  var settings = $.extend({
    option1: defaultValue1,
    option2: defaultValue2,
    option3: defaultValue3
  }, options || {});
//함수 기타 부분
}
2. 사용자 정의 유틸리티 작성
유틸리티 함수는 DOM 요소를 조작하기 위한 것이 아니라 jQuery ($) 속성으로 정의된 함수입니다.
$.say = function(what) { alert('I say ' + what); };
가능: jQuery.say = function(what) { alert('I say ' + what); };
가장 안전한 쓰기:
(function($){
  $.say = function(what) { alert('I say ' + what); };
})(jQuery);
2.1 데이터 조작을 만드는 실용 함수
이러한 실용 함수를 만듭니다: $.toFixedWidth(value, length, fill)
(function($) {
  $.toFixedWidth = function(value, length, fill) {
    var result = (value || '').toString();
    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);
유틸리티에 네임스페이스를 추가하려면 다음과 같이 하십시오.
$.jQiaDataFormatter = {};
$.jQiaDataFormatter.toFixedWidth = function(value, length, fill){...};
2.2 날짜 형식 작성기
구문: $.formatDate(date, pattern)
yyyy
yy
MMMM
MMM
MM
M
dd
d
EEEE
EEE
a
HH
H
hh
h
mm
m
ss
s
S

(function($){
  $.formatDate = function(date,pattern) {
    var result = [];
    while (pattern.length>0) {
      $.formatDate.patternParts.lastIndex = 0;
      var matched = $.formatDate.patternParts.exec(pattern);
      if (matched) {
        result.push($.formatDate.patternValue[matched[0]].call(this,date));
        pattern = pattern.slice(matched[0].length);
      }
      else {
        result.push(pattern.charAt(0));
        pattern = pattern.slice(1);
      }
    }
    return result.join('');
  };

  $.formatDate.patternParts =
    /^(yy(yy)?|M(M(M(M)?)?)?|d(d)?|EEE(E)?|a|H(H)?|h(h)?|m(m)?|s(s)?|S)/;

  $.formatDate.monthNames = [
    'January','February','March','April','May','June','July',
    'August','September','October','November','December'
  ];

  $.formatDate.dayNames = [
    'Sunday','Monday','Tuesday','Wednesday','Thursday','Friday',
    'Saturday'
  ];

  $.formatDate.patternValue = {
    yy: function(date) {
      return $.toFixedWidth(date.getFullYear(),2);
    },
    yyyy: function(date) {
      return date.getFullYear().toString();
    },
    MMMM: function(date) {
      return $.formatDate.monthNames[date.getMonth()];
    },
    MMM: function(date) {
      return $.formatDate.monthNames[date.getMonth()].substr(0,3);
    },
    MM: function(date) {
      return $.toFixedWidth(date.getMonth()+1,2);
    },
    M: function(date) {
      return date.getMonth()+1;
    },
    dd: function(date) {
      return $.toFixedWidth(date.getDate(),2);
    },
    d: function(date) {
      return date.getDate();
    },
    EEEE: function(date) {
      return $.formatDate.dayNames[date.getDay()];
    },
    EEE: function(date) {
      return $.formatDate.dayNames[date.getDay()].substr(0,3);
    },
    HH: function(date) {
      return $.toFixedWidth(date.getHours(),2);
    },
    H: function(date) {
      return date.getHours();
    },
    hh: function(date) {
      var hours = date.getHours();
      return $.toFixedWidth(hours>12 ? hours - 12 : hours,2);
    },
    h: function(date) {
      return date.getHours()%12;
    },
    mm: function(date) {
      return $.toFixedWidth(date.getMinutes(),2);
    },
    m: function(date) {
      return date.getMinutes();
    },
    ss: function(date) {
      return $.toFixedWidth(date.getSeconds(),2);
    },
    s: function(date) {
      return date.getSeconds();
    },
    S: function(date) {
      return $.toFixedWidth(date.getMilliseconds(),3);
    },
    a: function(date) {
      return date.getHours() < 12 ? 'AM' : 'PM';
    }
  };

  $.toFixedWidth = function(value,length,fill) {
    var result = (value || '').toString();
    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);

3. 새로운 포장기 추가 방법
생성 모드: $.fn.wrapperFunctionName = function(params){ fucntion-body };
예:
(function($){
  $.fn.makeItblue = function() {
    return this.css('color', 'blue');
  };
})(jQuery);
참고: $.fn은 대상 내부prototype 속성의 별명입니다.
경고: 포장기 주체 부분의 함수 상하문 (this)은 포장 집합을 가리키지만, 이 함수에서 내연 함수를 설명할 때, 모든 내연 함수는 자신의 함수 상하문이 있습니다.이때 this를 사용하면 조심해야 합니다!
새로운 포장기 방법을 정의할 때 매우 중요한 원칙이 하나 더 있다. 특정한 값을 되돌려주지 않으면 함수는 항상 포장 집합을 되돌려주는 값으로 해야 한다.이것은 새로운 방법이 모든 jQuery 방법 체인에 참여할 수 있도록 합니다.
각 포장 요소를 개별적으로 처리하는 모드:
(function($) {
  $.fn.someNewMethod = function() {
    return this.each(function() {
     //
//this는 단일 DOM 요소를 가리킵니다.
     //
    });
  };
})(jQuery);
예:
(function($) {
  $.fn.makeItBlueOrRed = function() {
    return this.each(function() {
      $(this).css('color', $(this).is('[id]') ? 'blue' : 'red');
    });
  };
})(jQuery);
이 예는 단지 시범을 보일 뿐 실제로는 다음과 같이 간소화할 수 있다.
(function($) {
  $.fn.makeItBlueOrRed = function() {
    return this.css('color', function() {
      return $(this).is('[id]') ? 'blue' : 'red');
    });
  };
})(jQuery);
3.1 포장기 방법에 여러 가지 조작 적용
예: setReadOnly(state) state는true이고 문자의 불투명도를 0.5로 설정하면 읽기 전용입니다.
(function($){
  $.fn.setReadOnly = function(readonly) {
    return this.filter('input:text')
      .attr('readOnly', readonly)
      .css('opacity', readonly ? 0.5 : 1.0)
      .end();
  };
})(jQuery);
3.2 포장기 방법에 보관된 상태
메서드 구문: options
options:
  firstControl
  lastControl
  nextControl
  photoElement
  playControl
  previousControl
  transformer
delay - ms, 기본 3000
사용법:
$('#thumbnailsPane img').photomatic({
  photoElement: '#photoDisplay',
  previousControl: '#previousButton',
  nextControl: '#nextButton',
  firstControl: '#firstButton',
  lastControl: '#lastButton',
  playControl: '#playButton',
  delay: 1000
});
구현:

(function($){

  $.fn.photomatic = function(options) {
    var settings = $.extend({
      photoElement: 'img.photomaticPhoto',
      transformer: function(name) {
                     return name.replace(/thumbnail/,'photo');
                   },
      nextControl: null,
      previousControl: null,
      firstControl: null,
      lastControl: null,
      playControl: null,
      delay: 3000
    },options||{});

    function showPhoto(index) {
      $(settings.photoElement)
        .attr('src',
              settings.transformer(settings.thumbnails$[index].src));
      settings.current = index;
    }

    settings.current = 0;
    settings.thumbnails$ = this.filter('img');
    settings.thumbnails$
      .each(
        function(n){ $(this).data('photomatic-index',n); }
      )
      .click(function(){
        showPhoto($(this).data('photomatic-index'));
      });

    $(settings.photoElement)
      .attr('title','Click for next photo')
      .css('cursor','pointer')
      .click(function(){
        showPhoto((settings.current+1) % settings.thumbnails$.length);
      });

    $(settings.nextControl).click(function(){
      showPhoto((settings.current+1) % settings.thumbnails$.length);
    });

    $(settings.previousControl).click(function(){
      showPhoto((settings.thumbnails$.length+settings.current-1) %
                settings.thumbnails$.length);
    });

    $(settings.firstControl).click(function(){
      showPhoto(0);
    });

    $(settings.lastControl).click(function(){
      showPhoto(settings.thumbnails$.length-1);
    });

    $(settings.playControl).toggle(
      function(event){
        settings.tick = window.setInterval(
          function(){ $(settings.nextControl).triggerHandler('click'); },
          settings.delay);
        $(event.target).addClass('photomatic-playing');
        $(settings.nextControl).click();
      },
      function(event){
        window.clearInterval(settings.tick);
        $(event.target).removeClass('photomatic-playing');
      });

    showPhoto(0);
    return this;
  };

})(jQuery);