Ненаметљив ЈаваСцрипт

С Википедије, слободне енциклопедије

Ненаметљив Јаваскрипт (енгл. Unobtrusive JavaScript ) је општи приступ коришћења Јаваскрипта за веб странице. Иако термин није формално дефинисан, његови основни принципи опште прихваћено укључују:

  • Раздвајање функционалности (слоја понашања ( енгл. the "behavior layer" )) структуре и презентације[1] веб странице
  • Најбољи начин за избегавање проблема при Јаваскрипт програмирању (као што су прегледачева недоследност и недостатак скалабилности).
  • Прогресивна побољшања како би подржавао корисничког агента, који можда и не подржава напредну Јаваскрипт функционалност.[2]

Нова језичка парадигма[уреди | уреди извор]

Јаваскрипт је историјски имао лошу репутацију незгодног језика неупотребљивог за озбиљан развој апликација.[3][4] Лоша репутација је углавном потицала од имплементације самог језика која је била недоследна, као и због широког коришћења лошег copy-and-paste кода. Грешке приликом извршавања су биле уобичајене (и претешке да се открију и поправе), па су неки програмери чак покушавали да их исправе, све док се скрипт понашао мање-више онако како је требало да се понаша.[5] Скрипт често није уопште радио у неким прегледачима.

Неки веб програмери су промовисали елегантну деградацију од 1994.[6]

Недавна појава Јаваскрипт окружења, високо-квалитетних алата за дебаговање и претраживача који задовољавају веб стандарде је направила могућим организован, прилагодљив Јаваскрипт код, као и појава Ајакс интерфејса који га је учинио пожељним. Некада, Јаваскрипт је био резервисан за релативно једноставне и некритичне задатке, а сада се користи за писање великих, комплексних кодова који су често део основне функционалности сајта. Грешке приликом извршавања и напредвиђено понашање више нису не толико битне мане, сада су фаталне.


Заговорници ненаметљивог Јаваскрипта виде то као део већег напретка Веб стандарда; као што је захтев за компатибилност на различитим прегледачима довео до све већег истицања стандардизованог означавања (енгл. markup) и стила , тако и све већа потражња за богатим Интернет апликацијама доводи до напретка због боље праксе у коришћењу Јаваскрипта. Концепт ненаметљивости у склопу Јаваскрипт програмирања је осмишљен 2002. године од стране Стјуарта Лангриџа (енгл. Stuart Langridge) у чланку "Ненаметљив DHTML,и моћ неуређених листи".[7] У овом чланку Лангриџ се залаже за чување целог Јаваскрипт кода, укључујући и управљање догађајима, изван HTML-а. Стуарт Лангридге је касније написао књигу[8] у којој је проширио ову мисао.

Други аутори су покушали да побољшају и дефинишу основне елементе ненаметљиве парадигме. У својој књизи Јаваскрипт: Свеобухватни водич од Дејвида Фланагана (енгл. David Flanagan) каже да све док не постоји одређена формула, постоје три главна циља:

  1. Одвајање Јаваскрипт-а од HTML ознаке, као и одржавање Јаваскрипт модула независним од осталих модула
  2. Ненаметљив Јаваскрипт би требало да елегантно деградира - сав садржај би требало да буде доступан и без целог или без било којег дела успешно извршаваног кода Јаваскрипт-а.
  3. Ненаметљив Јаваскрипт не би требало да деградира приступачност HTML-у, чак би, у идеалним ситуацијама, требало да га побољша, било да корисник има личне сметње или користи необичан, или необично подешен, прегледач.[9]

Пројекат веб стандарда описује четири користи ненаметљивог DOM скриптинга у свом Јаваскрипт Манифесту.

  1. Употребљивост: ненаметљива DOM скрипта не одвлачи пажњу корисника - посетиоци је користе, не размишљајући о томе.
  2. Елегантна деградација: ненаметљиве DOM скрипте никада не генеришу поруке о грешкама, у било ком прегледачу, чак и када се не изврше. Уколико се карактеристике не могу приказати на прави начин, оне једноставно нестану.
  3. Приступ: уколико се било која од скрипти не изврши, страница и даље пружа своје основне функције и информације путем означавања, изгледа странице и/или скриптинга на серверској страни.
  4. Одвојеност: У корист осталих и будућих програмера, сав Јаваскрипт кôд одржава се засебно, без утицаја на друге фајлове скрипта или означавања.[10]

За потребе Веб конференције у Паризу 2007. године, Кристијан Хајлман (енгл. Christian Heilmann ) је уочио и издвојио седам законитости ненаметљивог Јаваскрипта.

  1. Не правити никакве претпоставке: Технике дефанзивног програмирања требало би да дозволе могућност престанка рада Јаваскрипта, могућност да прегледач не подржи одређене методе, могуће промене у HTML-у, неочекиване улазне уређаје у функцији, као и друге скрипте које се или не налазе или штете на нивоу глобалног именског простора.
  2. Пронаћи своје везе и места повезаности, као што су ID-ови и остали аспекти очекиваног HTML-а.
  3. Оставити преласке засебних DOM објеката експертима, као на пример, CSS управљачу, уграђеном у прегледач свуда где је то могуће.
  4. Разумети прегледаче и кориснике, нарочито њихове неуспехе, њихове претпоставке и неуобичајена подешавања или употребе.
  5. Разумети догађаје, укључујући њихово испливавање на површину, као и карактеристике објекта Event који се прослеђује већини управљача за догађаје.
  6. Користити на прави начин друге скрипте, избегавајући глобалне функције и имена варијабли.
  7. Радити за наредног програмера, користећи самоописујућа имена варијабли и функција, стварајући тако логичан и читљив кôд, чинећи да зависности буду очигледне и коментаришући сваки део кода који је и даље могуће збуњујућ.[11]

Одвајање понашања од обележавања[уреди | уреди извор]

Традиционално, Јаваскрипт је често био писан одмах уз ознаке неког HTML документа. Следећи пример је типичан пример имплементације Јаваскрипт потврде обрасца, када је написана унутар етикета при елементу: 

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

Присталице "Ненаметљивог Јаваскрипта" заступају мишљење да је сврха ознака да опише структуру документа, а не његово програмско понашање и да комбиновање ова два има негативан утицај на одржавање сајта, из сличних разлога из којих има негативан утицај и комбиновање садржаја и презентације. Они такође заступају да је линијско управљање догађајима(енгл. inline event handlers) тешко за коришћење и одржавање, када неко на пример има потребе за постављањем управљача за неколико догађаја на једном елементу или када неко жели да стави исту обраду догађаја на више елемената, или када неко користи одлагање догађаја(енгл. event). Не могу бити коришћени ни са насумичним догађајима. Ненаметљиво решење је да програмски унесемо неопходне извршитеље догађаја, пре него линијски. Ово је боље него да додајемо onchange атрибут експлицитно као изнад, битни елементи се лако индетификују, на пример са class, id или неким другим начином обележавања: 

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

Скрипт који се извршава када се страница први пут учита у прегледач може да потражи битне елементе и постави их према томе: 

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

Именски простор[уреди | уреди извор]

Ненаметљив Јаваскрипт би требало да дода што мање могуће глобалном објекту или глобалном именском простору од околине у којој се извршава. Остали скрипт језици можда пређу преко неких променљивих или функција које су креиране у глобалном именском простору, и то може довести до неочекиваних грешака које је тешко дебаговати. Јаваскрипт нема уграђен експлицитни механизам за именски простор, али жељене ефекте је лако произвести користећи језичке олакшице. Фланаган предлаже коришћење домена имена програмера, обрнутог тачкастог сегмента, као јединственим глобалним именом за објављивање, у стилу развијеном у Јава језику.[12] 

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.");
}

Док променљиве, функције и објекти свих врста могу бити даље дефинисани унутар таквих објеката именског простора, обично је препоручено да се користе closures унутар именског простора како би даље изоловали шта ће постати приватне променљиве и функције, такође и export који одређује шта ће бити јавни интерфејс сваког модула функционалности. Код изнад може пратити следеће:[13] 

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.

Из било ког другог модула, ови јавни методи могу бити позивани на неки од следећих начина: 

org.example.Highlight.goBlue();

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


На овај начин, сваки модуо-пишчев код садржан у приватном или у јединственом именском простору и не може да се умеша са или да се намеће у односу на неки други код у било ком тренутку.

Елегантна деградација[уреди | уреди извор]

Писање једног ослушкивача догађаја (енгл. event listener) који детектује учитавање HTML странице и онда додају битне ослушкиваче другим догађајима на страници, као и друга понашања која су тражена, он може решити проблем раздвајања функционалности Јаваскрипта од HTML ознака. Коришћење са клијентске стране Јаваскрипт библиотека као што су jQuery, MooTools ili Prototype може олакшати овај процес и помоћи око осигуравања индивидуалних прегледача, тј. да њихови имплементациони детаљи буду скривени и задовољени. Држањем већег дела Јаваскрипта изван предвиђеног именског простора помаже при осигуравању ненаметљивости у овом смислу. Друга обележја ненаметљивог Јаваскрипта која су често помињана су сигурност да додата дешавања елегантно деградирају на прегледачима са неочекиваном конфигурацијом, и онима на којима постоји могућност да је корисник искључио Јаваскрипт.[14]

Овај захтев је база мрежне приступачности, да би осигурали да веб сајтове оснажене Јаваскриптом могу користити сви људи -невезано за платформу коју користе- и добију једнак приступ свим информацијама и функционалностима сајта. Понекад је потребан додатни посао како би ово омогућили. На пример у Енглеској, енгл. the Equality Act 2010, говори о томе да је илегално дискриминасати људе са инвалидитетом и односи се на било кога ко обезбеђује било које јавне услуге, приватне и волонтерске секторе.[15] Иако је доста напора уложено у дизајнирање и имплементирање глатке клијент-стране корисничког интерфејса у ненаметљивом Јаваскрипту, он неће остати ненаметљив кориснику без клијентске-стране скрипта, ако увиде да они не могу приступити објављеним информацијама. Како би се успоставио овај циљ, обично је потребно имплементирати еквивалент, функционалност серверске-стране која ће бити доступна без имало коришћења Јаваскрипта.

Узмимо за пример веб страницу где приказаним сликама требају понашања у Јаваскрипту како би се појавила слика у пуној величини када се мишем пређе преко ње или кликне. Прво, сервер-страна ознака треба да се постара да се битне слике пуне величине приказују кориснику без Јаваскрипта који кликне на њихов умањени приказ. У овом случају HTML ознаке могу изгледати овако: 

<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>

Ово ће радити без Јаваскрипта. Ненаметљив Јаваскрипт, у овом случају, током учитавања странице, може наћи све a елементе који имају class manual-link и да их уклоне из DOM странице. Онда може наћи све слике класе thumb и додати им onmouseover или onclick обрађивач догађаја који је убачен линијски како би осигурао глатко извршавање. На пример, извршен је неки догађај; затим се шаље Ајакс захтев серверу за увеличање слике, онда се додаје divДОМ страници тражењем да се постојећи ЦСС појави испред постојећег садржаја, који може постати делимично затамњен. Цлосе дугме је потребно div-у , можда неки визуелни показивач да се страна учитава, итд. Коначно када Ајакс подаци стигну, извршитељ сакрива визуелни показивач за учитавање и приказује пуну величину слике у нови div за приказивање. На овај начин, све функционалности клијент-стране зависе од исте Јаваскрипт функције. Ако та функција успе, она почиње са уклањањем базичног, мануалног понашања, и додаје скриптовано понашање клијент-стране. Ако скрипт не ради из неког разлога, мануално понашање остаје и остаје његова функционалност.

Најбоља пракса[уреди | уреди извор]

Иако је суштина ненаметљивог Јаваскрипта концепт додатног слоја понашања, заговорници ове парадигме слажу се у основи и са бројним повезаним принципима, као што су:

  • DOM скриптинг, или оданост W3Ц ДОМ-у и моделу догађаја и избегавање додатака специфичних за претраживач.
  • Детекција могућности, односно, тестирање специфичних функционалности пре њиховог коришћења.[16] Посебно, ово се посматра као супротност детекције претраживача.
  • Уопштеније, најбоља пракса у Јаваскрипту поклапа се са оном у осталим програмским језицима, као што су енкапсулација и нивои апстракције, избегавање глобалних променљивих, конвенције о значењском именовању, коришћење одговарајућих шаблона везаних за дизајн и систематско тестирање. Такви принципи су од суштинског значаја за развој софтвера великих размера, али у прошлости нису шире посматрани са аспекта програмирања у Јаваскрипту; њихово усвајање посматра се као основна компонента преласка Јаваскрипта из језика за игру у алат за озбиљан развој.

Референце[уреди | уреди извор]

  1. ^ Кеитх, Јеремy (2006-06-20). "Бехавиорал Сепаратион".
  2. ^ Олссон, Томмy. „Грацефул Деградатион & Прогрессиве Енханцемент”. 
  3. ^ Цроцкфорд, Доуглас. „Тхе ЈаваСцрипт Программинг Лангуаге”. Архивирано из оригинала 23. 06. 2018. г. Приступљено 29. 05. 2015. 
  4. ^ Цроцкфорд, Доуглас. „Адванцед ЈаваСцрипт”. Архивирано из оригинала 30. 06. 2017. г. Приступљено 29. 05. 2015. 
  5. ^ Цроцкфорд, Доуглас. „ЈаваСцрипт: Тхе Гоод Партс”. Архивирано из оригинала 30. 06. 2017. г. Приступљено 29. 05. 2015. 
  6. ^ Аарон Густафсон. "Ундерстандинг Прогрессиве Енханцемент". 2008.
  7. ^ Лангридге, Стуарт. „Унобтрусиве ДХТМЛ, анд тхе поwер оф унордеред листс”. 
  8. ^ Лангридге, Стуарт (2005). ДХТМЛ Утопиа:Модерн Wеб Десигн Усинг ЈаваСцрипт & ДОМ. 
  9. ^ Фланаган, Давид (2006). ЈаваСцрипт: Тхе Дефинитиве Гуиде (5тх изд.). О'Реиллy & Ассоциатес. стр. 241. 
  10. ^ „Тхе ЈаваСцрипт Манифесто”. Тхе Wеб Стандардс Пројецт. 
  11. ^ Хеилманн, Цхристиан (2007). „Тхе севен рулес оф Унобтрусиве ЈаваСцрипт”. Архивирано из оригинала 02. 05. 2011. г. Приступљено 29. 05. 2015. 
  12. ^ Фланаган, Давид . "10". ЈаваСцрипт: Тхе Дефинитиве Гуиде (5тх ед.). О'Реиллy & Ассоциатес. 2006. ISBN 978-0-596-10199-2.
  13. ^ Heilmann, Christian (2007). "The seven rules of Unobtrusive JavaScript" Архивирано на сајту Wayback Machine (2. мај 2011). Ретриевед 8 Феб 2011.
  14. ^ Фланаган, Давид . ЈаваСцрипт: Тхе Дефинитиве Гуиде (5тх ед.). О'Реиллy & Ассоциатес. 2006. ISBN 978-0-596-10199-2. стр. 241.
  15. ^ "Equality Act 2010". Her Majesty’s Stationery Office. Retrieved 7 September 2011.
  16. ^ Dev.Opera — Using Capability Detection
Преузето из „https://sr.wikipedia.org/w/index.php?title=Nenametljiv_JavaScript&oldid=26774146”