JavaScript-jQuery(六)拡張

原文出典: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を拡張してカスタムメソッドを実装できます.将来、ハイライトされた論理を変更するには、拡張コードを1つ変更するだけです.この方式は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();

そうでなければ,ユーザが呼び出すと,上のコードを2行に分解せざるを得ない.
しかし、このバージョンは完璧ではありません.ハイライトした色を自分で指定したいユーザーもいますが、どうすればいいですか?
メソッドにパラメータを追加して、ユーザー自身がパラメータをオブジェクトに渡すことができます.2番目のバージョンの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の機能を拡張するために使用できます.
デフォルト値の処理では、単純な&&および||短絡オペレータを使用して、常に有効な値を得ることができます.
もう1つの方法は、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を勉強しますか?
まず、JavaScriptを学び、基本的なHTMLを理解します.

小結

jQueryオブジェクトを拡張する機能は非常に簡単ですが、jQueryの原則に従い、作成された拡張メソッドはチェーン呼び出しをサポートし、デフォルト値を備え、特定の要素をフィルタリングすることができ、拡張メソッドがjQuery自体のメソッドと変わらないようにします.