Yahoo! User Interface блог (YUIBlog)

Попитайте Satyam: Писане Clean, Debuggable кодекс

Satyam (известен още като Даниел Barreiro) е дълго време Юи сътрудник, и един от най-плодовитите, щедри експерти във форумите на Юи . Той е и автор на нова книга на Юи 2.8.0, 2.8.0 Юи: Усвояване на библиотека . Тази статия в серия "Попитайте Satyam" беше предложено от JoeDev . Докато фокуса си (като фокусът на новата книга) е най-вече на Юи 2, много от практиките, описани тук са приложими към Юи 3, както и към развитие на интерфейса като цяло, независимо от вашата библиотека на избор.

Преди публикуване на въпрос във форумите Юи библиотека , има много неща, които можете да направите от себе си и, ако имате удобни инструменти, можете да намерите отговор на въпроса си всичко от себе си в нито един момент. Освен това, чисти код е стабилен код, много по-малко вероятно да се счупят, когато са подложени на стрес. Добрите практики не само да се избегнат фатални грешки (вид, че те закарам до IRC канал или форуми в търсене на помощ), но те се появят предупреждения за дребни грешки и да ви помогне да стоят настрана от фаталния край.

В тази статия, аз отивам да погледнем на някои от тези най-добрите практики. Някои от тях са специфични за развиващите се с Юи , но огромното мнозинство се прилага за интерфейса развитие, независимо от вашия избор на Аякс библиотека.

JSLint

Едно пътуване през JSLint е част от процеса на изграждане за Юи . JSLint себе си напълно, написани на JavaScript, е като компилатор, но без код поколение. Това, обаче, ще произвежда много на полезни съобщения за грешки и предупреждения, че компилатор. JavaScript преводач браузъра прощава много грешки и поема по подразбиране може да не знае, JSLint прощава малко, и ви насочва към по-добър избор във вашата програма. JSLint е на разположение в много формати, Юи Builder инструмент използва като самостоятелно приложение за командния ред, но можете да го интегрират в Eclipse или каквото и IDE или повече или по-малко способни редактор, който използвате - има дори един милион Yahoo! Widget за JSLint .

Ако неопределено голямо число линии на код в библиотеката Юи могат да минават през JSLint с грешки, не и няколко предупреждения (тя не може да избегне няколко неща), така че трябва вашия код. JSLint много полезно, когато съм уморен. Bean преброяване в края на вечерта е загуба на време, има вероятност да пропусне най-очевидните грешки. JSLint не се интересува кое време на деня и ще ви точка направо, че несъответстващи къдрава скоба или сгрешена променлива, която е в основата на проблема.

JSLint е най-полезно, ако можете да поддържате кода си чист от самото начало. Ако никога не сте използвали JSLint преди и да я изпробвате на приложението, което е вече стотици линии, той ще ви залива с толкова много предупреждения, че ще се почувствате, че тя пречи на работата си повече, отколкото помага. Въпреки това, което се случва само първите няколко пъти. След като се научат да стоят далеч от лошите практики за кодиране, JSLint диагностика ще бъде малко и направо на въпроса; истинските си грешка, че ви движи ядки, ясно ще се открояват. Междувременно, JSLint ще ви научи да направите вашата програма безопасна и стабилна.

Така че, не чакайте за труден грешка да се появи. Ако никога не сте използвали JSLint, опитайте с какво смятате, че да бъдат добри код, тя не може да бъде толкова добър, колкото ви приема. Както казва Дъглас Crockford (автор на JSLint), "JSLint ще нарани чувствата си." Но това е малка цена, за да плащат за по-добър код.

Глобални и неизползвани променливи

Едно от нещата, JSLint ще ви предупреди за използването на глобални променливи. Не трябва да има глобални променливи с изключение на тези, знаете, като например тези, създадени автоматично window прозорец document документ, както и за библиотеките YAHOO които се използват като Yahoo ( YUI Yui 2 ) или Юи ( в Юи 3). Може също да искате да се създаде единна глобална за собственото си пространство от имена.

Глобалните променливи са опасни , и обикновено има повече от тях, отколкото бихте очаквали, още повече "екстри" като компилации и банери може да добавите повече от тях. От window HTML DOM пространство от имена може да бъде пропуснат от съединение имена, window.name , window.length и window.location станат глобални променливи name , length и location . Били ли сте никога не са използвали такива имена на променливи в кода си? Не искам да кажа в техния смисъл на HTML DOM, но тъй като ежедневните имена на полета в таблица - например името на лицето, дължината на един предмет или местоположението на книгата на рафта. Какво ще стане, ако използвате тези променливи, без да ги декларират? Може да приемем, length дължината е undefined неопределени, но в действителност, ако не декларират собствено локално копие от него (и го инициализира) length дължина ще бъде препратка window.length window.length . И ако зададете нещо location , може би случайно да предизвикат потребителя да навигирате далеч от текущата страница. Ето, аз съм просто дават примери на възможни сблъсквания с вградения браузър в променливи, но ако започнете добавяне на библиотеки от други източници, шанс за сблъсъци се увеличава. Синтаксисът JavaScript маркер, използвани в примери Юи използва глобалната dp DP като коренът и броя на глобалните променливи, всеки скрипт на Google може да добави, когато поставите карта или друг инструмент във Вашата страница, е неучтиво да се каже най-малко.

Това е не само, че искате да стъпка леко по отношение на променливите на други хора - от пребиваващи на глобалното пространство от имена, вие намалявате риска, че те ще стъпите на вашата (или, че вие ​​ще стъпите на вашите собствени). С асинхронни теми, които се тъкане един около друг, както често се случва в модерните приложения JavaScript, вие не може да бъдете сигурни, реда, в който различни части от кода ще се изпълни и глобалната променлива ще бъдат оставени в каква стойност от кого. Единственият нормален подход е да ги избягвате, когато е възможно.

Глобалните променливи могат също точка правописна грешка. Ако имате глобална променлива, не означава да има и имате неизползван променлива с подобно име, може да сте сгрешили един от тях, че това е така, може да го декларира с едно име и го използва с друга различните правопис . Тя може също да означава, че сте го заявили, след като сте го използвали, което означава, че по време на изпълнението може да намерите променливата не се инициализира, както бихте очаквали.

Използването на this

Използването на this често е неприятен за начинаещи, защото е лесно да се губят следите на мястото, където ние сме в обхвата верига. Докато ние се някои практики, следене на обхвата може да бъде проблем. Също така, разработване на кодиране стил и структура за прилагането помага значително в края на краищата, всичко е въпрос на знаейки, където можете да поставите нещата. Ако се научите да организирате своите код последователно и се съхранява състояние в логически места this това сочи към едно такова място), информация във вашата програма ще се намери по-лесно . Всеки дебъгер ще ви покаже това this което този точки на всяка стъпка. Той винаги е добро нещо, което трябва да се this , ако това е съотнасяне на обекта , който очаквате. Много пъти, когато имаме бъг, да бъде, this е сочи window прозореца . Има няколко ситуации, които могат да произвеждат този резултат.

Ако имаме метод с вътрешна функция, когато ние наричаме тази вътрешна функция няма да получите обхвата на обаждащия се, а по-скоро, че window прозорец . Този пример показва, че вътрешната функция не споделя обхвата на метода, в рамките на който се съдържа:

  VAR someObject = {
     outerFunction: функция () {
         console.log ("външен", това); / / отпечатва външната Object {}
         Var innerFunction = функция () {
             console.log ("вътрешни", това); / / отпечатва вътрешната Window
         };
         innerFunction ();
     }
 };
 someObject.outerFunction (); 

Има няколко начина да се определи това. В този пример, ние молим JavaScript за да се коригира обхвата call() повикване ():

  VAR someObject = {
     outerFunction: функция () {
         console.log ("външен", това); / / отпечатва външната Object {}
         Var innerFunction = функция () {
             console.log ("вътрешни", това); / / отпечатва вътрешна Object {}
         };
         innerFunction повикване (тази);
     }
 };
 someObject.outerFunction (); 

В следващия пример, ние се възползват от възможността за вътрешни функции за споделяне на променливи, съдържащи функции. Ние създаваме променлива self , които ние инициализира стойността this този във външната функция . След това можем да използва self си във вътрешната функция да се позове на външната функция :

  VAR someObject = {
     outerFunction: функция () {
         console.log ("външен", това); / / отпечатва външната Object {}
         VAR самостоятелно =;
         Var innerFunction = функция () {
             console.log ("вътрешни", самостоятелно); / / отпечатва вътрешна Object {}
         };
         innerFunction ();
     }
 };
 someObject.outerFunction (); 

Накрая, със събития, обхватът на слушателя е, че на елемент, към който е прикрепен на слушателя:

  VAR someObject = {
     outerFunction: функция () {
         console.log ("външен", това); / / отпечатва външната Object {}
         YAHOO.util.Event.on ("бутон", "кликнете върху", функция () {
             console.log ("вътрешни", това); / / отпечатва вътрешната <button id="button">
         });
     }
 };
 someObject.outerFunction (); 

Ако не се коригира обхвата на слушателя, когато създаването на

  VAR someObject = {
     outerFunction: функция () {
         console.log ("външен", това); / / отпечатва външната Object {}
         YAHOO.util.Event.on ("бутон", "кликнете върху", функция () {
             console.log ("вътрешни", това); / / отпечатва вътрешна Object {}
         }, Това е вярно);
     }
 };
 someObject.outerFunction (); 

Това важи и за компоненти Юи. Ако слушаме едно кликване събитие клетка DataTable, TreeView възел или MENUITEM, в обхвата на слушателите ще бъде на компонент Юи например, че е собственик на събитие - освен ако не е изрично друго.

Sandboxes за приложения

Друг добър начин да поддържате чисти код е да започнем с чиста скелет. Стилът на кодиране JavaScript приложения се е променило с течение на времето. В днешно време, повечето разработчици използват два различни стила: един за подаване на кандидатури и една за библиотека компоненти. Повечето Юи 2 Примери отразяват стар стил, където ние използвахме YAHOO.namespace за създаване на пространство от имена за нашия собствен код.

В днешно време, за нашите приложения, ние най-често използват един пясъчника, декларирани в обхвата на анонимен функция, която onDOMReady onDOMReady :

  YAHOO.util.Event.onDOMReady (функция () {
     Var Dom = YAHOO.util.Dom,
         Събитие = YAHOO.util.Event,
         Lang = YAHOO.lang;

     Var yourVariable = initialValue,
         moreOfTheSame = otherInitialValue;

     Var myFunction1 = функция (...) {
         / / Тяло на функция;
     };
     Var myFunction2 = функция (...) {
         / / Тяло на функция;
     };
     ...
 }); 

Тази техника има няколко предимства.

1. Ние проверяваме за готовността на правото DOM от самото начало, като се гарантира, че всички парчета на HTML, че ние може да искате да манипулирате са налице и безопасни за употреба.
2. Функцията, при условие onDOMReady onDOMReady не се губи на всички, това е контейнер на пясъчника и, защото е анонимен, като не замърсява глобалното пространство от имена .
3. Ние незабавно да започне да определя нашите променливите, включително псевдоними или кратки имена за нашите най-често използваните предмети. Това има няколко други предимства на собствените си:
   1. Пестим някои пишете
   2. Юи компресор да компресирате нашите кратки имена, като има предвид, че не може да компресира глобален име като YAHOO или неговите свойства като util или Menu , без значение колко дълбоко те биха могли да бъдат. Ако те са закотвени в глобален име като YAHOO , на целия бранш е недосегаем. Така нашите вече кратки имена Dom , Event и Lang може да бъдат допълнително намалени A A B B C C, когато компресор се управлява по време на строителството.
   3. Преводачът не трябва да разрешат отново и отново дълги имена. Всяка точка в име като YAHOO.util.Event.onDOMReady е времето, консумирана в таблицата символ търсите .
   4. Всички променливи ще бъдат достъпни навсякъде, вътре в тази анонимна функция, дори и функции, определени в рамките на, освен ако променлива със същото име бе дефинирана в тях. По принцип, тя е като че ли под-глобална среда е определена в рамките на и всички променливи ще бъдат достъпни навсякъде само по име.
   5. За променливите в пясъчника, ние не трябва да this това, което ни дава такива главоболия, при използването на традиционни обектно-ориентиран техниката на вземане дори основната функция обект.

4. Ние определяме нашите функции. Ние можем да направим това с var изявление, както аз направих по-горе или function изявление, там е тънката разлика, но тя е най-вече без значение. Аз използвам var изявление, за да се подчертае, че те са също толкова достъпни както другите променливи: ние може да има достъп до тях навсякъде в пясъчника.

Разбира се, това се основава върху способността на JavaScript, за да ни позволи да се определят функциите в рамките на функциите и на факта, че вътрешните функции имат достъп до всички променливи, определени във външната функция. По принцип, всяка функция, вие определяте създава новата местна среда, достъпна за някакви допълнителни функции в рамките.

Sandboxing е стандартният начин за правене на нещата в Юи 3:

  Юи () ("module1", ..., функция (Y) {
     / / Това е пясъчника
 }); 

Namespaces за библиотеки

Докато sandboxing техника е чудесно за окончателно приложения, това не е добър за библиотеките. Какво се случва в пясъчника остава в пясъчника, напълно невидими за външния свят. Въпреки това, когато определят библиотека полезност или компонент на собствения си, искате да я използва повторно, така че трябва да бъде глобално достъпна (което не е същото като чисто в световен мащаб). Всичко, което определят съгласно YAHOO.example - например YAHOO.example.myUtility - е глобално достъпна. Можете да получите достъп до нея от пълното му име, след като тя е определена. myUtility , като член на глобалната YAHOO , не е глобална, но е глобално достъпна .

Когато строим библиотеки, ние обикновено се използват пясъчника за нашия код и namespacing за споделяне, като този:

  (Функция () {
     VAR MyClass = функция () {
         / / Това ще бъде конструктор
     };
     MyClass.prototype = {
         / / Свойства и методи
     };
     YAHOO.namespace ("MyLibrary");
     YAHOO.MyLibrary.MyClass = MyClass
 })(); 

Ние създаваме една пясъчника чрез определяне на всичко в рамките на анонимна функция, които ние веднага изпълни (виж всички тези скоби там?, Те означават, че "предприемат резултат на определяне на тази функция и да я изпълни"). Ето, ние не чакаме за DOM да бъдат готови, библиотеки рядко, тъй като приложение, което ги използва, е отговорен да провери дали всичко е на мястото. В рамките на пясъчника, ние имаме същите предимства, както с предишната пясъчника. Можем да определим кратки имена за всичко, което ние използваме често, дори за този клас, ние дефинираме: нито един от тях ще бъдат видими отвън. След това, за да го направи глобално достъпна, ние създаваме пространство от имена на нашите собствени, и нашето място наскоро създадения клас в него.

Юи Logger

Да кажем, че имаме нашия код хубав и чист, с не JSLint грешки или предупреждения, но ние все още имаме проблеми, за коригиране на грешки. Юи може да бъде полезно да ни казва, какво не е наред. За производството на код, обикновено ние ще заредите minified версии на компонентите на Юи, но има и две други версии. Debug.js версия е, че може да ни помогне да разкрием проблеми . Например, ние може да се използва дом Collection setStyle setStyle, нека да кажем, промяна на цвета на блок от текст . Промяната не се случва и не можем да намерим какво не е наред. Файлът Dom-debug.js тази полезна линия, която се заличава в -min версия:

  YAHOO.log ("елемент" + ел + "е недефиниран", "грешка", "Дом"); 

Това е изпълнено, setStyle setStyle се опитва да намери елемент, да бъде оформена и не го намерите. Съобщение за грешка, вероятно ще покажат сгрешена елемент лична карта или някои такива грешки, че е толкова трудно да вземем след дълъг ден на вторачени в един и същи код.

Това е лесно да се получи и на дървар, просто трябва да се включат файлове :

  <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/logger/assets/skins/sam/logger.css">
 <script src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"> </ скрипта>
 <script src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"> </ скрипта>
 <script src="http://yui.yahooapis.com/2.8.1/build/logger/logger-min.js"> </ скрипта> 

Основните yahoo-dom-event агрегат е най-вероятно да бъде там вече, докато зависимостта на Drag & Drop избор е удобен за да преместите дървар прозорец на пътя. След това, просто добавете:

  Var myLogReader = нови YAHOO.widget.LogReader (); 

След това, това е въпрос на натоварване на -debug версии на компонент файлове и всички съобщения, които те произвеждат, ще бъдат показани. Размерът на информация може да бъде непоносимо, така, че е разумно да не -debug всички дебъгване версии наведнъж. Logger може също така да филтрирате информацията, той показва и може да махнете Инфо категория на съобщения, за да се концентрира върху Предупреди и не успяват. Филтри, които не се отразяват това, което се регистрира, само това, което е показано, Logger Дневници Всички съобщения, независимо от това, дали LogReader показва тях или не. Има само едно съобщение опашка на заявление и сеч ще започне веднага след като е заредена Logger файла компонент, то няма значение дали е показано, или не.

Друг потребител на властта стратегия за отстраняване на грешки на Юи с Logger контрол е да се възползвате от способността Logger за увеличаване на конзолата на браузъра (в поддържаните браузъри):

  YAHOO.widget.Logger.enableBrowserConsole (); 

С този ред на код, можете да Logger тръба всички съобщения на браузъра конзола, която е естествена част от работния си процес в развитие, в никакъв случай.

Само досадно нещо за Logger е да си спомняш за промяна на компонент файлове от minified, агрегати и под звуците -debug най -debug дебъгване версии . В това, както винаги, на зависимостта "Конфигуратор е от голяма полза, кликнете върху -debug бутон в горния ляв ъгъл и това ще доведе до правилното списък на файловете .

И сега, че съм го спомена:

Проверете вашата зависимости

Това е добра идея, когато започнете с Юи, за да вземем един пример, който много наподобява това, което искате да правите и променяте. Като добавите повече възможности, да приемете бита и парчета от други примери и да ги включат в разработването на прилагане. Един честият източник на проблемите са зависимости. Много хора поставете зависимостта файлове на всеки пример в прилагането им, дублиране на някои от тях отново и отново. Липсваща, дубликат или за зависимости може да доведе до неочаквани грешки. Не YAHOO Global Object, натоварени преди всичко друго е най-вероятно ще бъде фатално. Във всеки случай, товарене нещо два пъти със сигурност ще увеличи времето, което отнема да се зареди страницата си.

И накрая, ако използвате вашите собствени сървъри, за да заредите библиотека Юи, може да има база пътя за вашето копие на библиотеката грешно. Ако имате Firebug, отидете на раздела мрежата и да проверите, че няма линии в червено. Тези, би означавало, че Исканият ресурс не може да бъде намерена.

Debugging

Firebug добавите в продължение на Firefox все още е най-добрият дебъгер около, плюс това е безплатна. По подразбиране, когато се активира дебъгера "Пробив на всички грешки" вариант е, което означава, че Firebug ще спре в точката, където той открие грешка и да се покаже съобщение за грешка и изходния код. Някои от тези грешки, ще бъдат същите, че JSLint щеше да диагностицират, така JSLint все още е на първо място да се започне - особено защото Firebug, може само сигнал една грешка на всяка серия, докато JSLint да ги сигнал всички наведнъж. Някои грешки ще се показват само по време на изпълнение, така че дебъгер, е единственият вариант. Всеки път, когато стигнем до такава почивка, първото нещо, което трябва да проверите е this , четири-буквена дума от най-трудните вид.

При използване на пясъчника, дебъгерите ще обикновено показват локални променливи и аргументи, но те обикновено няма да предложи да покаже на променливи, съдържащи функции, като например тези, декларирани в пясъчника и се използва от вътрешната функции. Дебъгер ще бъде в състояние да покажат своята стойност, ако изрично поиска за тях по име, но той няма да ги покаже автоматично. Друга алтернатива е да ги направи глобално достъпна. За пример, тъй YAHOO.example YAHOO.example е винаги на разположение (когато Юи 2 е на страницата), ако искате да държиш под око върху определен компонент по всяко време можете просто да го копирате там :

  Var myTree = нови YAHOO.widget.TreeView ("дърво контейнер");
 YAHOO.example.myTree = myTree; 

Ние добавяме последното възлагане, а отстраняване на грешки, така че можем да поддържаме едно око на TreeView например при отстраняване на myTree , тъй като myTree нормално ще бъде в рамките на пясъчника и невидимо навсякъде другаде.

Да не се използва членове, започва с долна

Много хора използват дебъгер, за да търсят имената на променливите или свойства, притежаващи необходимата им информация. Понякога тази информация се съхранява в имоти започва с подчертавка, като _nodes . Според установената практика, това са частни имоти, които не са за общо ползване. JavaScript налага не истинската концепция на частни или защитени членове, по този начин водещите подчертае е конвенционален начин, да сигнализират за намерението на предприемача клас, за да запазите този имот частна. Тези свойства могат да представляват изкушение (в крайна сметка, можете да ги видите в дебъгер), но има няколко добри причини, поради които не е разумно да ги използва в своите програми.

Първо, само публични интерфейси се поддържат. Тъй като не би трябвало да се използва имот, който започва с долна черта, клас разработчикът е свободен да го промените по всяко време. Предприемачът трябва да имат някои публични механизъм за достъп до тази една и съща стойност, например, _nodes частната собственост може да има getNodes() метод или атрибут конфигурация nodes . Всяка от тях ще бъде публичен интерфейс на същата стойност. Втората причина да не се използват свойства с водещи подчертава е, че им на оценителите да се наложи да произвежда вторичен ефект, който достъп до частната собственост напълно заобикалят. Компонентът ще бъдат оставени в непоследователни, крехко състояние.

Така че, ако използвате дебъгер да търсят стойност и да го намерите в имот, започващ с водеща подчертават, не го използвате. Отиди вместо API документи и погледнете в индекса Методи за някои getXxxx() метод, с подобно име, или в конфигурацията атрибути индекс. Избягвайте използването на частни променливи.

Stack Следи

Юи Библиотеката е стабилна и надеждна. Ако дебъгер разгражда в рамките на Юи библиотека, това е по-вероятно, че това се дължи на грешка, предизвикана от кода си, че от някои повреда в себе си Юи. JavaScript е проектиран да продължи, винаги се справят с грешки възможно най-добре. Библиотека Юи го върши. The -debug версии ще разполагат с допълнителни проверки и ще излъчват диагностични съобщения, но всички те са лишени в minified версии. Ако видите грешка във файл Юи е вероятно, че го има от чист инат, но не се опитвайте да намерите грешката там. Когато дебъгер спира, това не е така, защото той е открил причината за грешката, но поради това че интерпретатора JavaScript вече не може да продължи.

Прекъсвания в minified файлове не са особено полезни, ако получите съобщение, като ...

  Е не е обект в ред 7 на дом-min.js 

... Е безсмислено да се задават във форума за това. Първо, F е псевдоним, генерирани от Юи компресор, за да замени по-дълъг, описателно име на променлива в оригиналния некомпресиран файл, второ, първите няколко реда на файла компонент обикновено се взимат от авторски права, които Юи компресор винаги се съобразява с . И тъй като Юи компресор изтрива всички нови онлайн герои, както го прави с други бели пространство, всички изпълним код в dom-min.js е в редове 7, 8 и 9 - така че броят не казва много или .

Това е, когато раздела Stack Trace в десния панел на Script раздела на Firebug (или там, където можете да намерите следи от изпускащите устройства в дебъгер ви) идва удобен. Той ви казва, как ли там. Тук е параван плен от Firebug:

Точка от горната част на десния панел, createEvent() е името на функцията, където течението изявление е по-долу е мястото, createEvent() ) се нарича, по-долу, че функцията, която нарече предишната; и така нататък. Повечето дебъгерите ще ви позволи да изберете някоя от тези проследи точки и да видим как ли къде се намирате. Firebug също ви позволява да проверите стойността на променливите на всяка от микроелементите точки. Можем да видим в лявата subpanel жълта стрелка, сочеща createEvent() ) . Имаме късмет, този път, тъй като тя винаги ще сочи към ред, съдържащ нарушителя код, но този код може да бъде навсякъде в рамките на тази линия, за щастие createEvent() ) се случва да бъде в началото на линията . Вижте променливи и аргументи? B , G , L ... не познае какво са могли да бъдат оригиналните имена, тъй като това е Юи компресора по време на работа . Все пак, имайте предвид YAHOO че Yahoo е недокоснат и за авторски права са запазени.

Може да не признават много от имената в стека следа, тъй като те биха могли да бъдат функции в рамките на функции в рамките на самата Юи библиотека. В крайна сметка, може да видите имена на функции, можете да разпознаете. В този образ, аз знам, showAlbums , която се нарича конструктор REDT REDT клас (който е кодов съм написал) . Аз нямам представа за нищо друго. Ето къде ще отида изглеждащи ... Знам.

Ако не сте сигурни, можете да минете през пълния списък. Ако видите компресиран код (ако не сте компресирана още), просто да го игнорирате, или да преминете към minified версия на източник Юи файлове. Но се съсредоточат предимно върху тези имената, които признават, че принадлежат към собствения си код. Имайте предвид, че (?)() използва (?)() за следи, тя не може да име. Обикновено кодът в пясъчника ще се сигнализира по този начин, тъй като пясъчника се съдържа в анонимна функция. В такава точка във вашата следа, проверка на стойностите на променливите, които сте предоставили като аргументи, някои от тях не може да бъде това, което приема. Проверете срещу тях API документи, за да видите дали това е валиден аргумент стойност.

Ако аргумент и променливи стойностите, които виждате, са неубедителни, поне можете да поставите правото точка на прекъсване преди код нарича Юи компонент. Може би след това да бъде в състояние да видите как сте получили в бъркотия.

Stack следи често са пренебрегвани от разработчиците, но с тенденция на JavaScript да продължи да се рови в едно все по-дълбоко дупка, тъй като тя се опитва да продължи, е добре да бъде в състояние да излезе на повърхността, за да се огледам. Както и с всички техники за отстраняване на грешки, не винаги работи, но е хубаво да знаем, че е там. Нека бъдем честни, ако сте прочели това далеч, вие знаете какво е отчаяние.

Asynchronous разговори

А много на интерактивността, която характеризира Web2.0 приложения се основава върху способността да се справят с асинхронни събития. В контраст с оригинален стил на уеб приложения, където всяко взаимодействие участват чака нова страница, да бъдат доставени от сървъра, съвременни интерактивни приложения да включва определяне на нещата и слушане на някоя от няколко възможни събития, за да се случи ... и след това в отговор за тези събития. Ние поставяме слушателите за кликвания или натискания на клавиши и или други програмни събития, те обикновено са интуитивни. Asynchronous разговори и техните обратни извиквания, обаче, често са по-трудно да се разбере.

Най-честата грешка, аз виждам в реализации на форумите е да се поставят код веднага след асинхронни повикване asyncRequest() като asyncRequest sendRequest() asyncRequest() ) или sendRequest() () методи, приемайки, че такъв код ще бъде изпълнена, когато операцията е завършена. Когато ти се обадя такава функция, вие просто грундиране на операцията, не го изпълнява в пълен размер. Няма данни ще бъде на разположение след обаждане на async метод. Единствено молбата за такива данни са били произведени досега. Сървърът трябва да я получава и я обработва, и отговора (ако въобще някога идва) все още е изключен в бъдеще. Ето защо за такива операции асинхронни ние използваме функция за обратно извикване.

Обратно извикване е като функция, се отчитат като слушател за дадено събитие, като кликнете върху бутон във форма, когато потребителят кликне, слушателят долавя нарича. Обратно повикване на асинхронни събитие е много прилича на това, точно както ние се изпрати формуляр за потребителя да попълните, ние изпращаме съобщение искане до сървъра, и точно както чакаме попълнена във формата, да се подават обратно към нашата програма, ще чакаме за отговор, изпратен от сървъра, за да се връщат при нас. Ние не можем да знаем, когато потребителят ще представя под формата или сървъра изпраща отговор, защо ние, това, което за потребителско действие, ние наричаме събитие слушател и за асинхронна събитие, което наричаме функция за обратно извикване. Това може да изглежда, отговор на сървъра е бързо, ако не е мигновен, но това означава, възрасти в CPU време.

Debugging асинхронни разговори

Понякога не е алтернатива, освен да едноетапно чрез код. Бъдете внимателни, когато стигнем до асинхронни покани като Connection Manager asyncRequest() метод, DataSource, sendRequest() или DOM window.setTimeout() . Те започне асинхронни искане за данни срещу сървъра или забавяне на някои действия на дадено време и техните обратни извиквания се нарича, когато данните са получени или изтичане на времето. Има два въпроса, за да се разгледа, на първо място, дебъгер няма да стъпка в обратното автоматично. Ако искате да се изравнят с отговора, трябва да сложите точка на прекъсване вътре функция за обратно извикване. Много хора достигат точка на свикване на асинхронен метод и се очаква един засилване възобновено в рамките на функция за обратно извикване, когато async операцията е завършена. Това няма да стане, нишката на изпълнение не тече автоматично в обратното, и дебъгер не може да се очаква, за да разбера, че един.

Второ, когато достигнете линията с асинхронни повикване, сложи точка на прекъсване в обратното и след това нека план за кандидатстване. Обикновено, каквото и да се отива след async повикването не е наистина важно, в действителност, async повикването е нормално в края на функция, тъй като там не е много да се направи, докато пристигне отговорът. Не една стъпка над async повикване, защото дебъгер ще запази JavaScript преводач задържана, а когато пристигне отговора или времето е изтекъл, той ще бъде пропусната, тъй като преводачът е замразено и не могат да се справят с него. Така че, ако кликнете върху Стъпка Над, когато стигнем до async повикване, се уверете, че имате точка на прекъсване в обратното и след това кликнете Run така JavaScript интерпретатора е активен и е в състояние да се справят с отговор.

За повтарящи се събития като обратни извиквания на window.setInterval() или друго време-критични операции, е по-добре да не се поставят точки на прекъсване в тях. Докато сте в режим на задържане, много събития ще бъдат пропуснати. Тя обикновено е по-добре да console.log използва console.log или Юи Logger просто сигнал, че събитието се случва и да се покаже няколко критични стойности. Да не се window.alert() ) по същата причина; поставя багажното помещение на браузъра, и събития, които се грижат за ще бъдат пропуснати.

Заключение

Има много инструменти, за да ни помогне да разберете какво се случва в нашите програми. С правилните инструменти в ръка, можем да намерим грешка по-малко време, отколкото това, което тя ни отнема, за да напишете въпрос във форумите. Първата стъпка обаче е да се напише добър и надежден код и да JSLint неразделна част от процеса на развитие.

Намери разговори: Bloglines | Technorati

Споделете и разширяване: Bookmark с del.icio.us | Digg | Reddit!