OO Javascript - イベント

Question

私はOOのアプローチを使ってJavaScriptを学ぼうとしています。これは私のコードです：

/*global document, MouseEvent */ 
MouseEvent.prototype.mouseCoordinates = function() { 
    return { 
     'x' : this.pageX - this.target.offsetLeft, 
     'y' : this.pageY - this.target.offsetTop 
    }; 
}; 

(function() { 
    var Pencil = function() {}, 
     Canvas = function() { 
      this.element = document.getElementById('canvas'); 
      this.tool = new Pencil(); 

      this.element.addEventListener('click', this.tool.draw, false); 
     }, 
     c; 

    Pencil.prototype.draw = function (event) { 
     var context = event.target.getContext('2d'), 
      coordinates = event.mouseCoordinates(); 

     context.fillRect(coordinates.x, coordinates.y, 5, 5); 
    }; 

    c = new Canvas(); 
}()); 

私はMSペイントのようなことをしようとしています。そこで、CanvasオブジェクトとPencilオブジェクトを作成しました。私は手続き的なアプローチを使用してそれを行うことができますが、私はしたくありません。私は今、どん​​な図書館も使いたくない、ただ勉強しているだけだ。

私はこれらの質問をしました：

• は、イベントを登録するためにあらゆることをお勧めはありますか？オブジェクトコンストラクタを使用してイベントを登録する必要がありますか？

• 私のキャンバスオブジェクトにはツール（この場合は鉛筆）オブジェクトがあります。概念的にはそれは良くありません。私のキャンバスにはツールオブジェクトがありません。それは描画するサーフェスを提供する必要があります、それはそれです！しかし、コールバック（クリックイベント）としてそこにあります。どうすればこの問題を解決できますか？

• すべてのツールは同じインターフェイスを持ちますが、動作は異なります。 Javascriptを使用してインターフェースを作成できますか？

• その他に何が改善できるのですか？

UPDATE：私は（！私はあなたの助けに感謝、ありがとうございました）すべてのヒントに従ってきた

(function() { 
    var pencil = { 
     draw : function (event) { 
      var context = event.target.getContext('2d'), 
       coordinates = event.mouseCoordinates(); 

       context.fillRect(coordinates.x, coordinates.y, 5, 5); 
     } 
    }, 
     currentTool = pencil, 
     canvas = (function() { 
      var object = {}; 
      object.element = document.getElementById('canvas'); 

      object.element.addEventListener('click', function (event) { 
       currentTool.draw(event); 
      }, false); 

      return object; 
     }()); 
}()); 

。どう思いますか？今私は "グローバル" currentTool変数があります。あなたはそれについてどう思いますか？ありがとう。

ありがとうございます。

Answer 1

あなたはライブラリを使用したくないとお知りになりましたが、jqueryなどのオープンソースライブラリのソースコードを参照することをお勧めします。真剣に多くのことを学びたいのであれば、本当に良い開発者が書いたコードを見て、あなたがちょうど尋ねたものに対して彼らがどのようにしたかを見てください。私が知る限りでは、読書を維持することを除いて、それは良い練習でプログラミング言語を学ぶ最善の方法の1つです。あなたの鉛筆ツールを聴くことができ

Answer 2

• それは ので、ここで、（ をキャプチャまたは位相をバブリングすると、あなたの問題の始まりに過ぎない）任意のフレームワークなしでイベントを登録するにはちょっと難しいですされている他の質問への答えは

• キャンバスイベント、そして最終的に
  誰かがクリックを送信すると、鉛筆ツールはアクティブツールであれば
  グローバルオブジェクト（シングルトン）を探します。表示されている場合は、
  キャンバス上の適切なピクセルの色を変更します。

• javascriptにはインタフェースがありません（PHPのように）、プロトタイプ
  の動作のみです。あなたは抽象クラスをどのように書くことができますか？
  （プロトタイプ名前空間内の）メソッドは、実装されていない例外をスローします。
  強制的にオーバーライドします。

• 改善のために、確かにあなた自身と
  ブラウザの動作が異なると戦うことに気付くでしょう。だからこそ（すべてではない）
  というフレームワークが存在するのです。私が見ることができるように、あなたはOOスタイルの開発が好きです。私は
  MooToolsやもっと難しいものを試してみてください。
  クロージャフレームワーク。ここでそれらについての質問をしてください。