title: Writing OO Javascript with jQuery
body: <p>I come from a Prototype JS background where OO Javascript is encouraged through the use of <code>Class.create()</code>. Now I am doing some JQuery work and I am trying to write some properly structured JQuery code where I can, for example, call the same object function from two different click event handlers. </p>
  
  <p>Here is the code in Prototype:</p>
  
  <pre><code>document.observe("dom:loaded", function() {
  
      // create document
      APP.pageHelper = new APP.PageHelper();
  
  
  });
  
  // namespace our code
  window.APP = {};
  
  // my class
  APP.PageHelper = Class.create({
  
    // automatically called
    initialize: function(name, sound) {
      this.myValue = "Foo";
  
      // attach event handlers, binding to 'this' object
      $("myButton").observe("click", this.displayMessage.bind(this))
  
    },
  
    displayMessage: function() {
      console.log("My value: " + this.myValue); // 'this' is the object not the clicked button!
    }
  
  });
  </code></pre>
  
  <p>I am wondering how the following code can be replicated in JQuery where there is no way to bind a function call to the object it is called in, and 'this' is always the element clicked. </p>
  
  <p>I have heard of a way to do it the Douglas Crockford 'module' pattern (http://www.yuiblog.com/blog/2007/06/12/module-pattern/) but I would love if someone could show me how you would implement the code above using JQuery and that pattern. </p>
  
  <p>Thanks in advance. </p>