Skip to content
No description or website provided.
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
presentation.txt
readme.mdown

readme.mdown

Javascript Conventions

== vs ===

1 == "1"; // true
false == " \n\t "; // true
0==false; // true
new Array([],null,undefined,null) == ",,,"; //true

Fixed with ===:

1 === "1"; // false
false === " \n\t "; // false
0===false; // false
new Array([],null,undefined,null) === ",,,"; // false

Avoiding globals

Before:

var date = new Date(),
    number = date.getDay(),
    day = "";
switch (number)
{
case 0:
  day = "Sunday";
  break;
case 1:
  day = "Monday";
  break;
case 2:
  day = "Tuesday";
  break;
case 3:
  day = "Wednesday";
  break;
case 4:
  day = "Thursday";
  break;
case 5:
  day = "Friday";
  break;
case 6:
  day = "Saturday";
  break;
}

After (with anonymous function):

window.day = "";
(function() {
  var date = new Date(),
      number = date.getDay();
  switch (number)
  {
  case 0:
    window.day = "Sunday";
    break;
  case 1:
    window.day = "Monday";
    break;
  case 2:
    window.day = "Tuesday";
    break;
  case 3:
    window.day = "Wednesday";
    break;
  case 4:
    window.day = "Thursday";
    break;
  case 5:
    window.day = "Friday";
    break;
  case 6:
    window.day = "Saturday";
    break;
  }
})();

Using closures

Before:

function adder(x, y) {
  return x + y;
}
alert(adder(2, 3)); // 5
alert(adder(2, 5)); // 7

After (with closures):

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add2 = makeAdder(2);

alert(add2(3)); // 5
alert(add2(5)); // 7

Inline HTML

Before:

var widgetStructure = '<div id=' + widgetID + '>' +
                          '<h2 id="' + widgetTitleID + '">' + widgetTitle + '</h2>' +
                        '<div id="' + widgetContentID + '" style="' + widgetContentStyles + '">' +
                          (function() {
                            var paras = '';
                            for (var i = 0; i < paraItems.length; ++i) {
                              paras += '<p>' + paraItems[i] + '</p>';
                            }
                            return paras;
                           })() +
                        '</div>' +
                        '</div>';

After:

<div id="widget-template" style="display-none">
...
</div>

var new_widget = $("#widget-template").clone();
var widget = {
  id: widgetId,
  id_title: widgetTitleID
  title: widgetTitle,
  content_id: widgetContentID, 
  content_styles: widgetContentStyles,
  paragraphs:  paraItems
}
var html = new EJS({url: 'widget.ejs'}).render(data);

Inline Javascript vs. Unobstructive Javascript

Before:

<button class="alert-me" onClick="alert('42!')">

After:

$("button.alert-me").live("click", function() {
    alert("42!");
  });

Javascript's this

function HotDog() {
    this.condiments = "mustard, ketchup";
    this.getCondiments = function() {
      alert(this.condiments);
    }
}
var myHotDog = new HotDog();
// Call the getCondiments function in 3 seconds
setTimeout(myHotDog.getCondiments, 3000); // error

Fixed:

var myHotDog = new HotDog();
setTimeout(function() {
    myHotDog.getCondiments();
}, 3000);

Fixed (using jQuery to redefine this):

// Call the getCondiments function in 3 seconds
setTimeout($.proxy(myHotDog.getCondiments, myHotDog), 3000); // no error

Self

Use self as a way to point to the current object and not redefine this

$(".add-button").click(function (e) {
  // this points to the HTML element
  // so I'll define self to point to the jQuery obj
  var self = $(e.target);
});
Something went wrong with that request. Please try again.