JavaScript-jQuery(6) 확장

출처:https://www.liaoxuefeng.com/
확장성
우리가 jQuery 대상을 사용할 때, jQuery 대상은 DOM을 조작할 수 있고, 체인식 조작을 지원하기 때문에 사용하기에 매우 편리하다.
그러나 jQuery에 내장된 방법은 모든 수요를 만족시킬 수 없다.예를 들어, 일부 DOM 요소를 강조 표시하려면 jQuery를 사용하여 다음을 수행할 수 있습니다.

$('span.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');

$('p a.hl').css('backgroundColor', '#fffceb').css('color', '#d85030');

자꾸 중복 코드를 쓰면 안 돼요. 만약에 나중에 글씨체를 수정해야 한다면 더 귀찮아요. 통일해서 highlight() 방법을 쓸 수 있을까요?

$('span.hl').highlight();

$('p a.hl').highlight();

답은 긍정적이다.사용자 정의 방법을 실현하기 위해 jQuery를 확장할 수 있습니다.앞으로 하이라이트 논리를 수정하려면 확장 코드 하나만 수정하면 된다.이런 방식을 jQuery 플러그인 작성이라고도 부른다.
jQuery 플러그인 작성
jQuery 대상에 새 방법을 연결하는 것은 확장 $.fn 대상을 통해 이루어집니다.첫 번째 확장을 작성합니다highlight1().

$.fn.highlight1 = function () {
    // this      jQuery  :
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
}

함수 내부 this 가 호출될 때 jQuery 대상으로 귀속되어 있기 때문에 함수 내부 코드는 모든 jQuery 대상을 정상적으로 호출할 수 있습니다.
HTML 구조:

<div id="test-highlight1">
    <p>   <span>jQueryspan>p>
    <p><span>jQueryspan>       <span>JavaScriptspan> 。p>
div>

highlight1()의 효과 테스트:

'use strict';

$('#test-highlight1 span').highlight1();
(no output)
jQuery 소개
jQuery는 현재 가장 유행하는 JavaScript 라이브러리입니다.
세심한 구두가 발견됐을 텐데 왜 마지막에return this;?jQuery 객체는 체인 작업을 지원하기 때문에 우리가 직접 작성한 확장 방법도 체인식으로 계속할 수 있습니다.

$('span.hl').highlight1().slideDown();

그렇지 않으면 사용자가 호출할 때 위의 코드를 두 줄로 뜯어야만 한다.
하지만 이 판본은 완벽하지 않다.어떤 사용자는 밝은 색깔이 스스로 지정되기를 원하는데, 어떻게 해야 합니까?
우리는 방법에 파라미터를 추가하여 사용자 스스로 파라미터를 대상으로 전송할 수 있다.그래서 우리는 두 번째 버전highlight2()이 생겼다.

$.fn.highlight2 = function (options) {
    //         :
    // options undefined
    // options    key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
}

다음 HTML 구조의 경우

<div id="test-highlight2">
    <p>   <span>jQueryspan> <span>Pluginspan>p>
    <p>  <span>jQueryspan> <span>Pluginspan>      <span>jQueryspan>   。p>
div>

매개변수가 있는 highlight2():

'use strict';

$('#test-highlight2 span').highlight2({
    backgroundColor: '#00a8e6',
    color: '#ffffff'
});
(no output)
jQuery Plugin 소개
jQuery Plugin을 작성하여 jQuery 기능을 확장할 수 있습니다.
기본값 처리에 있어서 우리는 간단한 && 과 || 단락 조작부호를 사용해서 항상 유효한 값을 얻을 수 있다.
또 다른 방법은 jQuery가 제공하는 보조 방법$.extend(target, obj1, obj2, ...)을 사용하는 것이다. 이것은 여러 개의 Object 대상의 속성을 첫 번째 target 대상에 합쳐서 같은 이름의 속성을 만나면 항상 뒤에 있는 대상의 값을 사용한다. 즉, 뒤로 갈수록 우선순위가 높다.

//           options     {}    :
var opts = $.extend({}, {
    backgroundColor: '#00a8e6',
    color: '#ffffff'
}, options);

이어 사용자는highlight2()에 대해 의견을 제시했다. 매번 호출할 때마다 사용자 정의 설정을 전송해야 하는데 내가 스스로 부족한 값을 설정하고 이후의 호출은 매개 변수가 없는 highlight2()를 통일적으로 사용할 수 있습니까?
즉, 우리가 설정한 기본값은 사용자가 수정할 수 있도록 허용해야 한다.
기본값은 어디에 두는 것이 비교적 적합합니까?전역 변수를 놓는 것은 틀림없이 적합하지 않을 것이다. 가장 좋은 장소는 $.fn.highlight2이라는 함수 대상 자체이다.
그래서 최종판highlight()이 드디어 탄생했다.

$.fn.highlight = function (options) {
    //            :
    var opts = $.extend({}, $.fn.highlight.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}

//      :
$.fn.highlight.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}

이번에 사용자는 마침내 만족했다.사용자가 사용할 때 기본값을 한 번에 설정하기만 하면 됩니다.

$.fn.highlight.defaults.color = '#fff';
$.fn.highlight.defaults.backgroundColor = '#000';

그리고 아주 간단하게 highlight()를 호출할 수 있습니다.
HTML 구조:

<div id="test-highlight">
    <p>    <span>jQueryspan> <span>Pluginspan>p>
    <p>  <span>jQueryspan> <span>Pluginspan>，   <span>   span>，       <span>   span>，       <span>   span>。p>
div>

기본값을 수정하는 효과를 실측해 보십시오.

'use strict';

$.fn.highlight.defaults.color = '#659f13';
$.fn.highlight.defaults.backgroundColor = '#f2fae3';
$('#test-highlight p:first-child span').highlight();
$('#test-highlight p:last-child span').highlight({
    color: '#dd1144'
});
(no output)
jQuery Plugin 작성 방법
기본값을 설정하고 사용자가 기본값을 수정하거나 런타임에 다른 값을 가져올 수 있도록 jQuery Plugin을 작성합니다.
최종적으로, 우리는 jQuery 플러그인을 작성하는 원칙을 얻어야 한다.

$.fn에 귀속 함수를 주고 플러그인의 코드 논리를 실현한다.

플러그인 함수는 마지막return this;으로 체인 호출을 지원해야 한다.

플러그인 함수는 기본값이 있어야 $.fn..defaults에 귀속됩니다.

사용자가 호출할 때 기본값을 덮어쓰기 위해 설정값을 전송할 수 있습니다.

특정 요소에 대한 확장
우리는 jQuery 대상의 일부 방법이 특정DOM 요소에만 작용할 수 있다는 것을 알고 있다. 예를 들어 submit() 방법은 form만을 대상으로 할 수 있다.만약 우리가 작성한 확장자가 특정 유형의 DOM 요소만 대상으로 할 수 있다면 어떻게 써야 합니까?
jQuery의 선택기 지원 filter() 방법으로 필터를 하는 것을 기억하십니까?우리는 이 방법을 빌려 특정 요소에 대한 확장을 실현할 수 있다.
예를 들어, 지금 우리는 모든 외부 체인을 가리키는 하이퍼링크에 점프 힌트를 더해야 한다. 어떻게 해야 합니까?
먼저 사용자가 호출한 코드를 작성합니다.

$('#main a').external();

그런 다음 위의 방법에 따라 external 확장을 작성합니다.

$.fn.external = function () {
    // return   each()    ，      :
    return this.filter('a').each(function () {
        //   : each()        this   DOM  !
        var a = $(this);
        var url = a.attr('href');
        if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
            a.attr('href', '#0')
             .removeAttr('target')
             .append(' ')
             .click(function () {
                if(confirm('      ' + url + '？')) {
                    window.open(url);
                }
            });
        }
    });
}

HTML 구조:

<div id="test-external">
    <p>    <a href="http://jquery.com">jQuerya>？p>
    <p>  ，    <a href="/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000">JavaScripta>，      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTMLa>。p>
div>

실측 외부 체인 효과:

'use strict';

$('#test-external a').external();
(no output)
어떻게 jQuery를 공부합니까?
우선 자바스크립트를 배우고 기본 HTML을 알아야 한다.
소결
jQuery 대상을 확장하는 기능은 매우 간단하지만, 우리는 jQuery의 원칙에 따라 작성된 확장 방법은 체인 호출을 지원하고, 기본값과 특정 요소를 필터할 수 있기 때문에 확장 방법은 jQuery 자체의 방법과 별 차이가 없어 보인다.