Nenametljiv JavaScript

Nenametljiv Javaskript (енгл. Unobtrusive JavaScript ) je opšti pristup korišćenja Javaskripta 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 Javaskript 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 Javaskript funkcionalnost.

Nova jezička paradigma

Javaskript 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 skript ponašao manje-više onako kako je trebalo da se ponaša. Skript često nije uopšte radio u nekim pregledačima.

Neki veb programeri su promovisali elegantnu degradaciju od 1994.

Nedavna pojava Javaskript okruženja, visoko-kvalitetnih alata za debagovanje i pretraživača koji zadovoljavaju veb standarde je napravila mogućim organizovan, prilagodljiv Javaskript kod, kao i pojava Ajaks interfejsa koji ga je učinio poželjnim. Nekada, Javaskript 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 Javaskripta 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 (енгл. markup) i stila , tako i sve veća potražnja za bogatim Internet aplikacijama dovodi do napretka zbog bolje prakse u korišćenju Javaskripta. Koncept nenametljivosti u sklopu Javaskript programiranja je osmišljen 2002. godine od strane Stjuarta Langridža (енгл. Stuart Langridge) u članku "Nenametljiv DHTML,i moć neuređenih listi". U ovom članku Langridž se zalaže za čuvanje celog Javaskript 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 Javaskript: Sveobuhvatni vodič od Dejvida Flanagana (енгл. David Flanagan) kaže da sve dok ne postoji određena formula, postoje tri glavna cilja:

1. Odvajanje Javaskript-a od HTML oznake, kao i održavanje Javaskript modula nezavisnim od ostalih modula
2. Nenametljiv Javaskript bi trebalo da elegantno degradira - sav sadržaj bi trebalo da bude dostupan i bez celog ili bez bilo kojeg dela uspešno izvršavanog koda Javaskript-a.
3. Nenametljiv Javaskript 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 Javaskript 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 Javaskript kôd održava se zasebno, bez uticaja na druge fajlove skripta ili označavanja.

Za potrebe Veb konferencije u Parizu 2007. godine, Kristijan Hajlman (енгл. Christian Heilmann ) je uočio i izdvojio sedam zakonitosti nenametljivog Javaskripta.

1. Ne praviti nikakve pretpostavke: Tehnike defanzivnog programiranja trebalo bi da dozvole mogućnost prestanka rada Javaskripta, mogućnost da pregledač 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 imenskog prostora.
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 upravljaču, ugrađenom u pregledač svuda gde je to moguće.
4. Razumeti pregledač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 upravljača 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, Javaskript je često bio pisan odmah uz oznake nekog HTML dokumenta. Sledeći primer je tipičan primer implementacije Javaskript potvrde obrasca, kada je napisana unutar etiketa pri elementu:

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

Pristalice "Nenametljivog Javaskripta" 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). Ne mogu biti korišćeni ni 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, bitni elementi se lako indetifikuju, na primer sa class, id ili nekim drugim načinom obeležavanja:

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

Skript koji se izvršava kada se stranica prvi put učita u pregledač može da potraži bitne elemente i postavi ih prema tome:

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

Imenski prostor

Nenametljiv Javaskript bi trebalo 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, i to može dovesti do neočekivanih grešaka koje je teško debagovati. Javaskript 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 koji određuje šta će biti javni 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.

Elegantna degradacija

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

Ovaj zahtev je baza mrežne pristupačnosti, da bi osigurali da veb sajtove osnažene Javaskriptom mogu koristiti svi ljudi -nevezano 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, govori o tome da je ilegalno diskriminasati ljude sa invaliditetom i odnosi se na bilo koga ko obezbeđuje bilo koje javne usluge, privatne i volonterske sektore. Iako je dosta napora uloženo u dizajniranje i implementiranje glatke klijent-strane korisničkog interfejsa u nenametljivom Javaskriptu, 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, funkcionalnost serverske-strane koja će biti dostupna bez imalo korišćenja Javaskripta.

Uzmimo za primer veb stranicu gde prikazanim slikama trebaju ponašanja u Javaskriptu kako bi se pojavila slika u punoj veličini kada se mišem pređe preko nje ili klikne. Prvo, server-strana oznaka treba da se postara da se bitne slike pune veličine prikazuju korisniku bez Javaskripta 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 Javaskripta. Nenametljiv Javaskript, 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 obrađivač događaja koji je ubačen linijski kako bi osigurao glatko izvršavanje. Na primer, izvršen je neki događaj; zatim se šalje Ajaks zahtev serveru za uveličanje slike, onda se dodaje divDOM 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 se strana učitava, itd. Konačno kada Ajaks 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 Javaskript 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 Javaskripta 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 Javaskriptu 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 Javaskriptu; njihovo usvajanje posmatra se kao osnovna komponenta prelaska Javaskripta iz jezika za igru u alat za ozbiljan razvoj.