Repozytorium Web Developera

JavaScript - podstawy, wydajność

Przydatne linki - głównie ES5

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 przypadku this, 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 przestrzeni var 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();