Skip to content

Instantly share code, notes, and snippets.

@robballou
Created December 17, 2012 15:39
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robballou/4319216 to your computer and use it in GitHub Desktop.
Save robballou/4319216 to your computer and use it in GitHub Desktop.
Code from my JavaScript Best Practices from AtenCamp 2012
// closures
(function($, Drupal, drupalSettings) {
var snow_base = 10;
Drupal.behaviors.snowman = {
attach: function() {
// can access $, Drupal, drupalSettings
}
}
// this stuff will get passed into this closure
})(jQuery, Drupal, drupalSettings);
// Global variables
var snow_base = 25,
snow_level = 'none';
// both vars are available here
if (snow_base < 5) { snow_level = 'a bit'; }
elseif (snow_base > 30) { snow_level = 'a bit more'; }
function buildSnowman() {
// both vars are available here too
}
// prototype style jQuery plugin
(function($) {
// now call $(‘something’).snowman();
$.fn.snowman = function() {
}
})(jQuery);
// core jQuery plugin style
(function($) {
// now call $.snowman();
$.snowman = function() {
}
})(jQuery);
/**
* Description
*/
(function($) {
// plugin methods
// ----------------------------------------------------------------
var methods = {
init: function() {
// init plugin
}
};
// plugin code
// ----------------------------------------------------------------
$.fn.plugin = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
}
else {
$.error('Method ' + method + ' does not exist on jQuery.plugin');
}
};
})(jQuery);
{
"browser"     : true, // Can use default global variables like document, window, etc.
"curly"       : true, // Require {} in if, for
"eqeqeq"      : true, // Require strict equals
"expr"        : true, // Drupal-specific, needs to be evaluated individually during review
"forin"       : true, // Drupal-specific, already fixed core bugs
"latedef"     : true, // Define functions before using them
"newcap"      : true, // Drupal Coding Standard
"noarg"       : true, // Can't use arguments.callee or arguments.caller
"predef"      : ["Drupal", "drupalSettings", "jQuery", "_", "matchMedia"], // Drupal-specific
"trailing"    : true, // Make sure there is no trailing spaces
"undef"       : true, // Variables has to be defined before use
"unused"      : true // Declared variables must be used
}
// use literals
// not this
var myObject = new Object();
myObject.functionality = function() { ... }
var myArray = new Array();
// do this
var myObject = {};
var myArray = [];
// local scope
// var is not available here
function buildSnowman() {
var buttons = 3;
}
// or here
// namespacing code
var snowman = {
size: 'medium',
buttons: 3,
build: function() {
var something = 10;
return ‘☃’;
}
}
snowman.size;
something; // undefined!
// no shorthand code!
// not this
if (something == 10)
doSomething();
// do this
if (something == 10) {
doSomething();
}
// use semicolons
// not this
var total = item1 + item2
$(‘#something’).text(total)
// do this
var total = item1 + item2;
$(‘#something’).text(total);
// Watch Yer Vars
// not this
for (var i = 0; i < list.length; i++) {
var something = list[i]; // defines this over and over
doSomething(list[i]);
}
// do this
var something;
for (var i = 0; i < list.length; i++) {
something = list[i];
doSomething(list[i]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment