核心要點(diǎn)

• JavaScript中的猴子補(bǔ)丁(MP)是一種技術(shù)，允許程序員覆蓋、擴(kuò)展或抑制代碼段的默認(rèn)行為，而無需更改其原始源代碼。
• 雖然MP通常被認(rèn)為是不好的實(shí)踐，但它可以作為修改第三方代碼以適應(yīng)特定需求的有用工具，尤其是在無法更改原始源代碼的情況下。
• MP可用于用自定義行為覆蓋現(xiàn)有函數(shù)，通過在原始代碼之前或之后添加自定義行為來增強(qiáng)方法，或攔截Ajax調(diào)用以修改其行為。
• 應(yīng)該謹(jǐn)慎使用MP，因?yàn)樗赡軐?dǎo)致代碼中出現(xiàn)不可預(yù)測的行為和沖突，特別是如果在代碼庫的其他地方使用了已修補(bǔ)的方法。
• 盡管存在潛在風(fēng)險，但MP仍然可以成為測試、調(diào)試和實(shí)施修復(fù)的強(qiáng)大工具，它突出了JavaScript作為編程語言的靈活性和動態(tài)性。

本文由Moritz Kr?ger和Tom Greco審核。感謝所有SitePoint的同行評審員，使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！

您是否曾經(jīng)使用過第三方代碼，除了一個讓您抓狂的小問題外，其他都運(yùn)行良好？創(chuàng)建者為什么忘記刪除那些討厭的控制臺日志？如果那個API調(diào)用可以多做一件事，那不是很好嗎？如果是這樣，那么您就會知道，讓維護(hù)者實(shí)施您的更改可能很困難（或不可能）。但是，自己更改代碼呢？如果您沒有源代碼并且不想自己托管它們，該如何操作？歡迎來到JavaScript猴子補(bǔ)丁的世界之旅！

在本文中，我們將了解什么是猴子補(bǔ)丁，并逐步完成一些不同的示例，使用它來更改第三方小部件的功能以適應(yīng)我們的需求。

什么是猴子補(bǔ)??？

猴子補(bǔ)?。ㄒ韵潞喎QMP）是一種技術(shù)，用于覆蓋、擴(kuò)展甚至抑制代碼段的默認(rèn)行為，而無需更改其原始源代碼。這是通過用修復(fù)版本替換原始行為來實(shí)現(xiàn)的。

本文將使用現(xiàn)有的反饋框小部件，該小部件顯示一個簡單的、可滑動的彈出窗口（如下圖所示），其中包含反饋表單。

源代碼已修改為包含用作MP目標(biāo)的用例。目標(biāo)是指我們將要修補(bǔ)的特定功能、特性或最低級別的使用方法。

我做的另一個修改是刪除了圍繞代碼的立即調(diào)用函數(shù)表達(dá)式（IIFE）。這樣做是為了專注于MP的技術(shù)。

您可以在Plunker中找到整個示例，包括本文中討論的猴子補(bǔ)丁。

猴子補(bǔ)丁不是一種不好的實(shí)踐嗎？

在開始之前，讓我們先明確一點(diǎn)：是的，MP被認(rèn)為是一種不好的實(shí)踐——邪惡的eval、命令式編程、可變數(shù)據(jù)結(jié)構(gòu)、雙向綁定等等也是如此。

如果您使用其中任何一種，很可能會有相當(dāng)大的一群人告訴您您做錯了，應(yīng)該更改此或那項(xiàng)以適應(yīng)更好的條件。但一如既往，有不同的工具和技術(shù)可用，它們在特定場景下的適用性各不相同。有時，看起來極端、瘋狂或根本不好的東西可能是特定情況下的最后手段。不幸的是，由于某些實(shí)踐被認(rèn)為是不好的，您甚至找不到很多文章來描述如何以正確的方式做錯事。

此處描述的情況可能是不自然的，用虛假的小部件將其推向極端，以顯示您的選擇。然后，作為讀者，您必須決定是否喜歡您看到的內(nèi)容。如果沒有什么別的，在閱讀本文之后，您將有更好的理解，以便反對MP。

猴子補(bǔ)丁的目標(biāo)

在我們深入研究這些技術(shù)之前，讓我們首先檢查一下我們想要實(shí)現(xiàn)的目標(biāo)。修改后的窗口部件有一些代碼異味，我們想解決這些問題。

硬編碼的背景顏色

第一個是名為toggleError的方法，該方法應(yīng)該根據(jù)布爾參數(shù)更改元素的背景顏色

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

如您所見，它通過jQuery方法css設(shè)置background-color屬性。這是一個問題，因?yàn)槲覀兿Ｍㄟ^樣式表規(guī)則指定它。

討厭的控制臺日志

在開發(fā)小部件時，使用控制臺日志來向開發(fā)人員提示當(dāng)前正在執(zhí)行的內(nèi)容。在開發(fā)過程中這可能是一種不錯的方法，但在生產(chǎn)使用中肯定不是最好的方法。因此，我們需要找到一種方法來刪除所有這些調(diào)試語句。

攔截廣告服務(wù)器調(diào)用

該小部件很棒，但它有一個奇怪的行為。每次初始化腳本時，它都會向一個奇怪的廣告服務(wù)器發(fā)出請求，并在我們的頁面上顯示不必要的膨脹內(nèi)容。

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

  ...

注意：演示代碼針對Plunker中的JSON文件來模擬傳出的Ajax請求，但我希望您明白這一點(diǎn)。

覆蓋方法

MP的關(guān)鍵概念之一是獲取現(xiàn)有函數(shù)并使用自定義行為在調(diào)用原始代碼之前或之后對其進(jìn)行增強(qiáng)。但調(diào)用原始實(shí)現(xiàn)并非總是必要的，因?yàn)橛袝r您只想用自定義操作替換它。這種方法非常適合幫助我們解決硬編碼的背景顏色問題。

應(yīng)用MP的位置必須在加載并提供原始實(shí)現(xiàn)之后。通常，您應(yīng)該努力使更改盡可能接近目標(biāo)，但請記住，目標(biāo)的實(shí)現(xiàn)可能會隨著時間的推移而發(fā)生變化。至于我們的示例，初始化以及MP將進(jìn)入文件main.js。

查看小部件實(shí)現(xiàn)，我們可以看到有一個FeedbackBox對象作為小部件的根。稍后，將在其原型上實(shí)現(xiàn)toggleError函數(shù)。

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

由于JavaScript是一種動態(tài)語言，其對象可以在運(yùn)行時修改，因此我們最終將做的只是用我們的自定義方法替換toggleError。唯一需要注意的是保持簽名（名稱和傳遞的參數(shù)）相同。

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

  ...

新的實(shí)現(xiàn)現(xiàn)在只需向給定的元素添加一個錯誤類，從而允許我們通過css設(shè)置背景顏色。

增強(qiáng)方法

在前面的示例中，我們看到了如何通過提供我們自己的方法來覆蓋原始實(shí)現(xiàn)。另一方面，處理控制臺日志應(yīng)該只是過濾掉特定的調(diào)用并抑制它們。成功的關(guān)鍵是檢查您嵌入的代碼并嘗試?yán)斫馄涔ぷ髁鞒獭Ｍǔ?，這是通過啟動您選擇的瀏覽器中的開發(fā)者控制臺并在加載的資源中窺視、添加斷點(diǎn)和調(diào)試目標(biāo)代碼部分來完成的，以便了解它的功能。但是，這一次，您只需在另一個選項(xiàng)卡中打開名為vendor/jquery.feedBackBox.js的Plunker示例中的實(shí)現(xiàn)即可。

通過查看調(diào)試消息，我們可以看到它們中的每一個都以FeedbackBox:開頭。因此，實(shí)現(xiàn)我們想要的目標(biāo)的一種簡單方法是攔截原始調(diào)用，檢查要寫入的提供的文本，并且僅當(dāng)它不包含調(diào)試提示時才調(diào)用原始方法。

為此，讓我們首先將原始console.log存儲到一個變量中以供以后使用。然后，我們再次用我們的自定義實(shí)現(xiàn)覆蓋原始實(shí)現(xiàn)，該實(shí)現(xiàn)首先檢查提供的屬性文本是否為字符串類型，如果是，則檢查它是否包含子字符串FeedbackBox:。如果是，我們將什么也不做，否則我們將通過調(diào)用其apply方法來執(zhí)行原始控制臺代碼。

請注意，此方法將上下文作為第一個參數(shù)，這意味著應(yīng)該在該對象上調(diào)用該方法，以及一個神奇的arguments變量。后者是最初傳遞給原始console.log調(diào)用的所有參數(shù)的數(shù)組。

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

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

注意：您可能想知道為什么我們沒有簡單地轉(zhuǎn)發(fā)text屬性。好吧，console.log實(shí)際上可以用無限的參數(shù)調(diào)用，最終這些參數(shù)將連接到單個文本輸出。因此，與其定義所有這些參數(shù)（對于無限的可能性來說可能非常困難），我們只需轉(zhuǎn)發(fā)所有傳入的內(nèi)容。

攔截Ajax調(diào)用

最后但并非最不重要的一點(diǎn)是，讓我們看看如何解決廣告服務(wù)器問題。讓我們再次查看小部件的init函數(shù)：

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

第一個想法可能是打開瀏覽器并搜索如何覆蓋jQuery插件。根據(jù)您的搜索技能的好壞，您可能會或可能不會找到合適的答案。但是，讓我們停下來思考一下這里到底發(fā)生了什么。無論jQuery對其ajax方法做了什么，它最終都會在某個時候創(chuàng)建一個本機(jī)XMLHttpRequest。

讓我們看看它在幕后是如何工作的。在MDN上找到的最簡單的示例向我們展示了這一點(diǎn)：

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

  ...

我們看到創(chuàng)建了一個新的XMLHttpRequest實(shí)例。它有一個onreadystatechange方法，我們實(shí)際上并不關(guān)心，然后是open和send方法。太好了。所以我們的想法是猴子補(bǔ)丁send方法并告訴它不要執(zhí)行對特定URL的調(diào)用。

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

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

好吧，事實(shí)證明您無法從對象本身獲取目標(biāo)URL。糟糕。那我們該怎么辦？我們將其放在對象上。尋找獲取URL的第一個機(jī)會，我們可以看到open方法將其作為第二個參數(shù)接受。為了使URL在對象本身可用，讓我們首先MP open方法。

和以前一樣，我們將原始o(jì)pen方法存儲在一個變量中以供以后使用。然后我們用自定義實(shí)現(xiàn)覆蓋原始實(shí)現(xiàn)。由于我們可以使用JavaScript（一種動態(tài)語言），因此我們可以隨時創(chuàng)建一個新屬性并將其命名為_url，該屬性將設(shè)置為傳入?yún)?shù)的值。

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

除此之外，我們調(diào)用原始o(jì)pen方法，不做任何其他操作。

重新審視我們的send MP，現(xiàn)在很明顯如何解決條件檢查。以下是修改后的版本：

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

  originalConsoleLog.apply(console, arguments);
}

結(jié)論

我們在這里看到的是關(guān)于使用猴子補(bǔ)丁在運(yùn)行時更改代碼行為的簡短介紹。但更重要的是，我希望這篇文章能夠讓您了解如何處理猴子補(bǔ)丁問題。雖然補(bǔ)丁本身通常很簡單，但重要的是如何在運(yùn)行時調(diào)整代碼的想法。

此外，我希望無論您對猴子補(bǔ)丁有何看法，您都有機(jī)會看到使用動態(tài)語言的美妙之處，它允許您動態(tài)地在運(yùn)行時更改甚至本機(jī)實(shí)現(xiàn)。

關(guān)于實(shí)用猴子補(bǔ)丁的常見問題解答 (FAQ)

JavaScript中的猴子補(bǔ)丁的概念是什么？

JavaScript中的猴子補(bǔ)丁是一種技術(shù)，其中內(nèi)置對象或用戶定義對象的行為被修改，通常是通過添加、修改或更改對象的原型來實(shí)現(xiàn)的。這是一種擴(kuò)展或更改代碼行為而不更改原始源代碼的方法。此技術(shù)可用于實(shí)施修復(fù)、增強(qiáng)現(xiàn)有函數(shù)，甚至用于測試和調(diào)試目的。

JavaScript和Python中的猴子補(bǔ)丁有何不同？

雖然JavaScript和Python中的猴子補(bǔ)丁的概念相同——修改或擴(kuò)展對象的行為——但由于語言本身的差異，實(shí)現(xiàn)方式有所不同。在JavaScript中，猴子補(bǔ)丁通常是通過修改對象的原型來完成的，而在Python中，它是通過添加或更改類或?qū)嵗椒▉硗瓿傻摹＿@兩種語言的靈活性都允許進(jìn)行猴子補(bǔ)丁，但應(yīng)謹(jǐn)慎使用此技術(shù)，以避免出現(xiàn)意外行為。

猴子補(bǔ)丁在JavaScript中被認(rèn)為是一種好的實(shí)踐嗎？

猴子補(bǔ)丁是一個強(qiáng)大的工具，但它并非沒有爭議。雖然它可以快速修改或擴(kuò)展功能而無需更改原始源代碼，但它也可能導(dǎo)致不可預(yù)測的行為和沖突，尤其是在過度使用或使用不當(dāng)時。因此，通常建議謹(jǐn)慎和負(fù)責(zé)任地使用猴子補(bǔ)丁，并始終考慮對整個代碼庫的潛在影響。

猴子補(bǔ)丁的潛在風(fēng)險是什么？

猴子補(bǔ)丁的主要風(fēng)險是它可能導(dǎo)致代碼中出現(xiàn)不可預(yù)測的行為和沖突。因?yàn)樗薷牧爽F(xiàn)有對象的行為，所以如果在代碼庫的其他地方使用了已修補(bǔ)的方法，它可能會破壞代碼。它還可能導(dǎo)致其他開發(fā)人員感到困惑，他們可能不知道這些修改。因此，務(wù)必清晰而全面地記錄任何猴子補(bǔ)丁。

如何在JavaScript中干凈地猴子補(bǔ)丁一個函數(shù)？

要在JavaScript中干凈地猴子補(bǔ)丁一個函數(shù)，您可以圍繞原始函數(shù)創(chuàng)建一個包裝器。此包裝器函數(shù)將調(diào)用原始函數(shù)，然后根據(jù)需要添加或修改行為。這樣，原始函數(shù)保持不變，附加行為清晰地分開，使代碼更易于理解和維護(hù)。

猴子補(bǔ)丁可以用于測試和調(diào)試嗎？

是的，猴子補(bǔ)丁可以作為測試和調(diào)試的有用工具。通過修改或擴(kuò)展函數(shù)或方法的行為，您可以模擬不同的場景、注入錯誤或添加日志來跟蹤代碼的執(zhí)行。但是，重要的是在生產(chǎn)代碼中刪除或隔離這些補(bǔ)丁，以避免任何意外的副作用。

原型在JavaScript中的猴子補(bǔ)丁中起什么作用？

在JavaScript中，原型在猴子補(bǔ)丁中起著至關(guān)重要的作用。由于JavaScript是一種基于原型的語言，因此每個對象都有一個原型，它從中繼承屬性和方法。通過修改對象的原型，您可以更改該對象所有實(shí)例的行為。這是JavaScript中猴子補(bǔ)丁的基礎(chǔ)。

猴子補(bǔ)丁如何影響JavaScript中的性能？

猴子補(bǔ)丁對JavaScript性能的影響通常很小。但是，過度或不當(dāng)使用猴子補(bǔ)丁可能會導(dǎo)致性能問題。例如，如果在代碼中頻繁使用已修補(bǔ)的方法，則附加行為可能會減慢執(zhí)行速度。因此，務(wù)必謹(jǐn)慎使用猴子補(bǔ)丁并定期監(jiān)控性能。

猴子補(bǔ)丁可以用來擴(kuò)展內(nèi)置的JavaScript對象嗎？

是的，猴子補(bǔ)丁可以用來擴(kuò)展內(nèi)置的JavaScript對象。通過修改內(nèi)置對象的原型，您可以添加新的方法或?qū)傩裕@些方法或?qū)傩詫⒖捎糜谠搶ο蟮乃袑?shí)例。但是，應(yīng)謹(jǐn)慎執(zhí)行此操作，以避免與未來版本的JavaScript發(fā)生沖突，這些版本可能會引入相同的方法或?qū)傩浴?/p>

JavaScript中猴子補(bǔ)丁的一些替代方案是什么？

JavaScript中猴子補(bǔ)丁有幾種替代方案。一種常見的方法是使用組合，您創(chuàng)建一個包含原始對象并添加或覆蓋行為的新對象。另一種方法是使用繼承，您創(chuàng)建一個從原始類繼承并覆蓋方法的新類。這些方法可以提供與猴子補(bǔ)丁類似的靈活性，但具有更好的封裝性和更少的沖突風(fēng)險。

以上是JavaScript中猴子補(bǔ)丁的務(wù)實(shí)用途的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！