Unobtrusive JavaScripts

I fredags så började jag och en kollega hastigt prata lite angående kodkonventioner vilket alltid får igång mig då jag älskar att ha rent och strukturerat i mina projekt. Därför kom jag på att jag kan skriva en liten bloggpost om hur jag tänker när jag lägger upp mina javascript när jag kodar gränssnitt.

Jag är ett stort fan av Unobtrusive Javascripts där man strävar efter att helt separera scriptdelen från sin html-content. Jag använder i dagsläget nästan alltid jQuery när jag kodar javascript. Jag tänker inte gå inte gå in djupare på hur det fungerar i denna bloggpost. Generellt när jag jobbar strävar jag åt DDD-hållet så att alla namespaces innehåll enkelt kan förstås av kunden, även om han inte har någon teknisk kunskap. (Självklart ligger oerhört mycket mer i konceptet DDD)

I mitt scenario jobbar jag med ett projekt som kallas “Acme”. Jag utgår därför från en scriptfil som jag döper till “acme.js”. I den lägger jag funktionalitet som är gemensam för hela sidan. Den skulle kunna se ut såhär;

var acme = function() {
	
	// Initierare
	var init = function() {
		// Initiera eventuella kontroller etc.
		// Anropa eventuella andra privata funktioner
		somePrivateFunction();
	}, 
	
	// Denna funktionen blir "privat" eftersom den inte returneras
	somePrivateFunction = function() {
		
	}
	
	return {
		init: init
	};
}();

$(function() {
	acme.init();
});

När denna scriptfil körs på sidan kommer automatiskt init anropas efter dom:en har laddats. Då kan man där i manipulera dom:en eller kanske binda något event osv.

Säg sedan att mitt projekt innehåller ett forum som behöver specifik javascriptlogik som bara gäller för forumet. Jag skapar därför en “acme.forum.js” som skulle kunna se ut såhär;

acme.forum = function() {
	var someVariable,
	
	// Initierare, bind knapphändelser m.m
	init = function() {
		$("#someButton").click(validateEmail);
	},
	
	// Validerar e-postadress
	validateEmail = function(event) {
		// Logik för validering
	}
	
	return {
		init: init
	};
}();

$(function() {
	acme.forum.init();
});

Här bygger jag vidare på “acme” variabeln som vi tidigare skapat (eller “namespacet” om ni nu så vill). Enligt detta tänk fortsätter jag med alla delar av projektet.

När koden sedan skall ut i produktion brukar jag se till att minifiera och kombinera alla mina javascript (även tredjepartsbibliotek t.ex jQuery) till en enda fil vid namn “acme.min.js”. Detta gör jag för att få ner antalet requests så mycket som går och även få ner storleken på dem. Jag har haft nöjet att jobba ihop med Robert Nyman som har en bra bloggpost om vilka minifierare som finns att tillgå i denna posten.

I mitt fall har jag använt YUI Compressor for .NET som ett “post build-event” som även sköter minifiering av din CSS. Ett tips är att endast inkludera den minifierade CSS:en när det inte är debugg-kompilerat så blir det oerhört mycket enklare i utvecklingsprocessen.

// Markus