javaScript는 런타임에 객체를 수정할 수있는 동적 언어이므로 ToggleError를 사용자 정의 메소드로 대체하는 것입니다. 주목해야 할 유일한 것은 서명 (이름과 전달 된 매개 변수)을 동일하게 유지하는 것입니다. <code class="language-javascript">FeedbackBox.prototype.toggleError = function(obj, isError) {
if(isError) {
obj.css("background-color", "darkgrey");
} else {
obj.css("background-color", "");
}
}</code>
새로운 구현은 이제 주어진 요소에 오류 클래스를 추가하여 CSS를 통해 배경색을 설정할 수 있습니다.
향상 방법 <code class="language-javascript">FeedbackBox.prototype.init = function() {
// 我们想要跳过的广告服务器调用
$.ajax('vendor/service.json', {
method: 'GET'
}).then(function(data) {
console.log("FeedbackBox: AdServer contacted");
});
...
</code>
이전 예에서는 자체 방법을 제공하여 원래 구현을 무시하는 방법을 보았습니다. 반면, 콘솔 로그 처리는 특정 통화를 필터링하고이를 억제해야합니다. 성공의 핵심은 포함 된 코드를 검사하고 워크 플로우를 이해하려고 노력하는 것입니다. 일반적으로 이는 선택한 브라우저에서 개발자 콘솔을 시작하고로드 된 리소스를 엿보기, 중단 점을 추가하고 객체 코드 섹션을 디버깅하여 기능을 이해함으로써 수행됩니다. 그러나 이번에는 다른 탭에서 벤더/jquery.feedbackbox.js라는 플 랭커 예제에서 구현을 열어야합니다.
디버그 메시지를 살펴보면 각각이 피드백 박스로 시작한다는 것을 알 수 있습니다. 따라서 우리가 원하는 것을 달성하는 쉬운 방법은 원래 통화를 가로 채고 작성할 제공된 텍스트를 확인한 다음 디버그 프롬프트가 포함되지 않은 경우에만 원래 메소드를 호출하는 것입니다.
이렇게하려면 먼저 원래 콘솔을 저장하겠습니다. 그런 다음, 우리는 사용자 정의 구현으로 원래 구현을 대체하여 제공된 속성 텍스트가 문자열 유형인지 먼저 확인하고, 그렇다면 Substring FeedbackBox를 포함하는지 확인합니다. 그렇다면 우리는 아무것도하지 않을 것입니다. 그렇지 않으면 적용 메소드를 호출하여 원래 콘솔 코드를 실행합니다.
이 메소드는 컨텍스트를 첫 번째 매개 변수로 사용합니다. 즉, 메소드가 해당 객체에서 호출되어야하며 마법의 인수 변수를 호출해야합니다. 후자는 원래 원래 Console.log Call에 전달 된 모든 매개 변수의 배열입니다.
참고 : 왜 우리가 단순히 텍스트 속성을 전달하지 않았는지 궁금 할 것입니다. 음, Console.log는 실제로 무한 매개 변수로 호출 할 수 있으며 결국 단일 텍스트 출력에 연결됩니다. 따라서 이러한 모든 매개 변수를 정의하는 대신 (무한한 가능성에 매우 어려울 수 있음), 우리는 모든 들어오는 컨텐츠를 전달합니다.
intercept ajax 호출
마지막으로, 광고 서버 문제를 해결하는 방법을 살펴 보겠습니다. 위젯의 init 함수를 다시 살펴 보겠습니다 :
<code class="language-javascript">FeedbackBox.prototype.toggleError = function(obj, isError) {
if(isError) {
obj.css("background-color", "darkgrey");
} else {
obj.css("background-color", "");
}
}</code>
첫 번째 아이디어는 브라우저를 열고 jQuery 플러그인을 무시하는 방법을 검색하는 것입니다. 검색 기술이 얼마나 좋은지에 따라 정답을 찾거나 찾지 못할 수도 있습니다. 그러나 멈추고 여기서 무슨 일이 일어나고 있는지 생각해 봅시다. jQuery가 Ajax 방법에 무엇을하든, 어느 시점에서 기본 XMLHTTPREQUEST를 만듭니다.
무대 뒤에서 어떻게 작동하는지 봅시다. MDN에서 발견 된 가장 간단한 예는 다음을 보여줍니다.
우리는 새로운 xmlhttprequest 인스턴스가 생성 된 것을 볼 수 있습니다. 그것은 우리가 실제로 신경 쓰지 않는 OnreadyStateChange 메소드와 개방 및 전송 방법을 가지고 있습니다. 매우 좋은. 따라서 우리의 아이디어는 보내기 메소드를 패치하고 특정 URL에 대한 통화를 수행하지 말라고 지시하는 것입니다.
좋아, 객체 자체에서 대상 URL을 얻을 수 없다는 것이 밝혀졌습니다. 죄송합니다. 그러면 우리는 무엇을해야합니까? 우리는 그것을 물체에 올려 놓았습니다. URL을 얻을 수있는 첫 번째 기회를 찾고, Open 메소드가이를 두 번째 매개 변수로 받아 들인다는 것을 알 수 있습니다. 객체 자체에서 URL을 사용할 수 있도록 MP Open 메소드부터 시작하겠습니다. <code class="language-javascript">FeedbackBox.prototype.init = function() {
// 我们想要跳过的广告服务器调用
$.ajax('vendor/service.json', {
method: 'GET'
}).then(function(data) {
console.log("FeedbackBox: AdServer contacted");
});
...
</code>
이전과 마찬가지로, 우리는 나중에 사용하기 위해 원래 오픈 메소드를 변수에 저장합니다. 그런 다음 사용자 정의 구현으로 원래 구현을 무시합니다. JavaScript (동적 언어)를 사용할 수 있으므로 언제든지 새 속성을 생성하고 이름을 _URL로 이름을 지정할 수 있습니다.
이 외에도 다른 작업을 수행하지 않고 원래 열린 메소드를 호출합니다. <code class="language-javascript">function FeedbackBox(elem, options) {
this.options = options;
this.element = elem;
this.isOpen = false;
}
FeedbackBox.prototype.toggleError = function(obj, isError) {
...
}</code>
Send MP를 다시 방문하면 조건 검사를 해결하는 방법이 분명합니다. 다음은 수정 된 버전입니다
결론
여기서 보는 것은 원숭이 패치를 사용하여 런타임시 코드의 동작을 변경하는 것에 대한 간략한 소개입니다. 그러나 더 중요한 것은이 게시물이 원숭이 패치를 다루는 방법에 대한 아이디어를 제공하기를 바랍니다. 패치 자체는 일반적으로 간단하지만 런타임에 코드를 조정하는 방법에 대한 아이디어를 갖는 것이 중요합니다.
또한, 원숭이 패치에 대해 어떻게 생각하든 동적 언어를 사용하는 것의 아름다움을 볼 수있는 기회가 있기를 바랍니다. <code class="language-javascript">FeedbackBox.prototype.toggleError = function(obj, isError) {
if(isError) {
obj.addClass("error");
} else {
obj.removeClass("error");
}
};</code>
실용 원숭이 패치 (FAQ)에 대한 FAQ
JavaScript에서 원숭이 패치의 개념은 무엇입니까?
JavaScript의 원숭이 패치는 내장 또는 사용자 정의 객체의 동작이 일반적으로 객체의 프로토 타입을 추가, 수정 또는 변경하여 수정되는 기술입니다. 이것은 원래 소스 코드를 변경하지 않고 코드의 동작을 확장하거나 변경하는 방법입니다. 이 기술은 수리를 구현하고 기존 기능을 향상 시키며 테스트 및 디버깅 목적으로도 사용될 수 있습니다.
JavaScript와 Python의 원숭이 패치의 차이점은 무엇입니까?
JavaScript와 Python의 원숭이 패치의 개념은 동일하지만 객체를 수정하거나 확장하는 동작 - 구현은 언어 자체의 차이로 인해 다릅니다. JavaScript에서 원숭이 패치는 일반적으로 물체의 프로토 타입을 수정하여 수행되는 반면, 파이썬에서는 클래스 또는 인스턴스 방법을 추가하거나 변경하여 수행됩니다. 두 언어의 유연성은 원숭이 패치를 허용하지만,이 기술은 예상치 못한 행동을 피하기 위해주의해서 사용해야합니다.
원숭이 패치가 JavaScript에서 모범 사례로 간주됩니까?
원숭이 패치는 강력한 도구이지만 논란이없는 것은 아닙니다. 원래 소스 코드를 변경하지 않고도 기능을 신속하게 수정하거나 확장 할 수 있지만, 특히 남용하거나 부적절한 경우 예측할 수없는 행동과 충돌로 이어질 수 있습니다. 따라서주의와 책임이있는 원숭이 패치를 사용하는 것이 좋습니다. 항상 전체 코드 기반에 잠재적 인 영향을 고려합니다.
원숭이 패치의 잠재적 위험은 무엇입니까?
원숭이 패치의 주요 위험은 코드에서 예측할 수없는 행동과 충돌로 이어질 수 있다는 것입니다. 기존 객체의 동작을 수정하기 때문에 코드 기반의 다른 곳에서 패치 된 메소드를 사용하면 코드를 중단 할 수 있습니다. 또한 수정을 알지 못하는 다른 개발자들 사이에서 혼란을 일으킬 수 있습니다. 따라서 원숭이 패치를 명확하고 포괄적으로 기록하는 것이 중요합니다.
JavaScript에서 함수를 깨끗하게 패치하는 방법은 무엇입니까?
JavaScript의 함수를 깨끗하게 패치하려면 원래 함수 주변에 래퍼를 만들 수 있습니다. 이 래퍼 함수는 원래 기능을 호출 한 다음 필요에 따라 동작을 추가하거나 수정합니다. 이런 식으로 원래의 기능은 변경되지 않고 추가 동작이 명확하게 분리되어 코드를 이해하고 유지 관리하기 쉽게 만듭니다.
원숭이 패치를 테스트 및 디버깅에 사용할 수 있습니까?
예, 원숭이 패치는 테스트 및 디버깅에 유용한 도구로 사용될 수 있습니다. 함수 또는 메소드의 동작을 수정하거나 확장하면 다른 시나리오를 시뮬레이션하거나 오류를 주입하거나 로그를 추가하여 코드 실행을 추적 할 수 있습니다. 그러나 예상치 못한 부작용을 피하기 위해 생산 코드에서 이러한 패치를 제거하거나 분리하는 것이 중요합니다.
JavaScript의 원숭이 패치에서 프로토 타입은 어떤 역할을합니까?
JavaScript에서 프로토 타입은 원숭이 패치에서 중요한 역할을합니다. JavaScript는 프로토 타입 기반 언어이므로 각 객체에는 속성과 메소드를 상속하는 프로토 타입이 있습니다. 객체의 프로토 타입을 수정하면 해당 객체의 모든 인스턴스의 동작을 변경할 수 있습니다. 이것은 JavaScript의 원숭이 패치의 기초입니다.
원숭이 패치는 JavaScript의 성능에 어떤 영향을 미칩니 까?
JavaScript 성능에 대한 원숭이 패치의 영향은 일반적으로 적습니다. 그러나 원숭이 패치의 과도하거나 부적절한 사용은 성능 문제를 유발할 수 있습니다. 예를 들어, 코드에서 패치 된 메소드를 자주 사용하면 추가 동작이 실행 속도가 느려질 수 있습니다. 따라서주의를 기울여 원숭이 패치를 사용하고 정기적으로 성능을 모니터링하십시오.
원숭이 패치를 사용하여 내장 JavaScript 객체를 확장 할 수 있습니까?
예, 원숭이 패치는 내장 JavaScript 객체를 확장하는 데 사용될 수 있습니다. 내장 객체의 프로토 타입을 수정하면 객체의 모든 인스턴스에 사용할 수있는 새로운 메소드 또는 속성을 추가 할 수 있습니다. 그러나 이것은 동일한 방법이나 속성을 도입 할 수있는 미래 버전의 JavaScript와의 충돌을 피하기 위해주의해서 수행해야합니다.
JavaScript에서 원숭이 패치에 대한 대안은 무엇입니까?
JavaScript에는 원숭이 패치에 대한 몇 가지 대안이 있습니다. 일반적인 방법은 원래 객체를 포함하는 새 개체를 만들고 동작을 추가하거나 덮어 쓰는 조합을 사용하는 것입니다. 또 다른 방법은 상속을 사용하는 것입니다. 여기서 원래 클래스에서 물려 받고 메소드를 덮어 쓰는 새 클래스를 생성하는 것입니다. 이러한 방법은 원숭이 패치와 유사한 유연성을 제공 할 수 있지만 캡슐화가 향상되고 충돌 위험이 줄어 듭니다.
