Breakpoint js

Breakpoint - przydatna funkcja do przerywania asynchronicznego kodu. Wymaga obecności DOM (Document Object Model). Tworzy w nim przycisk, który umożliwia ręczne wywołanie zatrzymanych fragmentów kodu. Funkcja pozwala sprawnie śledzić błędy w ekstremalnych warunkach :)

var Breakpoint = (function(doc){
  doc = doc || document;
  var fns = [];

  var btn = doc.createElement('button');
  btn.innerHTML = 'Breakpoint';

  btn.addEventListener('click', function(e){
    fns.shift().call();
    update();
  });

  doc.body.appendChild(btn);

  var update = function(){
    btn.disabled = !fns.length;
  };

  update();

  return {
    add: function(fn){
      fns.push(fn);
      update();
    }
  };
})();

Przykład użycia:

// bez Breakpoint:
var test = function(){
  // czynnosc A
  // czynnosc B
};

// to samo z Breakpoint:
var test = function(){
  // czynnosc A
  Breakpoint.add(function(){
    // czynnosc B
  });
};

LIFE, THE UNIVERSE, AND EVERYTHING

#include <stdio.h>

int main(){
  int i;

  while( 1 ){
    scanf("%d", &i);

    if( i == 42 )
      break;

    printf("%d\n", i);
  }
   
  return 0;
}

Array unique - czyli pozbywamy się duplikatów

Funkcja jako argument przyjmuje tablicę z danymi dowolnego typu. W rezultacie funkcja zwraca tablicę zawierającą tylko unikalne elementy tablicy źródłowej.

var unique = function(arr){
  return arr.filter(function(el, i){
    return arr.indexOf(el, i+1) === -1;
  });
};

Poniżej zamieszczam funkcję robiącą to samo co powyższa funkcja z drobnym wyjątkiem. Poniższa funkcja zawiera dwa dodatkowe wykonania funkcji reverse co pozwoliło na zachowanie naturalnej kolejności elementów występujących w tablicy. Pierwsze wystąpienie danego elementu pozostaje w tym samym miejscu, kolejne wystąpienia tego samego elementu są ignorowane. W poprzedniej wersji funkcji to ostatni element zostałby zachowany.

var unique = function(arr){
  return arr.reverse().filter(function(el, i){
    return arr.indexOf(el, i+1) === -1;
  }).reverse();
};

let unique = [...new Set(myArray)];

getType - sprawdzenie typu, pewniejsze od typeof

Poniżej zamieszczam funkcję zwracającą typ danej. Funkcja w przeciwieństwie do operatora typeof znacznie skuteczniej oddaje typ przekazanej danej. Pomysł został zaczerpnięty z serwisu JavaScript Garden. Funkcja do sprawdzenia typu wykorzystuje generyczną funkcję toString podstawowego obiektu.

var getType = function(obj){
  return ({}).toString.call(obj).slice(8, -1);
};

Poniżej szybkie sprawdzenie różnic funkcji getType oraz operatora typeof. Pomaga on uświadomić sobie, z jakimi problemami mamy do czynienia, jeśli używamy operatora typeof.

[{}, [], '', 0, 1/0, false, function(){}, /./, null, undefined].map(function(obj){
  return [getType(obj), typeof obj];
});

Tak naprawdę operator typeof JavaScriptu ma tylko jedno uzasadnione zastosowanie.

typeof variable === 'undefined';

Object each - iteracja po obiekcie

Poniżej zamieszczam bardzo przydatną funkcję pozwalającą w prosty sposób iterować po obiekcie.

var each = function(obj, fn){
  var res = {};
  for( var i in obj ){
    if( obj.hasOwnProperty(i) ){
      res[i] = fn.call(obj, obj[i], i);
    }
  }
  return res;
};

Przykład zastosowania:

each({
  name: 'Grzegorz',
  job: 'web developer',
  website: 'gkucmierz.blogspot.com'
}, function(value, key){
  alert([key, ': ', value].join(''));
});

Twoja przeglądarka nie obsługuje JavaScript

Przeglądając kod źródłowy pewnej strony natknąłem się na ciekawy kawałek kodu. Na szczególną uwagę zasługuje linijka 902 :)

Array shuffle

Implementacja funkcji mieszającej elementy tablicy w języku JavaScript.

Array.prototype.shuffle = function(){
  return this.sort(function(){
    return Math.random() - 0.5;
  });
};

Przykład użycia:

[1, 2, 3].shuffle();

Poniżej inna implementacja bez użycia prototypów.

var shuffle = function(arr){
  return arr.sort(function(){
    return Math.random() - 0.5;
  });
};

Pobranie treści strony przy pomocy XMLHttpRequest

Poniższa funkcja pozwala pobrać treść podstrony przy pomocy JavaScript.

var get = function(url, fn){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onabort = xhr.onerror = function(){
    fn(false);
  };
  xhr.onreadystatechange = function(resp){
    if( xhr.readyState === 4 ){
      fn(resp.target.responseText, resp);
    }
  };
  xhr.send();
};

Kliknięcie w dowolny element HTML przy pomocy js

Poniższa funkcja pozwala na kliknięcie w dowolny obiekt HTML przy pomocy JavaScript, niemal identycznie jak gdyby to zrobił użytkownik.

var click = function(htmlElement){
  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('click');
  htmlElement.dispatchEvent(evt);
};

W podobny sposób można oczywiście wywoływać wszystkie inne możliwe zdarzenia.

Wykrywanie interakcji użytkownika

Poniżej zamieszczam prosty kod umożliwiający wykrycie interakcji użytkownika z przeglądarką internetową.

'keydown keyup mousemove mousedown mouseup'.split(' ').map(function(evtName){
  window.addEventListener(evtName, function(e){
    console.log(e.type);
  }, false);
});

Powyższy kawałek kodu można łatwo rozbudować, tworząc obiekt pozwalający na proste odczytanie czy użytkownik jest obecny na stronie.

var idleDetection = (function(delay){
  if( typeof delay === 'undefined' ){
    delay = 6e4; // 60s
  }
  var t;

  var interaction = function(){
    t = Date.now();
  };
  'keydown keyup mousemove mousedown mouseup'.split(' ').map(function(evtName){
    window.addEventListener(evtName, interaction, false);
  });
  interaction();

  return Object.create(null, {
    idle: {get: function(){
      return Date.now() - t >= delay;
    }}
  });
})(2e4);

Konstruktor funkcji przyjmuje jeden opcjonalny parametr, który jest wartością czasu braku interakcji użytkownika, po upłynięciu którego użytkownik zostaje uznany za nieobecnego na stronie. Domyślna wartość tego czasu wynosi 1 minutę. Poniższy kawałek kodu demonstruje działanie funkcji.

setInterval(function(){
  document.title = idleDetection.idle ? 'idle' : 'welcome back';
}, 1e3);