Қарапайым JavaScript - Unobtrusive JavaScript

А бөлігі серия қосулы
JavaScript
Тіл
Кітапханалар
Іске асыру
Сондай-ақ қараңыз

Қарапайым JavaScript қолдануға жалпы көзқарас болып табылады JavaScript жылы веб-беттер. Термин ресми түрде анықталмағанымен, оның негізгі қағидаттары әдетте түсінікті болады функционалдылықты бөлу («мінез-құлық деңгейі») веб-парақтан құрылымы / мазмұны және презентация,[1] және прогрессивті жақсарту Қолдау пайдаланушы агенттері бұл белгілі бір JavaScript функциясын және JavaScript өшірілген пайдаланушыларды қолдамауы мүмкін.[2]

Шолу

Пайда болуы стандарттарға сәйкес келетін браузерлер, JavaScript жақтаулары, және жоғары сапалы отладка құралдары JavaScript кодын ұйымдастырылған, масштабтауға мүмкіндік берді және пайда болды Аякс интерфейстер оны қалаулы етті. JavaScript формасы сияқты қарапайым және маңызды емес тапсырмалар үшін сақталған тексеру және сәндік жаңалықтар, ол қазір үлкен, күрделі жазу үшін қолданылады код негіздері бұл көбінесе сайттың негізгі функционалдығының бөлігі болып табылады.

JavaScript бағдарламалауына қатысты «түсініксіздік» ұғымы 2002 жылы пайда болды Стюарт Лангридж[3] мақалада «қарапайым DHTML және реттелмеген тізімдердің күші».[4] Мақалада Лангридж барлық JavaScript кодтарын, соның ішінде іс-шаралар өңдеушілерін HTML-ден тыс сақтау әдісін ұсынды. Стюарт Лангридж содан кейін кітаптағы осы ойды кеңейтті[5] және мақаланың форматы.[6]

Басқа авторлар түсініксіздіктің маңызды элементтерін нақтылауға және анықтауға тырысты. Дэвид Фланаганның кітабы JavaScript: Анықтамалық нұсқаулық нақты формула болмаса да, үш негізгі мақсат бар екенін айтты:

  • JavaScript-ті HTML түзетулерінен бөлу, сондай-ақ JavaScript модульдерін басқа модульдерден тәуелсіз ұстау.
  • Қарапайым JavaScript сыпайы түрде нашарлауы керек - барлық мазмұн JavaScript-ті немесе кез келгенін ойдағыдай іске асырмай қол жетімді болуы керек.
  • Қарапайым JavaScript HTML қол жетімділігін төмендетпеуі керек және пайдаланушының жеке мүмкіндігі шектеулі болса да, әдеттен тыс немесе әдеттен тыс конфигурацияланған браузер қолданса да, оны жақсартуы керек.[7]

The Веб-стандарттар жобасы қарапайым DOM сценарийінің төрт артықшылығын сипаттады JavaScript манифесті.

  1. Пайдалану мүмкіндігі: DOM қарапайым сценарийі пайдаланушының назарын аудармайды - келушілер оны ойланбастан пайдаланады.
  2. Керемет деградация: DOM қарапайым сценарийлері ешқашан кез келген шолғышта қате туралы хабарлама жасамайды, тіпті олар істен шыққан кезде де. Егер мүмкіндіктерді дұрыс көрсету мүмкін болмаса, олар үнсіз жоғалады.
  3. Қол жетімділік: Егер қандай да бір сценарий сәтсіздікке ұшыраса, парақ негізгі функциялары мен ақпараттарын түзету, стильдер кестесі және / немесе сервер жағындағы сценарий арқылы жеткізеді.
  4. Бөлу: Басқа және болашақ веб-әзірлеушілердің пайдасы үшін барлық JavaScript коды бөлек сақталады, скрипт, түзету немесе кодтың басқа файлдарына әсер етпей.[8]

Париж үшін Веб-конференция 2007 жылы Christian Heilmann қарапайым JavaScript-тің жеті ережесін анықтады.[9]

  1. Жоқ болжамдар жасамаңыз: Қорғаныс бағдарламалау әдістері JavaScript іске қосылмайтын мүмкіндіктерге мүмкіндік беруі керек, браузер күтілетін әдістерді қолдамауы мүмкін, HTML өзгерген болуы мүмкін, күтпеген енгізу құрылғылары қолданыста болуы мүмкін және басқа сценарийлер болмауы немесе жаһандық атаулар кеңістігін бұзуы мүмкін.
  2. Идентификаторлар мен күтілетін HTML басқа аспектілері сияқты ілмектеріңізді және қатынастарыңызды табыңыз.
  3. Жеке DOM нысандарын сарапшыларға, мысалы, мүмкіндігінше шолғышта орнатылған CSS өңдеушісіне қалдырыңыз.
  4. Браузерлер мен пайдаланушыларды, әсіресе олардың қалай істен шығатынын, қандай болжамдар жасайтынын, ерекше конфигурациялар мен қолдануларды түсініп алыңыз.
  5. Түсін іс-шаралар, оның ішінде олардың «көпіршігі» және ерекшеліктері Іс-шара көптеген оқиғалар өңдеушілерге берілетін объект.
  6. Ғаламдық функция мен айнымалы атаулардан аулақ болу арқылы басқа сценарийлермен жақсы ойнаңыз.
  7. Өзін-өзі түсіндіретін айнымалы мен функция атауларын қолдану, логикалық және оқылатын кодты құру, тәуелділіктерді анық көрсету және шатастыруы мүмкін кез келген кодқа түсініктеме беру арқылы келесі әзірлеушіге жұмыс жасаңыз.

Мінез-құлықты түзетуден бөлу

Дәстүр бойынша, JavaScript көбінесе HTML құжатының белгілеуімен қатар қатарға орналастырылатын. Мысалы, JavaScript оқиғаларын өңдеушіні HTML-де тіркеудің келесі әдісі:

<енгізу түр =«мәтін» аты =«күн» ауыстыру =«validateDate ()» />

HTML белгілеуінің мақсаты - құжаттың бағдарламалық әрекетін емес, құрылымын сипаттау. Екеуін біріктіру сайттың жұмысына, мысалы, біріктіруге кері әсерін тигізуі мүмкін мазмұны мен презентациясы.[10] HTML-де жасалған және сілтеме жасалған JavaScript мінез-құлқын пайдалану және сақтау қиынырақ болуы мүмкін, мысалы, бір элементте бірнеше оқиға үшін өңдеушілерді орнату кезінде, бірнеше оқиғаға бір оқиға өңдеушісін орнату кезінде немесе пайдалану кезінде іс-шара делегациясы.

Қиын емес шешім - қажетті оқиғаларды өңдеушілерді кірістірмей, бағдарламалық түрде тіркеу. Ан қосудан гөрі ауыстыру атрибут жоғарыда көрсетілгендей, тиісті элементтер (элементтер) жай анықталады, мысалы сынып, идентификатор немесе түзетудегі басқа құралдар:

<енгізу түр =«мәтін» аты =«күн» id =«күн» />

Парақ браузерге алғаш жүктелгенде жұмыс істейтін сценарий әр сәйкес элементті іздеп, оны сәйкесінше орната алады:

терезе.addEventListener(«DOMContentLoaded», функциясы(іс-шара) {    құжат.getElementById('күн').addEventListener(«өзгерту», validateDate);});

Атаулар кеңістігі

Қарапайым JavaScript жаһандыққа мүмкіндігінше аз қосылуы керек объект немесе ғаламдық аттар кеңістігі ол жұмыс істейтін ортаның Басқа сценарийлер ғаламдық аттар кеңістігінде құрылған кез-келген айнымалыны немесе функцияны жоққа шығаруы мүмкін және бұл күйін келтіру қиын күтпеген сәтсіздіктерге әкелуі мүмкін. JavaScript-те кіріктірілген нақты кеңістік механизмі жоқ, бірақ тілдің мүмкіндіктерін қолдану арқылы қажетті эффектілерді жасау оңай. Фланаган әзірлеушінің жеке домендік атауын, нүктелік сегменттерді ауыстырып, бірыңғай болуы ықтимал, жаһандық атау ретінде жариялау үшін қолдануды ұсынады. Java тіл.[11]

var ұйым = ұйым || {};егер (тип ұйым !== 'объект') {    лақтыру жаңа Қате(«ұйым әлдеқашан объект емес ретінде анықталған»);}ұйым.мысал = ұйым.мысал || {};егер (тип ұйым.мысал !== 'объект') {    лақтыру жаңа Қате(«org.example объект емес ретінде анықталған»);}

Айнымалыларды, функциялар мен барлық типтегі объектілерді осындай кеңістік объектілерінде қосымша анықтауға болады, оны пайдалану ұсынылады жабылу одан әрі атау кеңістігінде оқшаулау не болады жеке айнымалылар мен функциялар, сондай-ақ көпшілікке не болатынын экспорттау интерфейс функционалдылықтың әрбір модулінің. Жоғарыда келтірілген кодты тікелей келесі қолданылуы мүмкін, ол пайдаланылады IIFE оның жабылуын орнату:[9]

ұйым.мысал.Бөлектеу = (функциясы() {    // Жеке деректер мен функцияларды анықтаңыз    var бөлектеу = 'x';    функциясы Орнату(түс) {         құжат.getElementById(бөлектеу).стиль.түс = түс;    }        // Жалпы көрсеткіштерді функцияларға немесе қасиеттерге қайтару    // бұқаралық ақпарат құралдары.    қайту {        goGreen: функциясы() { Орнату('жасыл'); },        goBlue:  функциясы() { Орнату(«көк»); }    }}()); // Жабу аяқталды

Кез-келген басқа модульден осы жалпы әдістерді кез-келген жолмен келесі жолмен шақыруға болады

ұйым.мысал.Бөлектеу.goBlue();var сағ = ұйым.мысал.Бөлектеу;сағ.goGreen();

Осылайша, әрбір модуль-жазушының коды жеке немесе ерекше аттар кеңістігінде болады және кез-келген уақытта басқа кодқа кедергі жасай алмайды немесе оған ене алмайды.

Сыпайы түрде төмендетеді

Негізгі мақала: Керемет деградация

HTML парағының жүктелуін анықтайтын, содан кейін парақтағы басқа оқиғаларға тиісті тыңдаушыларды қосатын оқиға тыңдаушысын жазу, сондай-ақ қажет болған жағдайда басқа мінез-құлық JavaScript функциясын HTML белгілеуінен бөлу мәселесін шеше алады. Сияқты клиенттік JavaScript кітапханаларын пайдалану jQuery, MooTools немесе Прототип бұл процесті жеңілдетіп, браузер мен браузердің нұсқасын іске асырудың жеке мәліметтері болуына көмектеседі жасырын және тамақтандырды. JavaScript-тің көп бөлігін әдепкі аттар кеңістігінен тыс қалдыру оның бұл тұрғыда мүмкіндігінше қарапайым болуын қамтамасыз етеді. Жиі келтірілетін қарапайым JavaScript критерийі - бұл қосымша мінез-құлықтың күтпеген конфигурациясы бар шолғыштарда және пайдаланушы JavaScript-ті мүлдем өшіріп тастауы мүмкін файлдарда нашарлауын қамтамасыз ету.[7]

Бұл талап негізгі ереже болып табылады вебке қол жетімділік, JavaScript жетілдірілген веб-сайттар тек барлық қабілеттері мен мүмкіндіктері шектеулі адамдар үшін ғана емес, сонымен қатар барлық пайдаланушыларға, олардың есептеу платформасына қарамастан, сайттың барлық ақпараттары мен функционалдық мүмкіндіктеріне тең қол жеткізуді қамтамасыз ету. Кейде бұған қол жеткізу үшін қосымша жұмыс қажет, бірақ көптеген елдерде вебке қол жетімділік қосымша емес. Мысалы, Ұлыбританияда Теңдік туралы заң 2010 ж, бұл веб-сайтқа қол жетімділікке тікелей сілтеме жасамаса да, мүгедектерді кемсітуді заңсыз етеді және мемлекеттік, жеке және ерікті секторларда кез-келген қызмет көрсететін адамдарға қолданылады.[12] Слизді жобалау мен жүзеге асыруға көп күш жұмсау мүмкін клиент жағында қарапайым JavaScript-тегі қолданушы интерфейсі, егер олар жарияланған ақпаратқа қол жеткізе алмайтынын анықтаса, клиенттік сценарийі жоқ пайдаланушыға түсініксіз болып қалмайды. Бұл мақсатқа жету үшін көбінесе эквивалентті, тіпті клункер болса да, жүзеге асыру қажет, сервер жағында JavaScript қолданбай-ақ қол жетімді болатын функционалдылық.

Мысалға, нобай суреттері JavaScript-ті қажет ететін веб-парақты алайық, тінтуір оларды айналдырғанда немесе олар басылған кезде парақтың алдында толық өлшемді кескіндер пайда болады. Біріншіден, сервер жағындағы белгілеу тиісті толық өлшемді кескіннің нобайды басатын JavaScript-ті қолданушыларға ұсынылуын қамтамасыз етуі керек. Бұл жағдайда әрбір HTML нобайы келесідей көрінуі мүмкін:

<а href=«fullsize-image-001.png» сынып=«қолмен сілтеме» тақырып=«Толық өлшемді сурет үшін басыңыз»>  <имм src=«image-001-thumb.png» сынып=«бас бармақ» ені="50" биіктігі="50" альт=«Сурет 1 көрсетеді ... және т.б.»></а>

Бұл JavaScript болмаса жұмыс істейді. Қарапайым JavaScript, бұл жағдайда, парақ жүктеу кезінде барлық жағдайларды таба алады а класына ие элементтер сілтеме және оларды DOM парағынан алып тастаңыз. Содан кейін ол сыныптың барлық бейнелерін таба алды бас бармақ және қосыңыз одан әрі немесе ан onclick тегіс мінез-құлықты қамтамасыз ету үшін желіде көрсетілген оқиға өңдеушісі. Мысалы, оқиға өңдегіші шақырылған кезде серверге толық өлшемді кескін үшін Ajax сұрауын жіберуі мүмкін, содан кейін див бар DOM парағына бар CSS сондықтан ол ішінара сұрланып кетуі мүмкін бар мазмұнның алдында пайда болады. The див жабу батырмасы қажет болады, мүмкін бұл мәліметтердің жүктеліп жатқанын көрсету үшін визуалды 'спиннер' және т.с.с., сайып келгенде, Ajax деректері келгенде, өңдеуші спиннерді жасырады және толық өлшемді кескінді жаңаға енгізеді див көрсету үшін.

Осылайша, барлық клиенттік функциялар бірдей JavaScript функциясына байланысты. Егер бұл функция сәтті болса, ол негізгі, қолмен жұмыс істеуді жоюдан басталады және клиенттің сценарийлік әрекетін қосады. Егер қандай да бір себептермен сценарий сәтсіздікке ұшыраса, қолмен жұмыс жасау өз орнында қалады және жұмыс істейді.

Үздік тәжірибелер

Қарамастан JavaScript мәні бөлек мінез-құлық деңгейінің тұжырымдамасы болғанымен, оның адвокаттары негізінен бірқатар байланысты принциптерге жазылды, мысалы:

Сондай-ақ қараңыз

Пайдаланылған әдебиеттер

  1. ^ Кит, Джереми (2006-06-20). «Мінез-құлықты бөлу».
  2. ^ Олссон, Томи (2007-02-06). «Керемет деградация және прогрессивті жақсарту».
  3. ^ «Динамикалық веб-сайттар құру». 2006-08-09. Алынған 2010-05-18.
  4. ^ Лангридж, Стюарт (2002 ж. Қараша). «Анықталмаған DHTML және реттелмеген тізімдердің күші». Алынған 2008-08-07.
  5. ^ Лангридж, Стюарт (2005). DHTML Utopia: JavaScript & DOM қолданатын заманауи веб-дизайн. SitePoint. ISBN  0-9579218-9-6. (Бірінші басылымға сілтеме, өйткені онда автор тұжырымдаманы қалай бастағаны көрсетілген).
  6. ^ Мысалы: мысалы. Лангридж, Стюарт (2005-06-01). «DHTML Utopia: JavaScript және DOM қолданатын заманауи веб-дизайн». Алынған 2016-10-18.
  7. ^ а б Фланаган, Дэвид (2006). JavaScript: Анықтамалық нұсқаулық (5-ші басылым). O'Reilly & Associates. б.241. ISBN  0-596-10199-6.
  8. ^ «JavaScript манифесті». Веб-стандарттар жобасы. Алынған 8 ақпан 2011.
  9. ^ а б Heilmann, Christian (2007). «Қарапайым JavaScript-тің жеті ережесі». Архивтелген түпнұсқа 2011 жылғы 2 мамырда. Алынған 8 ақпан 2011.
  10. ^ «Веб-стандарттар моделі - HTML CSS және JavaScript». W3C веб-стандарттарының оқу жоспары. W3C. 2014 жыл. Алынған 16 мамыр 2016.
  11. ^ Фланаган, Дэвид (2006). «10». JavaScript: Анықтамалық нұсқаулық (5-ші басылым). O'Reilly & Associates. ISBN  0-596-10199-6.
  12. ^ «Теңдік туралы Заң 2010». Ұлы Мәртебелі Кеңсе Кеңсесі. Алынған 7 қыркүйек 2011.
  13. ^ «Dev.Opera - мүмкіндікті анықтауды қолдану». Алынған 19 қазан 2016.