JavaScriptプロキシのイントロ

オブジェクトまたは配列の値を制御できるようにしたい状況に遭遇したことはありますか？特定の種類のデータをブロックし、データをオブジェクトに保存する前にデータを検証することもできます。着信データや発信データに何らかの形で反応したいとしますか？たとえば、データが変更されるため、結果を表示することにより、DOMを更新するか、結果を表示することでスタイルを変更するクラスを交換する必要があります。 VueやReactなどのフレームワークの機能を必要とするだけで、新しいアプリを開始したくない単純なページのアイデアや一部に取り組みたいと思ったことはありませんか？

その後、JavaScriptプロキシはまさにあなたが必要とするものかもしれません！

簡単な紹介

最初に声明を出しましょう。私はフロントエンドテクノロジーのUI開発者です。説明されている非JavaScript集中的側面のように、それは「大きな意見の相違」の一部です。ブラウザで一貫性のある美しいプロジェクトのみを作成し、すべての関連する機能を作成したいと思います。したがって、より純粋なJavaScript機能に関しては、私は深くならない傾向があります。

しかし、私はまだ研究をするのが大好きで、新しい学習リストに追加するものを常に探しています。 JavaScriptプロキシは興味深いトピックであることがわかります。なぜなら、基本を振り返るだけで、この機能を活用する方法について多くの可能性が開かれるからです。それでも、一見すると、コードはすぐに重くなる可能性があります。もちろん、それはすべてあなたのニーズに依存します。

プロキシオブジェクトの概念は、かなり長い間存在しています。私の研究では、数年前からの参照を見つけることができます。ただし、Internet Explorerでサポートされていないため、私のリストでは高くありません。それに比べて、それは長年にわたって他のすべてのブラウザで非常にサポートされてきました。これは、VUE 3が最新のVUEプロジェクトで使用されているため、VUE 3がInternet Explorer 11と互換性がない理由の1つです。

では、プロキシオブジェクトは正確には何ですか？

プロキシオブジェクト

MDNはプロキシオブジェクトを次のように説明します。

[…]そのオブジェクトの基礎となる操作を傍受および再定義する別のオブジェクトのプロキシを作成できます。

一般的な考え方は、オブジェクトを使用するときに発生する典型的なアクションを制御できる機能を備えたオブジェクトを作成できるということです。最も一般的な2つは、オブジェクトに保存されている値を取得および設定することです。

 const myobj = {
  MyKey：「価値」
}

console.log（myobj.mykey）; //キーの値を「取得」、出力「値」
myobj.mykey = 'updated'; //キーの値を「更新」するようにする

したがって、プロキシオブジェクトでは、「トラップ」を作成して、これらの操作を傍受し、達成したい機能を実行します。このようなトラップが最大13個あります。以下に説明する簡単な例にはすべてが必要であるわけではないため、私は必ずしもこれらすべての落とし穴をカバーしているわけではありません。繰り返しますが、コンテンツを作成する特定のコンテキストに必要なものに依存します。私を信じて、基本をマスターするだけで大​​いに役立つことができます。

上記の例を拡張してプロキシを作成するために、次のことを行います。

 const myobj = {
  MyKey：「価値」
}

const handler = {
  get：function（target、prop）{
    ターゲットを返す[prop];
  }、
  セット：function（ターゲット、プロップ、値）{
    ターゲット[prop] = value;
    trueを返します。
  }
}

const proxy = new Proxy（Myobj、Handler）;

console.log（proxy.mykey）; //キーの値を「取得」、出力「値」
proxy.mykey = 'updated'; //キーの値を「更新」するようにする

まず、標準オブジェクトから始めましょう。次に、一般にトラップとして知られているハンドラー関数を保持するハンドラーオブジェクトを作成します。これらは、従来のオブジェクトで実行できるアクションを表します。この場合、変更せずにコンテンツを渡すだけです。その後、ターゲットオブジェクトとハンドラーオブジェクトを使用してコンストラクターを使用してプロキシを作成します。その時点で、プロキシオブジェクトを参照して、元のターゲットオブジェクトMyOBJのプロキシとなる値を取得および設定できます。

セットトラップの最後にtrueを返すことに注意してください。これは、設定値を成功させる必要があることをプロキシに通知することを目的としています。場合によっては、[検証エラーを考慮して）設定値を防ぐ場合は、falseを返す必要があります。これにより、コンソールエラーが発生し、TypeRrorが出力されます。

さて、このパターンを覚えておくべきことの1つは、元のターゲットオブジェクトがまだ利用可能であることです。これは、プロキシをバイパスし、プロキシを使用せずにオブジェクトの値を変更できることを意味します。プロキシオブジェクトの使用について読んでいる間、この問題に役立ついくつかの有用なパターンを見つけました。

 myobj = {
  MyKey：「価値」
}

const handler = {
  get：function（target、prop）{
    ターゲットを返す[prop];
  }、
  セット：function（ターゲット、プロップ、値）{
    ターゲット[prop] = value;
    trueを返します。
  }
}

myobj = new Proxy（Myobj、Handler）;

console.log（myobj.mykey）; //キーの値を「取得」、出力「値」
myobj.mykey = 'updated'; //キーの値を「更新」するようにする

このモードでは、プロキシコンストラクターのターゲットオブジェクトを参照しながら、ターゲットオブジェクトをプロキシオブジェクトとして使用します。はい、それだけです。これは機能しますが、何が起こっているのか混乱するのは簡単です。プロキシコンストラクターにターゲットオブジェクトを作成しましょう。

 const handler = {
  get：function（target、prop）{
    ターゲットを返す[prop];
  }、
  セット：function（ターゲット、プロップ、値）{
    ターゲット[prop] = value;
    trueを返します。
  }
}

const proxy = new Proxy（{
  MyKey：「価値」
}、ハンドラー）;

console.log（proxy.mykey）; //キーの値を「取得」、出力「値」
proxy.mykey = 'updated'; //キーの値を「更新」するようにする

実際、必要に応じて、コンストラクターにターゲットオブジェクトとハンドラーオブジェクトを作成できます。

 const proxy = new Proxy（{
  MyKey：「価値」
}、{
  get：function（target、prop）{
    ターゲットを返す[prop];
  }、
  セット：function（ターゲット、プロップ、値）{
    ターゲット[prop] = value;
    trueを返します。
  }
}）;

console.log（proxy.mykey）; //キーの値を「取得」、出力「値」
proxy.mykey = 'updated'; //キーの値を「更新」するようにする

実際、これは以下の例で最も頻繁に使用するパターンです。ありがたいことに、プロキシオブジェクトを作成する方法は柔軟です。自分に合ったモードを使用するだけです。

基本的なデータ検証からFETCHを使用してフォームデータの更新に至るまで、JavaScriptプロキシの使用に関する例をいくつか紹介します。これらの例は、JavaScriptプロキシの基本をカバーしていることを忘れないでください。必要に応じて非常に迅速に掘り下げることができます。場合によっては、プロキシオブジェクトに通常のJavaScriptコードを作成して、通常のJavaScript操作を実行するだけです。データをより制御することにより、いくつかの一般的なJavaScriptタスクを拡張する方法と考えてください。

簡単な質問の簡単な例

私の最初の例では、私がいつも思っていたことは、かなりシンプルで奇妙なコーディングインタビューの質問であると考えています。私はこの質問が好きではなく、インタビュー中にこの質問をしたこともありません。この種のことの流れに反対するのが好きな人として、私は非伝統的な解決策を試しました。ご存知のように、楽しみのためだけにそれを捨てるために、ソリューションの1つは素晴らしいフロントエンドの楽しみです。また、プロキシの使用方法を示す簡単な例も提供します。

入力を入力すると、入力されたものが以下に逆に印刷されていることがわかります。明らかに、使用できる文字列を反転する多くの方法があります。ただし、私の奇妙な反転法を見てみましょう。

 const Reverse = new Proxy（
  {
    価値： ''
  }、
  {
    セット：function（ターゲット、プロップ、値）{
      ターゲット[prop] = value;

      document.QuerySeLectorall（ '[data-reverse]'）。foreach（item => {{
        let el = document.createelement（ 'div'）;
        el.innerhtml = '\ u {202e}' value;
        item.innertext = el.innerhtml;
      }）;

      trueを返します。
    }
  }
））

document.QuerySelector（ 'input'）。AddEventListener（ 'input'、e => {
  reverse.value = e.target.value;
}）;

まず、新しいプロキシを作成します。ターゲットオブジェクトは、入力に入力されたものをすべて保持するシングルキー値です。 Get Trapは存在しません。なぜなら、単純なパススルーだけが必要であるため、実際にバインドする機能がないためです。この場合、何も必要ありません。これについては後で説明します。

セットトラップには、実行する機能がいくつかあります。通常のようにターゲットオブジェクトの値キーとして値が設定されている単純なパススルーがまだあります。次に、データリバースデータ属性を持つページ上のすべての要素を探すquerySeLectorallがあります。これにより、ページ上の複数の要素を一度に見つけて更新できます。これにより、誰もが見るのが大好きなフレームワークのような結合操作が得られます。これは、適切な双方向結合タイプの場合を可能にするために、ポジショニング入力に更新することもできます。

これは、私の風変わりな弦の弦が作用する場所です。 divがメモリで作成され、文字列で要素のinnerhtmlに更新されます。文字列の最初の部分では、実際にすべてをその後逆にする特別なユニコード10進コードを使用し、右から左になります。次に、ページ上の実際の要素のインターテキストは、インメモリーdivの内側のhtmlを取得します。これは、入力に何かを入力するたびに実行されます。したがって、データリバース属性を持つすべての要素が更新されます。

最後に、ターゲットオブジェクトの値キーを入力値（つまり、イベントのターゲット）によって設定する入力にイベントリスナーを設定します。

最後に、値をオブジェクトに設定することにより、ページのDOMで副作用を実行する非常に簡単な例。

リアルタイムで入力値をフォーマットします

一般的なUIパターンは、文字や数値文字列よりも正確なシーケンスに入力値をフォーマットすることです。この例は電話入力です。時々、タイプされた電話番号が電話番号のように見える場合、見た目も気分も良くなります。ただし、トリックは、入力値をフォーマットする場合、データの非形式バージョンが必要になる場合があることです。

これは、JavaScriptプロキシにとって簡単な作業です。

入力に番号を入力すると、標準の米国の電話番号としてフォーマットされます（例（123）456-7890）。上記の逆の文字列の例と同じように、電話番号もプレーンテキストの入力の下に表示されることに注意してください。このボタンは、データのフォーマットされたバージョンと非フルマットバージョンの両方をコンソールに出力します。

したがって、ここにプロキシのコードがあります：

 const phone = new Proxy（
  {
    _クリーン： ''、
    番号： ''、
    clean（）{
      this._clean;
    }
  }、
  {
    get：function（target、prop）{
      if（！prop.startswith（ '_'））{
        ターゲットを返す[prop];
      } それ以外 {
        「エントリが見つかりません！」を返します。
      }
    }、
    セット：function（ターゲット、プロップ、値）{
      if（！prop.startswith（ '_'））{
        Target._Clean = value.Replace（/\ d/g、 ''）.Substring（0、10）;

        constセクション= {
          エリア：ターゲット._CLEAN.SUBSTRING（0、3）、
          プレフィックス：Target._Clean.Substring（3、6）、
          行：ターゲット._CLEAN.SUBSTRING（6、10）
        }

        Target.Number =
          Target._Clean.Length> 6？ `（$ {sections.area}）$ {sections.prefix}  -  $ {sections.line}`：
            Target._Clean.Length> 3？ `（$ {sections.area}）$ {sections.prefix}`：
              Target._Clean.Length> 0？ `（$ {sections.area}`： '';

        document.queryselectorall（ '[data-phone_number]'）。foreach（item => {
          if（item.tagname === 'input'）{
            item.value = target.number;
          } それ以外 {
            item.innertext = target.number;
          }
        }）;

        trueを返します。
      } それ以外 {
        falseを返します。
      }
    }
  }
）;

この例にはもっとコードがありますので、分解しましょう。最初の部分は、プロキシで内部的に初期化しているターゲットオブジェクトです。 3つの側面があります。

 {
  _クリーン： ''、
  番号： ''、
  clean（）{
    this._clean;
  }
}、

最初のキー_Cleanは、データの未処理バージョンを保持する変数です。従来の可変命名パターンから始まり、「プライベート」として扱います。通常の状況では利用できないようにしたいと考えています。より深く進むにつれて、これをもっと紹介します。

2番目のキー番号は、フォーマットされた電話番号値を保存するだけです。

3番目の「キー」は、名前がきれいなGET関数です。これにより、プライベート_Clean変数の値が返されます。この場合、その価値を返すだけですが、これは必要に応じて他の操作を行う機会を提供します。これは、プロキシゲッターのプロキシゲッターのようなものです。これは奇妙に思えるかもしれませんが、データを制御する簡単な方法を提供します。特定のニーズに応じて、これはこの状況に対処するためのかなり簡単な方法です。ここでは簡単な例では機能しますが、追加の手順が必要になる場合があります。

これがプロキシの取得トラップです。

 get：function（target、prop）{
  if（！prop.startswith（ '_'））{
    ターゲットを返す[prop];
  } それ以外 {
    「エントリが見つかりません！」を返します。
  }
}、

最初に、着信小道具またはオブジェクトキーをチェックして、アンダースコアから始まっていないかどうかを判断します。アンダースコアから始まっていない場合は、返すだけです。アンダースコアから始まる場合、エントリが見つからなかったことを示す文字列を返します。このタイプの否定的なリターンは、必要に応じてさまざまな方法で処理できます。文字列を返したり、エラーを返したり、副作用が異なるコードを実行します。特定の状況に完全に依存します。

私の例で注意すべきことの1つは、プロキシのプライベート変数と見なされるものと使用される可能性のある他のプロキシトラップに対処しないということです。このデータをより完全に保護するには、[defineProperty]（ https://www.php.cn/link/cd69510f4a69bc0ef6ba50431b9d546またはownkeysなどの他の落とし穴を考慮する必要があります。プロキシを使用する方法。

これは、この例でほとんどの魔法が起こる場所です。

セット：function（ターゲット、プロップ、値）{
  if（！prop.startswith（ '_'））{
    Target._Clean = value.Replace（/\ d/g、 ''）.Substring（0、10）;

    constセクション= {
      エリア：ターゲット._CLEAN.SUBSTRING（0、3）、
      プレフィックス：Target._Clean.Substring（3、6）、
      行：ターゲット._CLEAN.SUBSTRING（6、10）
    }

    Target.Number =
      Target._Clean.Length> 6？ `（$ {sections.area}）$ {sections.prefix}  -  $ {sections.line}`：
        Target._Clean.Length> 3？ `（$ {sections.area}）$ {sections.prefix}`：
          Target._Clean.Length> 0？ `（$ {sections.area}`： '';

    document.queryselectorall（ '[data-phone_number]'）。foreach（item => {
      if（item.tagname === 'input'）{
        item.value = target.number;
      } それ以外 {
        item.innertext = target.number;
      }
    }）;

    trueを返します。
  } それ以外 {
    falseを返します。
  }
}

まず、プロキシのプライベート変数を同じチェックします。私は他の種類の小道具を実際にテストしていませんが、ここでこれを行うことを検討したいと思うかもしれません。プロキシターゲットオブジェクトの番号キーのみが調整されると仮定しています。

で渡された値（入力された値）は、数値文字以外のすべてを除去し、_Cleanキーに保存します。この値は、プロセス全体で使用され、フォーマットされた値に再構築されます。基本的に、入力するたびに、文字列全体が予想される形式にリアルタイムで再構築されます。サブストリングメソッドは、数値を10桁の数値にロックします。

次に、米国の電話番号の内訳に基づいて、電話番号のさまざまな部分を保存するセクションオブジェクトを作成します。 _Clean変数の長さが増加すると、その時点で見たい形式のパターンに数値を更新します。

QuerySeLectorAllは、Data-Phone_Number Data属性を持つ要素を探しており、foreachループを介して実行します。要素が値を更新するための入力である場合、他の要素のInnertextが更新されます。これは、テキストが入力の下に表示される方法です。そのデータ属性を使用して別の入力要素を配置したい場合は、その値がリアルタイムで更新されます。これは、要件に応じて、片道または双方向のバインディングを作成する方法です。

最後に、trueを返して、すべてが順調に進んでいることを代理人に知らせてください。入ってくる小道具またはキーがアンダースコアで始まる場合、falseを返します。

最後に、この作業を行うイベントリスナー：

 document.queryselectorall（ 'input [data-phone_number]'）。foreach（item => {
  item.addeventlistener（ 'input'、（e）=> {
    Phone.Number = E.Target.Value;
  }）;
}）;

document.QuerySelector（ '＃get_data'）。AddEventListener（ 'click'、（e）=> {
  console.log（phone.number）; //（123）456-7890
  console.log（phone.clean）; // 1234567890
}）;

最初のグループは、特定のデータ属性を使用してすべての入力を探し、イベントリスナーを追加します。各入力イベントについて、プロキシの番号キー値は現在入力されている値で更新されます。送信するたびに入力値をフォーマットするため、数字ではない文字を削除します。

2セットのデータを検索するボタンの2番目のセット（必要に応じて）とコンソールへの出力。これは、必要なデータを要求するコードを書く方法を示しています。うまくいけば、Phone.CleanがターゲットオブジェクトのGet Proxy関数を参照していることが明らかになり、オブジェクトの_Clean変数を返します。 Phone.clean（）のような関数とは呼ばれないことに注意してください。これは、プロキシのGet Proxyとして機能するためです。

アレイに番号を保存します

オブジェクトの代わりにプロキシでターゲット「オブジェクト」として配列を使用できます。それは配列になるので、考慮すべきことがいくつかあります。 Array（Push（）など）の機能は、プロキシのセッタートラップで何らかの形で処理されます。また、この場合、ターゲットオブジェクトの概念にカスタム関数を作成しても実際には機能しません。ただし、ターゲットとしての配列に関係する便利なことがいくつかあります。

もちろん、アレイに番号を保存することは新しいことではありません。明らかに。ただし、重複した値を許可せず、数字のみを許可するなど、この桁のストレージアレイにいくつかのルールを追加します。また、ソート、合計、平均化、クリアの値などの出力オプションも提供します。次に、これらすべてを制御する小さなユーザーインターフェイスを更新します。

以下はプロキシオブジェクトです。

 const numbers = new Proxy（[]、
  {
    get：function（target、prop）{
      message.classlist.remove（ 'error'）;

      if（prop === 'sort'）return [... target] .sort（（a、b）=> a -b）;
      if（prop === 'sum'）return [... target] .reduce（（a、b）=> ab）;
      if（prop === 'Average'）return [... target] .reduce（（a、b）=> ab） / target.length;

      if（prop === 'clear'）{
        message.innertext = `$ {target.length} number $ {target.length === 1？ ''： 's'}クリア！ `;
        Target.splice（0、Target.Length）;
        collection.innertext =ターゲット;
      }

      ターゲットを返す[prop];
    }、
    セット：function（ターゲット、プロップ、値）{
      if（prop === 'length'）trueを返します。

      datainput.value = '';
      message.classlist.remove（ 'error'）;

      if（！number.isinteger（value））{
        console.error（ '提供されたデータは数字ではありません！'）;
        message.innertext = '提供されたデータは数字ではありません！';
        message.classlist.add（ 'error'）;
        falseを返します。
      }

      if（target.includes（value））{
        console.error（ `number $ {value}はすでに提出されています！`）;
        message.innertext = `number $ {value}はすでに提出されています！`;
        message.classlist.add（ 'error'）;
        falseを返します。
      }

      ターゲット[prop] = value;
      collection.innertext =ターゲット;
      message.innertext = `number $ {value}追加！`;

      trueを返します。
    }
  }）;

この例では、セッタートラップから始めます。

最初に行うことは、長さ属性が配列に設定されているかどうかを確認することです。通常の方法で起こるように真実に戻すだけです。設定された長さに反応する必要がある場合は、常に適切な場所にコードを追加できます。

次の2行のコードは、QuerySelectorを使用してページに保存されている2つのHTML要素を参照しています。 Datainputは入力要素であり、入力するたびにクリアしたいと考えています。メッセージは、配列の変更に対する応答を保持する要素です。エラー状態の概念があるため、入力するたびにその状態にないことを確認します。

最初は、入力が実際に数字であるかどうかを確認します。そうでない場合は、いくつかのことを実行します。問題を示すコンソールエラーを発します。メッセージ要素は同じステートメントを取得します。次に、メッセージはCSSクラスを介してエラー状態に入ります。最後に、falseを返し、エージェントがコンソールに独自のエラーを発行します。

2番目は、アレイに入力が既に存在するかどうかをチェックする場合。繰り返したくないことを忘れないでください。複製がある場合、最初のメッセージと同じメッセージが発生する場合と同じメッセージが渡されます。メッセージの配信は、テンプレートが文字通りであるため、重複した値を見ることができるため、わずかに異なります。

最後の部分は、すべてがうまくいかず、続行できると仮定しています。値はいつものように設定され、コレクションリストを更新します。コレクションとは、ページ上の別の要素を指し、配列内の数字の現在のコレクションを表示します。同様に、追加のエントリでメッセージが更新されます。最後に、すべてが順調に進んでいることを代理人に知らせるために忠実に戻ります。

これで、Get Trapは前の例とはわずかに異なります。

 get：function（target、prop）{
  message.classlist.remove（ 'error'）;

  if（prop === 'sort'）return [... target] .sort（（a、b）=> a -b）;
  if（prop === 'sum'）return [... target] .reduce（（a、b）=> ab）;
  if（prop === 'Average'）return [... target] .reduce（（a、b）=> ab） / target.length;

  if（prop === 'clear'）{
    message.innertext = `$ {target.length} number $ {target.length === 1？ ''： 's'}クリア！ `;
    Target.splice（0、Target.Length）;
    collection.innertext =ターゲット;
  }

  ターゲットを返す[prop];
}、

ここで起こるのは、「プロップ」が通常の配列法ではないということです。トラップを取得するための小道具として渡されます。たとえば、最初の「プロップ」は、このイベントリスナーによってトリガーされます。

 dataSort.addeventListener（ 'click'、（）=> {
  message.innertext = number.sort;
}）;

したがって、ソートボタンをクリックすると、numbers.sortで返されたコンテンツを使用して、メッセージ要素のintextが更新されます。非定型アレイ関連の結果のために、プロキシインターセプトとして機能し、ゲッターを返します。

メッセージ要素の潜在的なエラー状態を削除した後、非標準配列フェッチ操作が発生すると予想されるかどうかを判断します。各操作は、元の配列を変更せずに元の配列データの操作を返します。これは、ターゲット上の拡張機能因子を使用して新しい配列を作成し、標準配列メソッドを使用して行われます。各名前は、それが何をするかを意味するはずです：並べ替え、合計、平均、およびクリア。まあ、クリアリングは標準的な配列法ではありませんが、それは良いことです。エントリは任意の順序でソートすることができるため、ソートされたリストを提供したり、エントリで数学的関数を実行したりできます。ご想像のとおり、クリアは配列を単純にクリアします。

これがボタンの他​​のイベントリスナーです：

 dataform.addeventlistener（ 'submit'、（e）=> {
  E.PreventDefault（）;
  numbers.push（number.parseint（datainput.value））;
}）;

datasubmit.addeventlistener（ 'click'、（）=> {
  numbers.push（number.parseint（datainput.value））;
}）;

dataSort.addeventListener（ 'click'、（）=> {
  message.innertext = number.sort;
}）;

datasum.addeventlistener（ 'click'、（）=> {
  message.innertext = numbers.sum;
}）;

data aberavere.addeventlistener（ 'click'、（）=> {
  message.innertext = numbers.average;
}）;

dataclear.addeventlistener（ 'click'、（）=> {
  numbers.clear;
}）;

さまざまな方法で拡張してアレイに機能を追加できます。ネガティブインデックスを持つエントリの選択を可能にする配列の例を見てきました。これは最後からカウントされます。オブジェクト内の属性値に基づいて、オブジェクト配列内のエントリを見つけます。配列に存在しない値を取得しようとするときに、未定義の代わりにメッセージを返します。配列のプロキシを利用して探索する多くのアイデアがあります。

インタラクティブアドレスフォーム

アドレスフォームは、Webページのかなり標準的なものです。楽しい（そして標準以外の）確認のために、それにいくつかのインタラクティブ性を追加しましょう。また、単一のオブジェクトのフォーム値のデータ収集として機能し、オンデマンドで要求できます。

以下はプロキシオブジェクトです。

 const model = new Proxy（
  {
    名前： ''、
    アドレス1： ''、
    アドレス2： ''、
    市： ''、
    州： ''、
    ジップ： ''、
    getData（）{
      戻る {
        名前：this.name || '立入り禁止！'、
        アドレス1：this.address1 || '立入り禁止！'、
        アドレス2：this.address2 || '立入り禁止！'、
        都市：this.city || '立入り禁止！'、
        状態：this.state || '立入り禁止！'、
        zip：this.zip || '立入り禁止！'
      };
    }
  }、
  {
    get：function（target、prop）{
      ターゲットを返す[prop];
    }、
    セット：function（ターゲット、プロップ、値）{
      ターゲット[prop] = value;

      if（prop === 'zip' && value.length === 5）{
        fetch（ `https://api.zippopotam.us/us/$ {value}`）
          .then（response => respons.json（））
          .then（data => {
            model.city = data.places [0] ['place name'];
            document.querySelector（ '[data-model = "city"]'）。value = target.city;

            model.state = data.places [0] ['state略語'];
            document.querySelector（ '[data-model = "state"]'）。value = target.state;
          }）;
      }

      document.QuerySelectorall（ `[data-model =" $ {prop} "]`）.foreach（item => {
        if（item.tagname === 'input' || item.tagname === 'select'）{
          item.value = value;
        } それ以外 {
          item.innertext = value;
        }
      }）

      trueを返します。
    }
  }
）;

ターゲットオブジェクトは非常に単純です。各エントリはフォームに入力されました。 getData関数はオブジェクトを返しますが、プロパティの値が空の文字列の場合、「エントリなし！」に変更されます。これはオプションですが、この関数は、プロキシオブジェクトの状態を取得するだけで取得できるよりも明確なオブジェクトを提供します。

ゲッター関数は、いつものようにコンテンツを渡すだけです。これを行う必要はないかもしれませんが、完成させるために含めるのが好きです。

セッター関数は、値を小道具に設定します。ただし、設定されるプロップがたまたま郵便番号であるかどうかをチェックする場合。その場合、値の長さが5のかどうかを確認します。実際に評価されると、郵便番号ヒットアドレスFinder APIを使用するフェッチを実行します。返される値はすべて、オブジェクトプロパティ、City入力、および選択要素のSelect Stateに挿入されます。これは、ユーザーがこれらの値を入力しないようにすることができる便利なショートカットの例です。これらの値は、必要に応じて手動で変更できます。

次のセクションでは、入力要素の例を見てみましょう。

<code></code>

プロキシには、データ属性を一致させる要素を探すquerySelectorallがあります。これは、以前に見た逆文字列の例と同じです。一致が見つかった場合、要素の入力値またはintextを更新します。これは、完成したアドレスの外観を示すために、ロータリーカードをリアルタイムで更新する方法です。

注意すべきことの1つは、入力上のデータモデルプロパティです。このデータ属性の値は、実際にエージェントに操作中にロックするキーを通知します。エージェントは、関係するキーに基づいて関係する要素を調べます。イベントリスナーは、どのキーが使用されているかをプロキシに知らせることにより、同じ操作を実行します。これがどのように見えるかです：

 document.QuerySelector（ 'main'）。AddEventListener（ 'input'、（e）=> {
  モデル[e.target.dataset.model] = e.target.value;
}）;

したがって、メイン要素内のすべての入力が配置され、入力イベントがトリガーされるとエージェントが更新されます。データモデルプロパティの値は、配置するプロキシのキーを決定するために使用されます。実際、モデルシステムを使用しています。この種のことをさらに使用する方法を考えてください。

「データの取得」ボタンについては？ GetData関数のシンプルなコンソールログです...

 getDatabtn.AddeventListener（ 'click'、（）=> {
  console.log（model.getData（））;
}）;

これは、コンセプトを探求するために構築および使用する興味深い例です。これは、JavaScriptプロキシで何を構築できるかを考えさせる例です。一部のデータ収集/保護機能を備えた小さなウィジェットのみが必要な場合があり、データとの対話だけでDOMを操作できることがあります。はい、VueまたはReactを使用することもできますが、非常に単純なものには複雑すぎる場合があります。

それでおしまい

「それだけです」とは、それぞれのあなたとJavaScriptのプロキシをより深く掘り下げるかどうかに依存することを意味します。この記事の冒頭で言ったように、私はこの機能の基本についてのみカバーしました。それはより多くの機能を提供することができ、私が提供する例よりも大きくすることができます。場合によっては、ニッチソリューションの小さなヘルパープログラムの基礎を提供できます。これらの例は、同じ関数を実行する基本的な関数を使用して簡単に作成できることは明らかです。私のサンプルコードのほとんどでさえ、プロキシオブジェクトを使用した通常のJavaScriptと混合されています。

ただし、ポイントは、プロキシを使用してデータの相互作用に反応する方法を示す例を提供することです。データを保存または取得しようとする人に基づいて、データを保護し、データを検証し、DOMを操作し、新しいデータを取得するためにこれらの相互作用に反応する方法を制御することでさえです。これは、長期的には非常に強力であり、より大きなライブラリやフレームワークを必要としない可能性のある簡単なアプリケーションを作成できるようになります。

したがって、私のようなUIにより焦点を合わせているフロントエンド開発者の場合、JavaScriptプロキシの恩恵を受ける可能性のある小さなプロジェクトがあるかどうかを確認するために基本のいくつかを探索できます。 JavaScript開発者の方がある場合は、より大きなプロジェクトのためにエージェントを深く掘り下げ始めることができます。多分新しいフレームワークやライブラリですか？

ただのアイデア...

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