Utvecklingstips

Modern Javascript utan ramverk

Eftersom många har sina Javascript-kunskaper från en tid då Javascript var krångligt och bara några få kommandon fungerade överallt är man naturligt nervös. Dessutom är ju språket dynamiskt och relativt oförlåtande och många editorer har svårt att verifiera syntaxen ordentligt. Resultatet är att man inte använder sig av de smarta utökningarna som har kommit i Javascript den senaste tiden. Många förlitar sig även på jQuery som utökar äldre webbläsare med samma typ av funktionalitet som numera finns inbyggd i Javascript. jQuery är väldigt bra men när man är i en kontrollerad miljö som t ex Node.js är det väldigt onödigt att använda sig av ett ramverk som erbjuder samma funktionalitet som den inbyggda motorn.

Nedan visar jag några trix som går att använda i alla moderna webbläsare från och med IE9 (HTML5-kompatibla) och självklart fungerar allt detta i Node.js – allt utan ett enda ramverk.

// [] ger exakt samma resultat som new Array()
var array=['hello','world'];

// forEach stöds ej i IE8 men i alla andra webbläsare inkl IE9
array.forEach(function(item){
	console.log(item)
});

// lite likt LINQ i C# kan man bearbeta sina listor och få tillbaka filtrerade resultat
var filteredArray=array.filter(function(item){
	return item=='hello';
});

// returnerar en ny array ['HELLO', 'WORLD']. Fungerar i IE9
array.map(function(item){return item.toUpperCase()});

// every körs för varje del av en array och nedanstående eturnerar true om alla returnerar true
array.every(function(item){return item=='hello' });

// some körs för varje del av en array och returnerar true om någon av delarna returnerar true
array.some(function(item){return item=='hello' });

// returnerar en del av en array, i det här fallet den första
array.splice(0,1);

// sortera i bokstavsordning
var sortedArray=array.sort(function(a,b){
	return a-b;
});

// nu till lite användning av våra nya fina listbearbetningsfunktioner
var playHistory=[
	{
        	artist:'Madonna',
        	title:'Frozen'
    	},
    	{
		artist:'Madonna',
        	title:'La Isla Bonita'
	},
    	{
        	artist:'Madonna',
        	title:'American Pie'
    	},
    	{
        	artist:'Madonna',
        	title:'Frozen'
    	},
    	{
        	artist:'Madonna',
       		title:'Frozen'
    	}
];

// behöver deklareras temporärt
var group={};

// Exempel på arrayfunktioner för att ta fram en topplista
var topSongs=playHistory

// vi letar igenom alla artister och sparar unika låtar
.map(function(item){
   // enkelt = innebär tilldelning vilket gör att vi bara behöver leta en gång. Kan upplevas som lite farligt.. ;)

   if(song=group[item.title])
        song.count++;
   else
        return group[item.title]={artist: item.artist, title : item.title, count :1};

}, topSongs)

// sortera på flest antal
.sort(function(a,b){return a.count>b.count})

// motsvarande .take(3);
.slice(0,3);

För att använda JSON behövs inga bibliotek när du har en modern webbläsare:

// serialiserar ett objekt till en sträng: "['hello', 'world']"
var string=JSON.stringify(array);

// skapar ett objekt av en JSON sträng
var object=JSON.parse(string);

För att skapa objektorienterad struktur används vanliga funktioner som innehåller variabler och funktioner som fungerar på motsvarande sätt som publika och privata egenskaper eller metoder.

// så här ser en klass ut i Javascript
function Additioner=function() {
	// för att alltid kunna hänvisa till klassen från privata metoder sätter vi ett eget namn på instansen: 'self'	
	var self=this;
           
	// privat variabel i klassen
        var total=0;

        // privat metod i klassen
        var add=function(number)	
	{
        	// i en privat metod blir 'this' inte längre lokalt för klassen utan för den privata metoden. 	
		// Då använder vi vår egen definierade closure self istället för 'this'	
		self.total=self.total+number;	
	} 

        // publik metod
        this.add=function(number,callback){		
		this.total=this.total+number;
	
		// javascript lämpar sig ypperligt för att bygga asynkrona tjänster och försök därför alltid gör
                if(callback)
			callback(this.total);	
	}
	
	// publik metod	
	this.getResult=function()
	{	
		// i publika metoder finns 'this' och därför använder vi den
                return this.total;	
	}
}

// för att använda sin klass:
var additioner= new Additioner();
additioner.add(1);
additioner.add(5, function(result) {
	console.log(result);// 6
});

Du kan även använda objektet .prototype för att utöka superklassen och då ärvs alla nya egenskaper i superklassen ut till alla instanser av ditt objekt.

String.prototype.endsWith =function(suffix) {
	return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
Andra bloggar om: 
 
Christian Landgren

2012-05-10 kl. 10:50

Web Analytics