JavaScriptプラグイン作成ガイド

プラグインを作成する前に、プラグインを作成するいくつかのポイントを理解してください.

プラグインが満たす条件

多重化可能なプラグインは、次の条件を満たす必要があります.

プラグイン自体の役割ドメインとユーザの現在の役割ドメインは互いに独立しており、すなわちプラグイン内部のプライベート変数は使用者の環境変数に影響を与えない.

プラグインはデフォルトの設定パラメータを備えなければならない.

プラグインは実装された基本機能を備えているほか、一部のAPIを提供する必要があり、使用者はこのAPIを通じてプラグイン機能のデフォルトパラメータを修正することができ、それによってユーザーのカスタムプラグイン効果を実現することができる.

プラグインは、リスニングエントリを提供し、指定された要素に対してリスニングを行い、この要素とプラグインの応答がプラグイン効果を達成するようにする必要がある.

プラグインはチェーンコールをサポートします.

以下では、カスタムプラグインを実装するために、これらの要件について1つずつ説明します.

1、プラグイングローバル関数

プライベートドメインを実現するには、閉パッケージを使用するのが最善です.プラグインを1つの関数とすることができて、プラグインの内部の変数と関数の私有変数、プラグインを呼び出した後に依然としてその機能を使うことができるため、閉パッケージの作用は関数(プラグイン)の内部の変数のライフサイクルを延長して、プラグインの関数が繰り返し呼び出すことができて、ユーザー自身の作用ドメインに影響しません.
したがって、プラグインのすべての機能を即時実行関数に書く必要があります.

(function () { 
//               
})();

2、プラグインのデフォルトパラメータ

プラグインの主な機能はいくつかのキーパラメータにまとめることができ、これらのキーパラメータを通じてプラグインの主な機能を修正することができ、第3ステップAPI設定のキーパラメータでもある.
デフォルトのパラメータをグローバル関数の一番前に配置します.パラメータ変数はoptionsと呼ばれ、オブジェクトの字面量で割り当てられます.

var options = {
    key1: para1,
    key2: para2,
    key3: para3,
    ...
    keyn: paran
}

keyはプラグイン可能な変数の名前であり、paraはその変数に対応する値である.色を設定するプラグインを作成する必要がある場合は、デフォルトの色は黒で、optionは次のようにします.

var options = {
    color: '#333333'
}

機能部の作成時の呼び出し方法:options.color.

3、プラグインAPI、パラメータ設定と傍受

APIは利用者を指すため、ユーザーがプラグインを呼び出す時にAPIをユーザーに暴露する必要があり、ユーザーのAPIはプラグインによって提供された名前で使用されるため、APIをObjectタイプに設定し、ユーザーはAPIを呼び出すkeyで使用することができ、具体的なコードは以下の通りである.

var api = {
    config: function(ops) {
        //....
        return this;
    },
    listen: function listen(elem) {
        //...
        return this;
    },
    feature1: function() {
        //...
    },
    feature2: function() {
        //...
    }
}
this.pluginName = api;

カスタムパラメータを設定するためにconfigを提供し、listenがプラグインのために傍受するdom操作、featureがプラグインの主な機能であり、optionsパラメータを使用する機能はapiの下に書かなければならない.api.configとapi.listenの2つの関数は、プラグインのチェーン呼び出しを実現するために最後にthisに戻るべきであることに注意してください.
上記のフレームワークでは、configに対して関数を設定する書き方に明確な要求があります.ユーザーがカスタム関数を入力していない場合、デフォルトでは前節のoptionsのパラメータを使用します.ユーザーがconfigパラメータを設定している場合は、ユーザーカスタムパラメータを使用します.

config: function(opts) {
    //      ，        
    if (!opts) return options;
    //     ，  key options         
    for (var key in opts) {
        options[key] = opts[key];
    }
    return this;
}

要素のリスニングlistenに対して、条件を満たすdom要素をすべてリスニングする必要があります.

listen: function listen(elem) {
    //    typeof              ，           
    if (typeof elem === 'string') {
        //    ES5 querySelectorAll    dom  
        var elems = document.querySelectorAll(elem),
            i = elems.length;
        //     listen        dom   
        while (i--) {
            listen(elems[i]);
        }
        return
    }
    //   ，                 

    return this;
}

configとlistenの2つの最も基本的なAPIが完了した後、APIとプラグインの名前を結合する必要があります.

this.pluginName = api;

最も基本的なAPIは以下の通りです.

var api = {
    //      
    config: function(opts) {
        if (!opts) return options;
        for (var key in opts) {
            options[key] = opts[key];
        }
        return this;
    },
    //    
    listen: function listen(elem) {
        if (typeof elem === 'string') {
            var elems = document.querySelectorAll(elem),
                i = elems.length;
            while (i--) {
                listen(elems[i]);
            }
            return
        }
        //           
        return this;
    }
}
// API       
this.pluginName = api;

ユーザーがこのプラグインを使用する場合、次のように呼び出されます.

pluginName.listen('#demo');

必要に応じてパラメータをカスタマイズします.

pluginName.config({
    key: 'para'
}).listen('#demo');
//  config listen    this，        ：
pluginName.listen('#demo').config({
    key: 'para'
});
//       ：
pluginName.config({
        key: 'para'
    })
    .listen('#demo');