Eight Simple Rules of Javascript

6define.js

for(i = 0; i < 5; i++) { 
  var times = i; // need to save this in our closure
  String.prototype["alert" + i] = function() {
    alert(this + times);
  }
};

"foobar".alert3()

6monkeypatch.js

String.prototype.alert = function() {
  alert(this);
};

"foobar".alert();

6send.js

alertFunction = this["alert"];
alertFunction("blahblahblah"); // Note that alert will no longer get the same value of this

solution1.html

<div class="submit-button">Submit</div>
<script type="text/javascript">
  bindElementToSubmit($(".submit-button"));
</script>

solution1.js

function bindElementToSubmit(element) {
  element.click(function() {
    server.submit();
  });
}

solution2.js

$("some-div").click(function() {
  var self = this;
  self.html("loading");
  $.get("/foobar", function(result){
    self.html(result);
  });
});

solution3.js

SubmitPage = Class.extend({
  processResults: function(results) {
    // do Something
  },

  constructor: function(element) {
    var self = this;
    element.click(function(){
      server.submit(function(result){
       self.processResults(results);
      });
    });   
  }
});

new SubmitPage($(".submit-button"));

trap1.js

$(".submit-button").click(function(){
  server.submit();
});

trap2.js

$("some-div").click(function() {
  this.html("loading"); // replaces the current div with 'loading'
  $.get("/foobar", function(result){
    this.html(result); // no such function html!!
  });
});

trap3.js

function processResults(results) {
  // do Something
}

function bindElementToSubmit(element) {
  element.click(function(){
    server.submit(function(result){
      processResults(results);
    });
  });
}

bindElementToSubmit($(".submit-button"));