es6 でのプロキシの使用法は何ですか

es6 では、プロキシはオブジェクトに対する指定された操作をインターセプトするために使用され、外部アクセスをフィルタリングして書き換えることができます。プロキシは、オブジェクトへの外部アクセスを防ぐために、ターゲット オブジェクトの前に「インターセプト」レイヤーを設定します。すべてがこのインターセプト層を通過する必要があり、構文は「new Proxy(target, handler);」です。

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 でのプロキシの使用法は何ですか

プロキシは、ターゲット オブジェクトの前に「インターセプト」層を設定するものとして理解できます。オブジェクトへの外部アクセスは、最初にこの層を通過する必要があります。したがって、外部アクセスをフィルタリングして書き換えるメカニズムが提供されています。 Proxy という言葉の本来の意味はエージェントですが、ここでは特定の業務を「代理」するという意味で使用されており、「代理人」と訳すこともできます。以下は、公式ドキュメントからのプロキシの定義です。

let p = new Proxy(target, handler);

target: プロキシによってラップする必要があるターゲット オブジェクト (ネイティブ配列、関数、または別のプロキシなど、任意のタイプのオブジェクトにすることができます)。

handler: 操作が実行されるときのエージェントの動作を定義する関数をプロパティを持つオブジェクト (ある種のトリガーとして理解できます)。

ES6 は、オブジェクトに対する指定された操作をインターセプトするために使用される新しい機能、プロキシを提案します。この機能はとても便利です。例を挙げると:

var engineer = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
 set: function (receiver, property, value) {
  console.log(property, 'is changed to', value);
  receiver[property] = value;
 }
};
engineer = Proxy(engineer, interceptor);

エンジニア オブジェクトは、プロキシ Proxy によって構築されたプロキシ オブジェクトに置き換えられます。プロキシに渡される 2 番目のパラメータは、プロセッサ関数です。プロセッサ関数には、get、セットおよびその他のメソッド。ここの set メソッドは、プロキシ オブジェクトに対して実行されるすべてのプロパティ割り当て操作をインターセプトできます。

次の割り当てを実行すると:

engineer.salary = 60;

はプロセッサをトリガーし、情報を出力します:

salary is changed to 60

プロキシ オブジェクトに値が割り当てられるたびに、プロセッサ関数が呼び出されます。 、そのため、特定の問題をデバッグするために使用できます。

もちろん、Proxy はデバッグのためだけに生まれたわけではなく、Sencha Touch や AngularJS を使用したことがある場合は、これらのフレームワークにデータ モデル バインディングと同様の機能があることがわかります。

著者は Sencha Touch でプロキシを使用しました。コードは次のとおりです:

proxy:{//数据代理
//       type:'localstorage',
//       id:'bills',
    // limitParam:'limit',
    // pageParam:'page',
    //将用户代理改为sql，通过websql来解决localstorage的5MB存储上限的问题
    type:'sql',
    database:'myDB',
    table:'bill',
},
//filters:[{property:"kind",value:"无"}],//过滤属性
listeners:{
    removerecords:function(){
      console.log("数据被删除");
    },
    addrecords:function(){
      console.log("数据被追加");
    },
    updaterecord:function(){
      console.log("数据被修改");
    },
}

ご覧のとおり、Angular で使用されているものとは異なり、セッターとゲッターを監視するメソッドが使用されています。汚いテストだ。 。プロキシを使用すると、これらの特定の検出方法を簡素化し、データ モデル バインディングをシンプルにすることができます。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がes6 でのプロキシの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。