자바 스크립트 모듈 설계, 참고 자료

Question

자바 스크립트 모듈과이를 작성하는 방법을 배우고 있습니다. 나는 내 패턴이 옳았다는 것을 100 % 확신하지 못한다는 쟁점에 부딪쳤다. 나에게 쉬운 나중에 할 수있는 모든 의견은 좋을 것이지만 내 문제는 프로토 타입을 올바르게 사용하는 방법을 모르겠다.

내가 이렇게 내 모듈을 사용

 var cm = CodeMirror.fromTextArea(document.getElementById("code"), { 
      lineNumbers: true, 
      matchBrackets: true, 
      mode: "text/x-csharp" 
     }); 
     var adapt = new $.codeMirrorSignalRAdapter(cm, $.connection.codeHub); 

하지만 내 adapter.prototype의 hubChange에서

에서, this.silent이 정의되지 않습니다. var 어댑터 = function (cm, hub)이 생성자라고 생각하고 프로토 타입 함수에서 자체 속성 [self, cpu, silent]에 액세스하는 방법을 모르겠습니다.

(function ($, window) { 
    "use strict"; 

    if (typeof ($) !== "function") { 
     // no jQuery! 
     throw new Error("CodeMirrorAdapter: jQuery not found. Please ensure jQuery is referenced before the SignalR.js file."); 
    } 
    if (typeof ($.signalR) !== "function") { 
     throw new Error("CodeMirrorAdapter: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/hubs."); 
    } 

    var adapter = function (cm, hub) { 
     var self = this; 
     self.cm = cm; 
     self.hub = hub; 
     self.silent = false; 

     cm.on("change", function (_, change) { self.onChange(change); }); 
     hub.client.Change = self.hubChange; 

     return self; 
    }; 

    adapter.fn = adapter.prototype = { 
     init: function (cm, hub) { 

     }, 
     onChange: function (change) { 
      if (!this.silent) { 
       this.hub.server.change(change) 
         .done(function() { }) 
         .fail(function (ee) { alert(ee) }); 
      } 
     }, 
     hubChange: function (change) { 
      alert(this.silent); 
      this.silent = true; 
      this.cm.replaceRange(change.text[0], change.from); 
      this.silent = false; 
     }, 
    }; 


    $.codeMirrorSignalRAdapter = adapter; 
}(window.jQuery, window)); 

이 키워드의 문제 외에도 모듈 디자인이 다소 괜찮습니까?

Answer 1

this의 값은 5 가지 옵션 중 하나 일 수 있습니다. 자세한 내용은 MDN에 대한이 기사를 참조하십시오. https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

특정 경우, hub.client.Change = self.hubChange;에 hubChange을 처리기로 등록합니다. 문제는 핸들러가 호출 될 때 this이 올바른 어댑터 객체로 설정되었는지 확인하는 코드가없는 것입니다.

어떻게 보장할까요?

hub.client.Change = function() { self.hubChange.apply(self, arguments);}; 

당신은 우리가 수행 한 것은 당신이 바인딩 cm.on("change")했던 것과 유사한 더

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply 여기 apply에 대해 읽을 수 있습니다.

귀하의 생성자 함수가 필요하지 않은 return self;로 끝나는 코드에

생각. 함수가 생성자 (예 : new 키워드)로 호출되면 암시 적으로 새 인스턴스를 반환합니다. new 키워드없이 함수를 호출하면 반환되는 함수가 반환되며이 경우 새 인스턴스가 반환되지 않습니다. this이 (가) 설정되었습니다. 대부분 window을 반환합니다. 제안, 그 줄을 제거하십시오. 그런 식으로 우연히 새로운 것이없이 그것을 부르면, 당신은 정의되지 않은 상태로 되돌아 올 것입니다.