rewrap-ajax.js プラグインの概要

私は長い間技術的な記事を書いていませんでしたが、この過程で日常生活の記録が技術的な記事を書くことに取って代わりました。情熱か火か、しかし今はです...

最近私は業界でホイールと呼ばれるJSプラグインを書きました。それが良いかどうかはあなた次第です。誰もがそれをうまく使うかどうか。
もちろん私自身が使用しているため、他のAjaxフレームワークの書き方を借用することはできません。現在のバージョンはバージョン1からの上位統合の結果であるため、十分に理解してください。内部構造については、バージョン 1 から始めることができます。

次に、全体的な設計構造について説明します。バージョン 1 は、nativeAjax を呼び出してメソッド内に配置するだけのメソッドです。 2 番目は ajax 属性です。次のように 2 つは成功した関数で、3 番目はエラー関数です。

nativeAjax(postOption,function(data){
    // 3.1、请求成功回调
    console.log(data);
},function(error){
    // 3.2、请求失败回调,返回HTTP状态码
    console.log(error);
});

まず、それを再カプセル化します。 ajax のサービス属性が固定されている場合、すべての ajax プロパティをオブジェクトにバインドできます。実際、指定されたオブジェクトに直接バインドされている場合は、パラメーターを与えたり取得したりするだけで済み、多くの作業が節約されます。プロセスははるかに単純ですが、柔軟性はあまり高くありません。内部的にカプセル化したい場合は、高い柔軟性と再利用可能な属性が必要なので、関数関数の中に属性を配置し、このポインターを使用して内部で ajax 属性をバインドして呼び出すと同時に、次のことができます。私の理解では、プラグインの再カプセル化はこのバージョンの内部構造の設計パターンです。

バージョン2 rewrap-ajaxで呼び出される外部構造はjqのJQ.fn属性に似ており、チェーン構造のオブジェクト属性メソッドで使用されるため、内部的にはwrap.service(`ajax`を使用します。 <script> , foo) の場合、foo 関数には ajax のサービス属性が含まれており、ajax の get には URL、TYPE、SUCCESS、ERROR の 4 つの属性が含まれます。これら 4 各属性は大文字と小文字の形式をサポートします。この場合、this.success と this.error は、成功したデータ リクエストを呼び出すメソッドとエラー ステータス キャプチャを呼び出すメソッドの 2 つであり、this.success と this.error の両方にパラメータがあります。 </script>

wrap.service('ajax',function ajax() {
    // 支持大小写
    this.URL = "query.do"
    this.TYPE = "GET"
    this.SUCCESS = function(data) {
        var val = data;
        console.log(val)
    };
    this.ERROR = function(err) {
        console.log(err)
    };
});

バージョン 3rewrap-ajax は、バージョン 2 の外部構造とこの書き込みメソッドを維持します。このポインターには、props メソッドとメソッド メソッドという 2 つの追加の関数があります。props メソッドによって内部的に返される構造は、key- のデータです。値のペアの形式。次のような複数の状態... 状態。各

state 状態に対応する値は、配列 [] を使用して保存する必要があります。配列の内部はオブジェクト {} である必要があります。オブジェクトのプロパティは通常の形式である必要があり、オブジェクトの属性に対応する値は、dom ノードからアクセスできる Element 要素 (またはノード ノード、クラス クラス、ID、タグ ラベルなど) である必要があります。

ただし、

methods メソッドの内部構造は通常のオブジェクト呼び出し関数の形式になっており、return で返されるオブジェクト キーは API メソッドの値のカスタム書き込みをサポートしていないことに注意してください。返されたオブジェクトは関数に記述されるため、関数メソッドはパラメーターを受け取ります (このパラメーターは props パイプライン内の state 属性です)。メソッドは次のようにこのポインターを使用して内部的に記述されます: this.el(param).add()

完全な構造:

1 return {
2     State_01: [{ class : ‘.main’, static: 'color', tip: 'message', content: 'container'}],
3     State_02: [{ class : ‘.main’, static: 'color'}],
4     State_03: [{ class : ‘.main’}]
5 }

ここで this

.el (param) メソッド内のパラメータは、パラメータとして props パイプラインを介して流出する state 属性値です。パラメータによって受け取られる結果は、複数の文字列です。文字列は配列 [] の形式で保存でき、これらの文字列はすべてこの API メソッドを持ちます。 this.el() の後の add メソッドは、現在の文字列によって呼び出される add メソッドですが、たとえば、addClass は rewrap-ajax 内の API メソッドであるため、カスタム add を外部から呼び出します。 this.methods 内のカスタマイズされた add メソッドにはパラメーターは必要ありませんが、外部パイプラインの add 呼び出しにパラメーターが必要かどうかは、addClass メソッドに依存することに注意してください (addClass は rewrap-ajax 内の API メソッドです)。したがって、API メソッドは後で公開されます。

これを外部から呼び出す方法は、スコープ

$scope を通じて props 属性とメソッドメソッドを取得することです。外部呼び出しは次のとおりです:

return {
    addClass: function (scope){
        this.el([scope.class,scope.static]).add()
    },
    removeClass: function (scope){
        this.el([scope.class,scope.tip]).remove()
    },
    pushHtml: function (scope){
        this.el([scope.static,scope.class]).push()
    },
    hasClass: function (scope){
        this.el(scope.define.content).has()
    }
}

。

以上がrewrap-ajax.js プラグインの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。