コアポイント

JavaScriptのMonkey Patch（MP）は、プログラマーが元のソースコードを変更せずにコードセグメントのデフォルト動作をオーバーライド、拡張、または抑制できるようにするテクノロジーです。
MPはしばしば悪いプラクティスと見なされますが、特に元のソースコードを変更できない場合は、特定のニーズに合わせてサードパーティコードを変更するための便利なツールとして使用できます。
MPを使用して、既存の関數(shù)をカスタム動作で上書きしたり、元のコードの前後にカスタム動作を追加したり、Ajax呼び出しをインターセプトして動作を変更したりすることができます。
• 特にパッチされた方法がコードベースの他の場所で使用されている場合、コードの予測不可能な動作と競合を引き起こす可能性があるため、
MPは注意して使用する必要があります。
潛在的なリスクにもかかわらず、MPは、プログラミング言語としてのJavaScriptの柔軟性と動的な性質(zhì)を強調(diào)し、修理のテスト、デバッグ、および実裝の強力なツールになります。

この記事は、MoritzKr?gerとTom Grecoによってレビューされました。 SetePointのすべてのピアレビューアーズに感謝します。

あなたを狂わせる1つの小さな質(zhì)問を除いて、うまく機能するサードパーティのコードを使用したことがありますか？作成者がこれらの迷惑なコンソールログを削除するのを忘れたのはなぜですか？そのAPI呼び出しがもう一つのことをすることができれば、それはいいことではないでしょうか？もしそうなら、あなたはメンテナーにあなたの変更を?qū)g裝することは困難な（または不可能）ことができることを知っています。しかし、コードを自分で変更するのはどうですか？ソースコードがなく、自分でホストしたくない場合はどうなりますか？ JavaScriptモンキーパッチの世界の旅へようこそ！

この記事では、モンキーパッチが何であるかを?qū)Wび、いくつかの異なる例を踏んで、それを使用してサードパーティウィジェットの機能を変更してニーズに合わせて変更します。

モンキーパッチとは何ですか？

モンキーパッチ（MP）は、元のソースコードを変更せずにコードセグメントのデフォルトの動作をオーバーライド、拡張、さらには抑制するために使用される手法です。これは、元の動作を

fix

バージョンに置き換えることによって行われます。 この記事では、フィードバックフォームを含むシンプルでスワイプ可能なポップアップウィンドウ（下の畫像に示す）を表示する既存のフィードバックボックスウィジェットを使用します。

ソースコードは、MPターゲットとして使用するためのユースケースを含めるように変更されています。目標とは、特定の機能、機能、またはパッチを適用する最小レベルの使用法を指します。

私が行った別の変更は、コードの周りにコール関數(shù)式（IIFE）を削除することでした。これは、MPテクノロジーに焦點を當てるために行われます。 この記事で説明したモンキーパッチを含む、プランカーで例全體を見つけることができます。

モンキーのパッチは悪い練習ではありませんか？

開始する前に、それを明確にしましょう：はい、MPは悪い実踐と見なされます。 これらのいずれかを使用する場合、あなたが何か間違っていること、そしてこれがより良い條件に合うように変更するべきだと言っている人々のグループが非常に大きなグループがあります。しかし、いつものように、さまざまなツールとテクノロジーが利用可能であり、それらの適用性は特定のシナリオで異なります。時には、極端に、クレイジー、または単に悪いように見えるものが、特定の狀況での最後の手段になることがあります。殘念ながら、一部のプラクティスは悪いと見なされているため、間違ったことを正しい方法で行う方法を説明する多くの記事を見つけることさえできません。

ここで説明する狀況は不自然である可能性があります。あなたの選択を示すために、偽のウィジェットで極端に押し込みます。それから、読者として、あなたが見るものが好きかどうかを決める必要があります。他に何もなければ、この記事を読んだ後、MPに反対するために、よりよく理解できます。 モンキーパッチのターゲット

これらのテクノロジーをより深く掘り下げる前に、最初に達成したいことをチェックしてみましょう。変更されたウィジェットにはコード臭いがあり、これらの問題を解決したいと考えています。

ハードコーディングされた背景色 最初は、Booleanパラメーターに基づいて要素の背景色を変更する必要があるToggleerrorと呼ばれるメソッドです。

ご覧のとおり、jQueryメソッドCSSを介して背景色のプロパティを設定します。 StyleSheetルールを使用して指定したいため、これは問題です。

Nevil Console Log

ウィジェットを開発するときは、コンソールログを使用して、現(xiàn)在実行中の開発者に促します。これは開発中の良いアプローチかもしれませんが、確かに生産使用における最良のアプローチではありません。したがって、これらすべてのデバッグステートメントを削除する方法を見つける必要があります。

FeedbackBox.prototype.toggleError = function(obj, isError) {
  if(isError) {
    obj.css("background-color", "darkgrey");
  } else {
    obj.css("background-color", "");
  }
}

ブロック広告サーバーコール

ウィジェットは素晴らしいですが、奇妙な動作があります。スクリプトが初期化されるたびに、奇妙な広告サーバーにリクエストを行い、ページに不要なブロートコンテンツを表示します。

注：DEMOコードは、PlunkerでJSONファイルの発信ajaxリクエストをシミュレートしますが、これを理解することを願っています。

カバレッジ方法

FeedbackBox.prototype.init = function() {
  // 我們想要跳過的廣告服務器調(diào)用
  $.ajax('vendor/service.json', {
    method: 'GET'
  }).then(function(data) {
    console.log("FeedbackBox: AdServer contacted");
  });

  ...

MPの重要な概念の1つは、既存の機能を取得し、カスタム動作を使用して元のコードを呼び出す前または後にそれらを強化することです。ただし、元の実裝を呼び出すことは必ずしも必要ではありません。なぜなら、カスタムアクションに置き換えるだけであることがあるからです。このアプローチは、ハードコーディングされた背景色の問題を解決するのに役立つのに最適です。

MPが適用される場所は、元の実裝でロードされ、提供する必要があります。一般的に、目標をできるだけ目標に近づけるように努力する必要がありますが、目標の実裝は時間とともに変化する可能性があることを忘れないでください。この例に関しては、初期化とMPはファイルmain.jsに移動します。

ウィジェットの実裝を見ると、ウィジェットのルートとしてフィードバックボックスオブジェクトがあることがわかります。その後、ToggleError関數(shù)がそのプロトタイプに実裝されます。

FeedbackBox.prototype.toggleError = function(obj, isError) {
  if(isError) {
    obj.css("background-color", "darkgrey");
  } else {
    obj.css("background-color", "");
  }
}

JavaScriptは実行時にオブジェクトを変更できる動的言語であるため、最終的に行うことになるのは、トググルエラーをカスタムメソッドに置き換えることだけです。注意すべき唯一のことは、署名（名前と渡されたパラメーター）を同じに保つことです。

FeedbackBox.prototype.init = function() {
  // 我們想要跳過的廣告服務器調(diào)用
  $.ajax('vendor/service.json', {
    method: 'GET'
  }).then(function(data) {
    console.log("FeedbackBox: AdServer contacted");
  });

  ...

新しい実裝により、指定された要素にエラークラスを追加するだけで、CSSを介して背景色を設定できます。

拡張方法

前の例では、獨自の方法を提供することにより、元の実裝をオーバーライドする方法を見ました。一方、コンソールログの処理は、特定の呼び出しを除外して抑制するだけです。成功の鍵は、埋め込んだコードを調(diào)べて、そのワークフローを理解しようとすることです。通常、これは、選択したブラウザで開発者コンソールを起動し、ロードされたリソースを覗き、ブレークポイントを追加し、オブジェクトコードセクションをデバッグして機能性を理解することで行われます。ただし、今回は、別のタブでVendor/jQuery.feedbackbock.jsというプランカーの例で実裝を開く必要があります。

デバッグメッセージを見ることで、それぞれがフィードバックボックス：で始まることがわかります。したがって、私たちが望むものを達成する簡単な方法は、元の呼び出しを傍受し、記載されている指定されたテキストをチェックし、デバッグプロンプトが含??まれていない場合にのみ元の方法を呼び出すことです。

これを行うには、最初に元のConsole.logを変數(shù)に保存して、後で使用しましょう。繰り返しになりますが、カスタム実裝で元の実裝をオーバーライドします。これは、提供されたプロパティテキストが文字列タイプであるかどうかを最初にチェックします。もしそうなら、サブストリングフィードバックボックスが含まれているかどうかを確認します。もしそうなら、私たちは何もしません。そうしないと、Applyメソッドを呼び出すことにより、元のコンソールコードを?qū)g行します。

このメソッドは、コンテキストを最初のパラメーターとして取得することに注意してください。つまり、メソッドはそのオブジェクトで呼び出される必要があることを意味します。後者は、元々元のConsole.logコールに渡されたすべてのパラメーターの配列です。

function FeedbackBox(elem, options) {
  this.options = options;  
  this.element = elem;  
  this.isOpen = false;
}

FeedbackBox.prototype.toggleError = function(obj, isError) {
  ...
}

注：なぜ私たちが単にテキスト屬性を転送しなかったのか疑問に思うかもしれません。まあ、Console.logは実際に無限のパラメーターで呼び出すことができ、最終的には単一のテキスト出力に接続されます。したがって、これらすべてのパラメーターを定義する代わりに（無限の可能性にとって非常に難しい場合があります）、すべての著信コンテンツを転送するだけです。

ajax calls < 最後になりましたが、広告サーバーの問題を解決する方法を見てみましょう。ウィジェットのinit機能をもう一度見てみましょう：

FeedbackBox.prototype.toggleError = function(obj, isError) {
  if(isError) {
    obj.css("background-color", "darkgrey");
  } else {
    obj.css("background-color", "");
  }
}

最初のアイデアは、ブラウザを開き、jQueryプラグインをオーバーライドする方法を検索することです。検索スキルがどれだけ優(yōu)れているかに応じて、正しい答えを見つける場合とそうでない場合があります。しかし、ここで何が起こっているのかを止めて考えましょう。 jQueryがAjaxメソッドに対して何をしていても、ある時點でネイティブXMLHTTPREQUESTを作成することになります。

舞臺裏でどのように機能するか見てみましょう。 MDNで見つかった最も単純な例は、これを示しています：

FeedbackBox.prototype.init = function() {
  // 我們想要跳過的廣告服務器調(diào)用
  $.ajax('vendor/service.json', {
    method: 'GET'
  }).then(function(data) {
    console.log("FeedbackBox: AdServer contacted");
  });

  ...

新しいxmlhttprequestインスタンスが作成されています。実際には気にしないredidedStateChangeメソッドがあり、オープンアンドセンドメソッドがあります。とても良い。したがって、私たちのアイデアは、送信方法にパッチを當て、特定のURLへの呼び出しを?qū)g行しないように指示することです。

function FeedbackBox(elem, options) {
  this.options = options;  
  this.element = elem;  
  this.isOpen = false;
}

FeedbackBox.prototype.toggleError = function(obj, isError) {
  ...
}

わかりました、オブジェクト自體からターゲットURLを取得できないことがわかります。おっと。それでは、私たちは何をすべきですか？オブジェクトに置きます。 URLを取得する最初のチャンスを探して、Openメソッドが2番目のパラメーターとして受け入れることがわかります。オブジェクト自體でURLを使用できるようにするには、MP Openメソッドから始めましょう。

前と同様に、元のオープンメソッドを後で使用するために変數(shù)に保存します。次に、カスタム実裝で元の実裝をオーバーライドします。 JavaScript（動的言語）を使用できるため、いつでも新しいプロパティを作成し、_urlに名前を付けることができます。これは、渡されたパラメーターの値に設定されます。

FeedbackBox.prototype.toggleError = function(obj, isError) {
  if(isError) {
    obj.addClass("error");
  } else {
    obj.removeClass("error");
  }
};

これとは別に、他の操作を?qū)g行せずに元のオープンメソッドを呼び出します。

送信MPを再検討すると、狀態(tài)チェックを解決する方法が明らかになりました。以下は変更されたバージョンです：

var originalConsoleLog = console.log;
console.log = function(text) {
  if (typeof text === "string" && text.indexOf("FeedbackBox:") === 0) {
    return;
  }

  originalConsoleLog.apply(console, arguments);
}

結(jié)論

ここで見られるのは、モンキーパッチを使用して実行時にコードの動作を変更することについての簡単な紹介です。しかし、もっと重要なことは、この投稿が猿のパッチに対処する方法のアイデアを提供することを願っています。パッチ自體は通常簡単ですが、実行時にコードを調(diào)整する方法を理解することが重要です。

また、モンキーパッチについてどう思うかに関係なく、動的言語を使用することの美しさを見る機會があることを願っています。これにより、実行時にネイティブの実裝も動的に変更できます。

実用的なモンキーパッチ（FAQ）

についての

FAQ JavaScriptのモンキーパッチの概念は何ですか？

JavaScriptのモンキーパッチは、通常、オブジェクトのプロトタイプを追加、変更、または変更することにより、組み込みまたはユーザー定義のオブジェクトの動作が変更される手法です。これは、元のソースコードを変更せずにコードの動作を拡張または変更する方法です。この手法は、修理、既存の機能の強化、さらにはテストやデバッグの目的でさえ実裝するために使用できます。

JavaScriptとPythonのサルパッチの違いは何ですか？

JavaScriptとPythonのモンキーパッチの概念は同じですが、オブジェクトの変更または拡張の動作 - 言語自體の違いにより実裝は異なります。 JavaScriptでは、モンキーパッチは通常、オブジェクトのプロトタイプを変更することによって行われますが、Pythonでは、クラスまたはインスタンスメソッドを追加または変更することで行われます。両方の言語の柔軟性により、サルのパッチが可能になりますが、この手法は、予期しない動作を避けるために注意して使用する必要があります。

モンキーパッチはJavaScriptの良い練習と見なされていますか？

モンキーパッチは強力なツールですが、論爭がないわけではありません。元のソースコードを変更せずに機能を迅速に変更または拡張できますが、特に過剰使用または不適切な場合、予測不可能な動作や競合にもつながる可能性があります。したがって、多くの場合、サルパッチを慎重に責任を負い、常にコードベース全體に潛在的な影響を考慮することをお勧めします。

モンキーパッチの潛在的なリスクは何ですか？

モンキーパッチの主なリスクは、コードの予測不可能な動作と対立につながる可能性があることです。既存のオブジェクトの動作を変更するため、パッチされたメソッドがコードベースの他の場所で使用されている場合、コードを破ることができます。また、変更を認識していない他の開発者の間で混亂を引き起こす可能性があります。したがって、猿のパッチを明確かつ包括的に記録することが重要です。

JavaScriptで関數(shù)をきれいにパッチする方法は？

JavaScriptで関數(shù)をきれいにパッチすると、元の関數(shù)の周りにラッパーを作成できます。このラッパー関數(shù)は、元の関數(shù)を呼び出し、必要に応じて動作を追加または変更します。このようにして、元の関數(shù)は変更されておらず、追加の動作が明確に分離されているため、コードの理解と維持が容易になります。

モンキーパッチは、テストとデバッグに使用できますか？

はい、モンキーパッチは、テストとデバッグに役立つツールとして使用できます。関數(shù)またはメソッドの動作を変更または拡張することにより、さまざまなシナリオをシミュレート、エラーを注入するか、ログを追加してコードの実行を追跡できます。ただし、予期しない副作用を回避するために、これらのパッチを生産コードで削除または隔離することが重要です。

JavaScriptのモンキーパッチでプロトタイプはどのような役割を果たしますか？

JavaScriptでは、モンキーパッチでプロトタイプが重要な役割を果たします。 JavaScriptはプロトタイプベースの言語であるため、各オブジェクトにはプロパティとメソッドを継承するプロトタイプがあります。オブジェクトのプロトタイプを変更することにより、そのオブジェクトのすべてのインスタンスの動作を変更できます。これは、JavaScriptのサルパッチの基礎です。

モンキーパッチは、JavaScriptのパフォーマンスにどのように影響しますか？

JavaScriptのパフォーマンスに対するモンキーパッチの影響は通常、小さいです。ただし、モンキーパッチの過剰または不適切な使用は、パフォーマンスの問題を引き起こす可能性があります。たとえば、コードでパッチされたメソッドを頻繁に使用する場合、追加の動作は実行を遅くする可能性があります。したがって、慎重にモンキーパッチを使用し、定期的にパフォーマンスを監(jiān)視してください。

モンキーパッチを使用して、組み込みのJavaScriptオブジェクトを拡張できますか？

はい、モンキーパッチを使用して、組み込みのJavaScriptオブジェクトを拡張できます。組み込みオブジェクトのプロトタイプを変更することにより、オブジェクトのすべてのインスタンスで使用できる新しいメソッドまたはプロパティを追加できます。ただし、これは、同じ方法またはプロパティを?qū)毪工肟赡苄预韦ⅳ隞avaScriptの將來のバージョンとの対立を避けるために注意して行う必要があります。

JavaScriptのサルパッチの代替品は何ですか？

JavaScriptにはサルパッチにいくつかの代替品があります。一般的な方法は、組み合わせを使用することです。ここでは、元のオブジェクトを含む新しいオブジェクトを作成し、動作を追加または上書きします。別の方法は、元のクラスから継承してメソッドを上書きする新しいクラスを作成する継承を使用することです。これらの方法は、モンキーパッチに同様の柔軟性を提供できますが、カプセル化が改善され、競合のリスクが少なくなります。

以上がJavaScriptのサルパッチングの実用的な使用の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。