JavaScript - podstawy, wydajność
Przydatne linki - głównie ES5
- Learn JavaScript Syntax in Y min
- Learn TypeScript Syntax in Y min
- Learn CoffeeScript Syntax in Y min
- JavaScript Garden
Zbiór sztuczek i zaawansowanych praktyk w programowaniu JavaScript.
- Wprowadzenie do programowania obiektowego w języku JavaScript
Mozilla Developers Network.
- JavaScript is Sexy
7-tygodniowy kurs jak prawidłowo nauczyć się JavaScript.
- Learn Intermediate and Advanced JavaScript
Kontynuacja 7-tygodniowego kursu.
- Artykuł Addy Osmani 9 Lessons From A Review Of JavaScript Code - bardziej o ES5
- Airbnb JavaScript Style Guide ES5
- Airbnb JavaScript Style Guide ES6+
- JavaScript Clean Code
- Ciekawostki
Podstawy
Dobre praktyki
- lepiej jest przypisać wybrany znacznik do zmiennej
var
, niż wyszukiwać w DOM ten sam element dwa razy; chyba, że wyszukujemy element tylko jeden raz, wtedy jest to mniej opłacalne; istotne również w przypadkuthis
, np. wobec jQuery warto przypisać do zmiennej:var $this = $(this)
- przed działaniem na jakimś elemencie DOM należy sprawdzić, czy on istnieje za pomocą
Array.prototype.indexOf()
- zawsze, gdy to tylko możliwe, warto używać selektorów z identyfikatorami elementów, ponieważ najszybszym sposobem pobrania elementu strony jest użycie selektora identyfikatora
- należy stosować selektor identyfikatora na początku selektora elementów potomnych, np. w przypadku jQuery:
$('#main a')
- w przypadku jQuery warto korzystać z funkcji
.find()
, ponieważ jej zastosowanie jest dwukrotnie szybsze od wykorzystania selektora elementu podrzędnego, np.$('#main').find('a')
, tyczy się to również podobnych funkcji jak np..children()
- należy unikać zbytniej szczegółowości, odwrotnie jak w przypadku CSS
- należy unikać wielokrotnego wywoływania metody
$(document).ready()
- dobrym zwyczajem jest, aby była wywoływana tylko raz i nie odwoływała się do funkcji anonimowej - JavaScript nie umożliwania tworzenia modułów ani przestrzeni nazw - można jednak tworzyć obiekty, które będą takie zachowanie odwzorowywać, np. globalny obiekt
myApp
- a przy rozszerzaniu tej przestrzenivar myApp = myApp || {};
Przykład JSON
Przykład literału obiektowego.
var person = {
firstName : 'Robert',
lastName : 'Kowalski'
};
DOM a wydajność
Poniższy kod:
var list = $("somelist");
var parent = list.parent();
for(var i = 0; i < 10000; i+= 1) {
list.append("Nowy element ");
}
Jest około 6 razy mniej wydajny od poniższego, a wszystko to poprzez chwilowe odłączenie elementu z drzewa DOM. Wielokrotne zmiany w drzewie DOM należy optymalizować.
var list = $("somelist");
var parent = list.parent();
list.detach(); //odłącza listę od drzewa DOM
for(var i = 0; i < 10000; i+= 1) {
list.append("Nowy element ");
}
parent.append(list); //dołącza listę do drzewa DOM
//lub alternatywnie:
var list = $("
");
for(var i = 0; i < 10000; i+= 1) {
list.append("Nowy element ");
}
list.appendTo($("listContainer"));
Podejście modułowe a prototypowe
Przykład podejścia modułowego
var moduleD = function () {
return {
data: dataArray,
init: function () {
this.addTable();
this.addEvents();
},
addTable: function () {
var td, tr;
var frag = document.createDocumentFragment();
var frag2 = document.createDocumentFragment();
for (var i = 0; i < rows; i++) {
tr = document.createElement('tr');
for (var j = 0; j < this.data.length; j++) {
td = document.createElement('td');
td.appendChild(document.createTextNode(this.data[j]));
frag2.appendChild(td);
}
tr.appendChild(frag2);
frag.appendChild(tr);
}
tbody.appendChild(frag);
},
addEvents: function () {
$('table').on('click', 'td', function () {
$(this).toggleClass('active');
});
}
};
}();
Przykład podejścia prototypowego
moduleG = function () {};
moduleG.prototype.data = dataArray;
moduleG.prototype.init = function () {
this.addTable();
this.addEvents();
};
moduleG.prototype.addTable = function () {
var template = _.template($('#template').text());
var html = template({'data' : this.data});
$tbody.append(html);
};
moduleG.prototype.addEvents = function () {
$('table').on('click', 'td', function () {
$(this).toggleClass('active');
});
};
var modG = new moduleG();