Cauta rapid aici ↑

Cum sa iti creezi rapid propria librarie Javascript

Nu este deloc greu sa iti creezi propria librarie Javascript atunci cand ai in spate anii in care ai programat mii de ore in acest limbaj si ai scris zeci de mii de linii de cod pur Javascript.

Motivul sau mai bine spus colectia de motive pentru care ti-ai creea propria librarie este ca nu vrei sa te repeti in scrierea de cod, vrei sa scrii cod cat mai putin, vrei sa folosesti din plin ceea ce termenul de closure iti ofera si vrei ca functiile sa faca mai multe lucruri deodata si intelegi foarte bine ce reprezinta prototype si lista cu motive ar putea continua.

Dupa cum stii Javascript este un limbaj functional iar functiile sunt obiecte de prima clasa. Toate functiile au ca setare de baza sa returneze undefined si depinde doar de noi ceea ce o functie trebuie sa returneze. Din pacate functiile nu pot returna mai mult de o valoare si din fericire pot returna un obiect ca de exemplu un array.

Javascript este unul dintre cele mai folosite limbaje in acest moment si din acest motiv comunitatea care se ocupa de dezvoltarea lui face o treaba foarte buna iar cel sau aceia care au gandit sa implementeze principii din alte limbaje cu vechime mai mare in OOP in Javascript pot sa spun doar atat: Jos palaria in fata lor.

Prototype reprezinta modalitatea prin care poti extinde un obiect prin adaugarea de noi metode si proprietatii iar in exemplele urmatoare il voi folosi din plin.

Sa presupunem ca vrem sa selectam un element din DOM intr-o variabila si sa ii folosim diferite atribute. Decat sa scriem de fiecare data document.querySelector() sau document.querySelectorAll()este mai bine sa cream o functie care sa faca acest lucru in locul nostru, exact ca in urmatoarea linie de cod.

function $(a){ return '#' == a.charAt(0) ? document.querySelector(a) : document.querySelectorAll(a) }

Cu o singura linie de cod si cu ajutorul operatorului ternar ne-am usurat munca foarte mult iar acum nu mai trebuie decat sa apelam functia dar nu vom face asta acum pentru ca vreau sa va mai arat ceva la fel de important.

Selectarea unui element din DOM cu ajutorul functiei de mai sus nu face altceva decat sa ne returneze un obiect si cum acesta este un obiect atunci hai sa cream o functie cu care vom extinde orice Object si la care nu vom scrie decat o singura data addEventListener.

Object.prototype.on = function(a,b){ this.addEventListener(a,b) }

Acum ca avem si aceasta functie nu ne mai ramane decat sa scriem exact ca intr-o librarie celebra urmatoarele linii de cod.

$('#id').on('click', function(){ console.log(this) });
$('.numeclasa')[0].on('click', function(){ console.log(this) });
$('a')[0].on('click', function(){ console.log(this) });

In acest fel am selectat un element din DOM si pe el i-am atasat un eveniment care va declansa o functie callback. Binenteles ca voi veti adauga liniile voastre de cod care vor face ce vreti voi.

O alta situatie este aceea in care vom dori sa declaram intr-o variabila continutul text dintr-un paragraf sau orice element care contine sau va contine text si aici vom creea urmatoarea functie.

Object.prototype.txt = function(a){ if(!a){ return this.textContent } else{ this.innerHTML = a.replace(/<\w+>|<\/\w+>/gi,'') } }

Functia txt() va returna continutul text dintr-un element daca nu va avea un parametru si daca va avea un parametru atunci acest parametru ar trebui sa fie doar un string cu text fara etichete HTML.

$('p')[2].txt('Textul pe care il adaugam.');
 var text = $('p')[2].txt(); // Textul pe care il adaugam.

Aceasta functie nu ne este de ajutor daca vrem sa adaugam un paragraf care sa contina si etichete HTML si din acest motiv functia html() va face exact acest lucru.

Object.prototype.html = function(a){ if(!a){ return this.innerHTML } else{ this.innerHTML = a } }

Dupa cum se poate vedea aceste functii sunt foarte utile pe toate etichetele HTML si mai putin pe eticheta input si asta pentru ca desi putem folosi functia html(), aceasta nu va avea efectul pe care ni-l dorim atunci cand vom dori sa stergem din continutul text al unui camp input. Daca vom sterge un caracter adaugat cu functia html() atunci se vor sterge toate si din acest motiv vom folosi functia val().

Object.prototype.val = function(a){ return null == a ? this.value : void(this.value = a) }

V-am aratat mai sus functia on() care stiti deja ce face. Putem sa cream o functia care va reprezenta opusul acesteia iar aceasta functie devine foarte utila atunci cand ne dorim sa oprim executarea unei functii pe acelasi eveniment. Functia off() va avea trei parametrii. Primul si al doilea sunt reprezentatii de doua evenimente iar al treilea de functia ce trebuie oprita. Primul este reprezentat de evenimentul la care sa oprim functia ce ruleaza pe evenimentul doi.

Object.prototype.off = function(a,b,c){ this.addEventListener(a,function(){ this.removeEventListener(b,c) }) }
window.off('dblclick','click', nume_functie_declarata_in_alta_parte);

O alta situatie in care trebuie sa creeam o functie sau mai multe este atunci cand trebuie sa adaugam, inlaturam sau alternam o clasa CSS si pentru asta urmatoarele functii vor face exact asta. Nu uitati de obiectul classList despre care presupun ca stiti ce face.

Object.prototype.addClass = function(a){ this.classList.add(a) }
Object.prototype.removeClass = function(a){ this.classList.remove(a) }
Object.prototype.toggleClass = function(a){ this.classList.toggle(a) }

Extinderea acestor functii

Pana acum ati vazut ca aceste functii au executat doar o functie calback sau o functie declarata in alta parte. Ce facem daca vrem sa executam mai multe functii pe care le-am declarat in alta parte pe acelasi eveniment. Atunci vom completa functiile scrise cu o bucla for si ne vom folosi de proprietate arguments pentru a afla cate functii sunt declarate sa ruleze pe acel eveniment. Binenteles ca nu toate functiile vor avea nevoie sa fie completate sau rescrise.

Object.prototype.on = function(){ for(var i = 1;i < arguments.length;i++){ this.addEventListener(arguments[0], arguments[i]) } }
Object.prototype.addClass = function(){ for(var i = 0;i < arguments.length;i++){ this.classList.add(arguments[i]) } }
Object.prototype.removeClass = function(){ for(var i = 0;i < arguments.length;i++){ this.classList.remove(arguments[i]) } }
window.on('scroll', function_name1, function_name2, function_name3);
$('p')[2].addClass('class1', 'class2', 'class3');
$('p')[2].removeClass('class1', 'class2', 'class3');

Acum ca ati inteles cateva principii legate de cum sa iti creezi rapid propria librarie Javascript nu imi mai ramane decat sa va urez: Spor la codat !