Nenametljiv JavaScript

Nenametljiv JavaScript (енгл. Unobtrusive JavaScript ) je opšti pristup korišćenja JavaScript-a za veb stranice. Iako termin nije formalno definisan, njegovi osnovni principi opšte prihvaćeno uključuju:

• Razdvajanje funkcionalnosti (sloja ponašanja ( енгл. the "behavior layer" )) strukture i prezentacije veb stranice
• Najbolji način za izbegavanje problema pri JavaScript programiranju (kao što su pregledačeva nedoslednost i nedostatak skalabilnosti).
• Progresivna poboljšanja kako bi podržavao korisničkog agenta, koji možda i ne podržava naprednu JavaScript funkcionalnost.

Nova jezička paradigma

JavaScript je istorijski imao lošu reputaciju nezgodnog jezika neupotrebljivog za ozbiljan razvoj aplikacija. Loša reputacija je uglavnom poticala od implementacije samog jezika koja je bila nedosledna, kao i zbog širokog korišćenja lošeg copy-and-paste koda. Greške prilikom izvršavanja su bile uobičajene (i preteške da se otkriju i poprave), pa su neki programeri čak pokušavali da ih isprave, sve dok se script ponašao manje-više onako kako je trebalo da se ponaša. Script često nije uopšte radio u nekim pregledačima.

Neki veb programeri su promovisali elegantnu degradaciju od 1994.

Nedavna pojava JavaScript framework-a, visoko-kvalitetnih alata za debagovanje i pretraživača koji zadovoljavaju veb standarde je napravila mogućim organizovan, prilagodljiv JavaScript code, kao i pojava Ajaks interfejsa koji ga je učinio poželjnim. Nekada, JavaScript je bio rezervisan za relativno jednostavne i nekritične zadatke, a sada se koristi za pisanje velikih, kompleksnih kodova koji su često deo osnovne funkcionalnosti sajta. Greške prilikom izvršavanja i napredviđeno ponašanje više nisu ne toliko bitne mane, sada su fatalne.

Zagovornici nenametljivog JavaScript-a vide to kao deo većeg napretka Veb standarda; kao što je zahtev za kompatibilnost na različitim pregledačima doveo do sve većeg isticanja standardizovanog označavanja(engl. markup) i stila , tako i sve veća potražnja za bogatim Internet aplikacijama dovodi do napretka zbog bolje prakse u korišćenju JavaScripta. Koncept nenametljivosti u sklopu JavaScript programiranja je osmišljen 2002. godine od strane Stuart Langridge u članku "Nenametljiv DHTML,i moć neuređenih listi". U ovom članku Langridge se zalaže za čuvanje celog JavaScript koda, uključujući i upravljanje događajima, izvan HTML-a. Stuart Langridge je kasnije napisao knjigu u kojoj je proširio ovu misao.

Drugi autori su pokušali da poboljšaju i definišu osnovne elemente nenametljive paradigme. U svojoj knjizi JavaScript: Sveobuhvatni vodič od David Flanagan-a kaže da sve dok ne postoji određena formula, postoje tri glavna cilja:

1. Odvajanje JavaScript-a od HTML oznake, kao i održavanje JavaScript modula nezavisnim od ostalih modula
2. Nenametljiv JavaScript bi trebalo da elegantno da degradira sav sadržaj bi trebalo da bude dostupan i bez celog ili bez bilo kojeg dela uspešno izvršavanog koda JavaScript-a.
3. Nenametljiv JavaScript ne bi trebalo da degradira pristupačnost HTML-u, čak bi, u idealnim situacijama, trebalo da ga poboljša, bilo da korisnik ima lične smetnje ili koristi neobičan, ili neobično podešen, pregledač.

Projekat veb standarda opisuje četiri koristi nenametljivog DOM skriptinga u svom JavaScript Manifestu.

1. Upotrebljivost: nenametljiva DOM skripta ne odvlači pažnju korisnika - posetioci je koriste, ne razmišljajući o tome.
2. Elegantna degradacija: nenametljive DOM skripte nikada ne generišu poruke o greškama, u bilo kom pregledaču, čak i kada se ne izvrše. Ukoliko se karakteristike ne mogu prikazati na pravi način, one jednostavno nestanu.
3. Pristup: ukoliko se bilo koja od skripti ne izvrši, stranica i dalje pruža svoje osnovne funkcije i informacije putem označavanja, izgleda stranice i/ili skriptinga na serverskoj strani.
4. Odvojenost: U korist ostalih i budućih programera, sav JavaScript kôd održava se zasebno, bez uticaja na druge fajlove skripte, označavanje ili kôd.

Za potrebe Veb konferencije u Parizu 2007. godine, Kristijan Hajlman je uočio i izdvojio sedam zakonitosti nenametljivog JavaScript-a.

1. Ne praviti nikakve pretpostavke: Tehnike defanzivnog programiranja trebalo bi da dozvole mogućnost prestanka rada JavaScript-a, mogućnost da pretraživač ne podrži određene metode, moguće promene u HTML-u, neočekivane ulazne uređaje u funkciji, kao i druge skripte koje se ili ne nalaze ili štete na nivou globalnog namespace-a.
2. Pronaći svoje veze i mesta povezanosti, kao što su ID-ovi i ostali aspekti očekivanog HTML-a.
3. Ostaviti prelaske zasebnih DOM objekata ekspertima, kao na primer, CSS hendleru, ugrađenom u pretraživač svuda gde je to moguće.
4. Razumeti pretraživače i korisnike, naročito njihove neuspehe, njihove pretpostavke i neuobičajena podešavanja ili upotrebe.
5. Razumeti događaje, uključujući njihovo isplivavanje na površinu, kao i karakteristike objekta Event koji se prosleđuje većini hendlera za događaje.
6. Koristiti na pravi način druge skripte, izbegavajući globalne funkcije i imena varijabli.
7. Raditi za narednog programera, koristeći samoopisujuća imena varijabli i funkcija, stvarajući tako logičan i čitljiv kôd, čineći da zavisnosti budu očigledne i komentarišući svaki deo koda koji je i dalje moguće zbunjujuć.

Odvajanje ponašanja od obeležavanja

Tradicionalno, JavaScript je često bio pisan odma uz oznake nekog HTML dokumenta. Sledeći primer je tipičan primer implementacije JavaScript potvrde obrazca, kada je napisana unutar etiketa pri elementu:

 <input type="text" name="date" onchange="validateDate()" />

Pristalice "Nenametljivog JavaScript-a" zastupaju mišljenje da je svrha oznaka da opiše strukturu dokumenta, a ne njegovo programsko ponašanje i da kombinovanje ova dva ima negativan uticaj na održavanje sajta, iz sličnih razloga iz kojih ima negativan uticaj i kombinovanje sadržaja i prezentacije. Oni takođe zastupaju da je linijsko upravljanje događajima(енгл. inline event handlers) teško za korišćenje i održavanje, kada neko na primer ima potrebe za postavljanjem upravljača za nekoliko događaja na jednom elementu ili kada neko želi da stavi istu obradu događaja na više elemenata, ili kada neko koristi odlaganje događaja(енгл. event). Niti mogu biti korišćeni sa nasumičnim događajima. Nenametljivo rešenje je da programski unesemo neophodne izvršitelje događaja, pre nego linijski. Ovo je bolje nego da dodajemo onchange atribut eksplicitno kao iznad, bitani elementi se lako indetifikuju, na primer sa class, id ili nekim drugim načinom obeležavanja:

 <input type="text" name="date" id="date" />

Skript koj se izvršava kada se stranica prvi put učita u pregledač može da potraži za bitnim elementima i postavi ih prema tome:

window.onload = function() {
     document.getElementById('date').onchange = validateDate;
 };

Imenski prostor

Unobtrusive JavaScript bi trebao da doda što manje moguće globalnom objektu ili globalnom imenskom prostoru od okoline u kojoj se izvršava. Ostali skript jezici možda pređu preko nekih promenljivih ili funkcija koje su kreirane u globalnom imenskom prostoru, ovo može dovesti do neočekivanih grešaka koje je teško debagovati. JavaScript nema ugrađen eksplicitni mehanizam za imenski prostor, ali željene efekte je lako proizvesti koristeći jezičke olakšice. Flanagan predlaže korišćenje domena imena programera, obrnutog tačkastog segmenta, kao jedinstvenim globalnim imenom za objavljivanje, u stilu razvijenom u Java jeziku.

 var org;
 if (!org) {
     org = {};
 } else if (typeof org != 'object') {
     throw new Error("org already exists and is not an object.");
 }
 if (!org.example) {
     org.example = {};
 } else if (typeof org.example != 'object') {
     throw new Error("org.example already exists and is not an object.");
 }

Dok promenljive, funkcije i objekti svih vrsta mogu biti dalje definisani unutar takvih objekata imenskog prostora, obično je preporučeno da se koriste closures unutar imenskog prostora kako bi dalje izolovali šta će postati privatne promenljive i funkcije, takođe i export koj određuje šta će biti public interfejs svakog modula funkcionalnosti. Kod iznad može pratiti sledeće:

 org.example.Highlight = function() {
    // Define private data and functions
    var highlightId = 'x';
    function setHighlight(color) { 
        document.getElementById(highlightId).style.color = color;
    }
 
    // Return public pointers to functions or properties
    // that are to be public.
    return {
        goGreen: function() { setHighlight('green'); },
        goBlue:  function() { setHighlight('blue'); }
    }
   }(); //End closure definition and invoke it.

Iz bilo kog drugog modula, ovi javni metodi mogu biti pozivani na neki od sledećih načina:

 org.example.Highlight.goBlue();
 
 var h = org.example.Highlight;
 h.goGreen();

Na ovaj način, svaki moduo-piščev kod sadržan u privatnom ili u jedinstvenom imenskom prostoru i ne može da se umeša sa ili da se nameće u odnosu na neki drugi kod u bilo kom trenutku.

Graciozno unazađivanje

Pisanje jednog slušalaca događaja (енгл. event listener) koji detektuje učitavanje HTML stranice i onda dodaju bitne slušaoce drugim događajima na stranici, kao i druga ponašanja koja su tražena, on može rešiti problem razdvajanja funkcionalnosti JavaScripta od HTML oznaka. Korišćenje sa klijentske strane JavaScript biblioteka kao što su jQuery, MooTools or Prototype može olakšati ovaj proces i pomoći oko osiguravanja da individualni pregledač i verzije pregledača, da njihovi implementacioni detalji budu skriveni i zadovoljeni. Držanjem većeg dela JavaScripta izvan predviđenog imenskog prostora pomaže pri osiguravanju da je u ovom smislu nenametljiv. Druga obeležja nenametljivog JavaScript-a koja su često pominjana su sigurnost da se dodata dešavanja graciozno unazađuju na pregledačima sa neočekivanom konfiguracijom, i onima na kojima postoji mogućnost da je korisnik isključio JavaScript.

Ovaj zahtev je baza mrežne pristupačnosti, da bi osigurali da JavaScript-enhanced veb sajtove mogu koristiti svi ljudi -ne vezano za platformu koju koriste- i dobiju jednak pristup svim informacijama i funkcionalnostima sajta. Ponekad je potreban dodatni posao kako bi ovo omogućili. Na primer u Engleskoj, енгл. the Equality Act 2010, ne obraća se direktno veb pristupačnosti, govori o tome da je ilegalno diskriminasati ljude sa invaliditetom i odnosi se na bilo koga ko obezbeđuje bilo koju javnu uslugu, privatnu i volonterske sektore. Iako je dosta napora uloženo u dizajniranje i implementiranje glatke klijent-strane korisnički interfejs u nenametljivom JavaScript-u, on neće ostati nenametljiv korisniku bez klijentske-strane skripta, ako uvide da oni ne mogu pristupiti objavljenim informacijama. Kako bi se uspostavio ovaj cilj, obično je potrebno implementirati ekvivalent, albeit clunkier, funkcionalnost serverske-strane koja će biti dostupna bez imalo korišćenja JavaScripta.

Uzmimo za primer veb stranicu gde prikazane slike trebaju ponašanja u JavaScriptu kako bi se pojavila slika u punoj veličini kada se mišem pređe preko nje ili klikne. Prvi, server-strana oznaka treba da se postara da bitne slike pune veličine rade korisniku bez JavaScripta a koji klikne na njihov umanjeni prikaz. U ovom slučaju HTML oznake mogu izgledati ovako:

  <a href="fullsize-image-001.png" class="manual-link" title="Click for full-size image">
  <img src="image-001-thumb.png" class="thumb" width="50" height="50" alt="Image 1 shows... etc">
  </a>

Ovo će raditi bez JavaScripta-a. Nenametljiv JavaScript, u ovom slučaju, tokom učitavanja stranice, može naći sve a elemente koji imaju class manual-link i da ih uklone iz DOM stranice. Onda može naći sve slike klase thumb i dodati im onmouseover ili onclick obradu događaja(енгл. event handler) koji je ubačen linijski kao bi osigurao glatko izvršavanje. Na primer, izvršen je neki događaj; zatim se šalje Ajax zahtev serveru za uveličanje slike, onda se dodaje div DOM stranici traženjem da se postojeći CSS pojavi ispred postojećeg sadržaja, koji može postati delimično zatamnjen. Close dugme je potrebno div -u , možda neki vizuelni pokazivač da strana učitava, itd. Konačno kadak Ajax podaci stignu, izvršitelj sakriva vizuelni pokazivač za učitavanje i prikazuje punu veličinu slike u novi div za prikazivanje. Na ovaj način, sve funkcionalnosti klijent-strane zavise od iste JavaScript funkcije. Ako ta funkcija uspe, ona počinje sa uklanjanjem bazičnog, manualnog ponašanja, i dodaje skriptovano ponašanje klijent-strane. Ako skript ne radi iz nekog razloga, manualno ponašanje ostaje i ostaje njegova funkcionalnost.

Najbolja praksa

Iako je suština nenametljivog JavaScript-a koncept dodatnog sloja ponašanja, zagovornici ove paradigme slažu se u osnovi i sa brojnim povezanim principima, kao što su:

• DOM skripting, ili odanost W3C DOM-u i modelu događaja i izbegavanje dodataka specifičnih za pretraživač.
• Detekcija mogućnosti, odnosno, testiranje specifičnih funkcionalnosti pre njihovog korišćenja. Posebno, ovo se posmatra kao suprotnost detekcije pretraživača.
• Uopštenije, najbolja praksa u JavaScript-u poklapa se sa onom u ostalim programskim jezicima, kao što su enkapsulacija i nivoi apstrakcije, izbegavanje globalnih promenljivih, konvencije o značenjskom imenovanju, korišćenje odgovarajućih šablona vezanih za dizajn i sistematsko testiranje. Takvi principi su od suštinskog značaja za razvoj softvera velikih razmera, ali u prošlosti nisu šire posmatrani sa aspekta programiranja u JavaScript-u; njihovo usvajanje posmatra se kao osnovna komponenta prelaska JavaScript-a iz jezika za igru u alat za ozbiljan razvoj.