Yahoo! User Interface Blog (YUIBlog)

Fragen Sie Satyam: Schreiben Sauberkeit, Debuggable Code

Satyam (aka Daniel Barreiro) ist ein seit langem YUI Beitragszahler und einer der produktivsten, großzügige Experten in den Foren YUI . Er ist auch der Autor eines neuen Buches über YUI 2.8.0, 2.8.0 YUI: Erlernen der Bibliothek . Dieser Artikel im "Ask Satyam"-Serie wurde JoeDev vorgeschlagen durch . Während der Schwerpunkt (wie der Fokus des neuen Buches) wird meist auf YUI 2, beschrieben viele der Praktiken hier gelten für YUI 3 sowie - und Frontend-Entwicklung im Allgemeinen, unabhängig von Ihrer Bibliothek der Wahl.

Bevor du eine Frage in der YUI-Bibliothek Foren , gibt sich gibt viele Dinge von ihr kann und, wenn Sie praktisch Ihre Werkzeuge, können Sie sich selbst finden Sie Ihre Antwort durch alle in kürzester Zeit. Außerdem ist sauberen Code robusten Code, viel weniger wahrscheinlich, brechen unter Belastung. Gute Praktiken nicht nur schwerwiegende Fehler zu vermeiden (die Art, fahren Sie an den IRC-Kanal oder Foren auf der Suche nach Hilfe), aber sie Oberfläche Warnungen über kleinere Fehler und helfen Sie bleiben weg von der tödlichen Rand.

In diesem Artikel werde ich einen Blick auf einige dieser Best Practices zu nehmen. Einige von ihnen sind spezifisch für Entwicklungsländer mit YUI , aber die überwiegende Mehrheit Bibliothek gelten für Frontend-Entwicklung unabhängig von Ihrer Wahl von Ajax.

JSLint

Eine Reise durch JSLint ist Teil des Build-Prozesses für YUI. JSLint, sich vollständig in JavaScript geschrieben, ist wie ein Compiler, aber ohne Code-Generierung. Es wird jedoch, produzieren viele der nützlichen Fehlermeldungen und Warnungen, dass ein Compiler würde. Ein Browser ist JavaScript-Interpreter verzeiht viele Fehler und übernimmt Standardwerte, die Sie vielleicht nicht bewusst; JSLint verzeiht wenig, und er zeigt Ihnen, bessere Entscheidungen in Ihrem Programm. JSLint ist in vielen Formaten, die YUI-Builder-Tools verwendet es als Standalone-Kommandozeilen-Anwendung, aber man kann auch die Integration in Eclipse IDE oder was auch immer oder mehr oder weniger in der Lage Editor Sie verwenden - es gibt sogar eine Yahoo! Widget für JSLint .

Wenn die zillion Codezeilen in die YUI-Bibliothek kann durch JSLint ohne Fehler und Warnungen wenige gehen (es kann nicht umhin, ein paar Dinge), so sollten Sie den Code. Ich finde JSLint sehr hilfreich, wenn ich müde bin. Erbsenzählerei in den späten Abend ist eine Verschwendung von Zeit, Sie sind wahrscheinlich die offensichtliche Fehler zu verpassen. JSLint nicht, was Zeit des Tages ist es Sorgfalt und wird Sie direkt zu Punkt, dass nicht übereinstimmende geschweifte Klammer oder falsch geschriebene Variable, die an der Wurzel des Problems ist.

JSLint ist sehr hilfreich, wenn Sie Ihren Code halten von Anfang an sauber. Wenn Sie noch nie JSLint vor und verwendet ausprobieren auf eine Anwendung, die bereits mehrere hundert Zeilen lang, es wird Sie mit so vielen Warnungen Flut, dass sie das Gefühl, dass es Ihre Aufgabe behindert mehr als es hilft. Doch das geschieht nur die ersten paar Male. Wenn Sie lernen, zu bleiben weg von schlechten Praktiken Codierung wird JSLint Diagnostik werden nur wenige und auf den Punkt; Ihrer wirklichen Fehler, die, die fahren Sie Nüsse ist, wird deutlich abheben. In der Zwischenzeit wird JSLint lehren Sie, um Ihren Code sicherer und robuster.

Also, nicht für eine harte Fehler warten zu zeigen. Wenn Sie noch nie JSLint verwendet haben, versuchen Sie es mit dem, was Sie glauben, guten Code zu sein, ist es vielleicht nicht so gut sein wie du angenommen. Als Douglas Crockford (Autor von JSLint) sagt: "JSLint wird verletzt deine Gefühle." Aber das ist ein geringer Preis für eine bessere Code bezahlen.

Globale und unbenutzte Variablen

Eines der Dinge, JSLint Sie warnen wird über die Verwendung von globalen Variablen. Es sollte keine globalen Variablen werden mit Ausnahme derjenigen wissen Sie über, wie die, die automatisch erstellt wie window oder document und die für die Bibliotheken, die Sie verwenden wie YAHOO (in YUI 2 ) oder YUI (in YUI 3 ). Sie können auch zu einem einzigen globalen Namensraum für Ihre eigenen erstellen.

Globale Variablen sind gefährlich , und es gibt in der Regel mehr, als man erwarten würde, außerdem "Extras" wie Mashups und Banner könnte sie fügen mehr. Da die window HTML-DOM-Namespace-Name, die Verbindung kann weggelassen window.name , window.length und window.location Variablen werden die globalen name , length und location . Haben Sie noch nie verwendet wie Variablennamen in Ihrem Code? eine Person, ein Regal der Länge eines Objekts oder den Standort eines Buches über die von meine ich nicht in ihre HTML-DOM-Sinn, sondern als alltägliche Feldnamen in einer Tabelle - wie der Name. Was, wenn Sie diese Variablen verwenden, ohne diese offenzulegen? Man könnte annehmen, dass length ist zunächst undefined , aber in der Tat, wenn Sie erklären nicht, Ihre eigene lokale Kopie davon (und initialisieren), length wird eine Referenz window.length . Und wenn Sie etwas zuweisen location , können Sie versehentlich dazu führen, dass Benutzer zu navigieren weg von der aktuellen Seite. Hier bin ich nur mit Beispielen von möglichen Kollisionen mit dem Browser eingebauten Variablen, aber wenn Sie beginnen, Bibliotheken aus anderen Quellen, die Chance für Kollisionen steigt. Die JavaScript-Syntax-Highlighter Beispielen in YUI nutzt die globale Variable dp als Wurzel und die Anzahl der globalen Variablen beliebigen Google Skript unhöflich könnte hinzufügen, wenn Sie eine Karte oder einem anderen Werkzeug in Ihrer Seite ist, gelinde gesagt, auf die.

Es ist nicht nur, dass Sie auf die leichte Schulter Schritt in Bezug auf andere Menschen Variablen wollen - von Aufenthalt aus dem globalen Namensraum, verringern Sie die Gefahr, dass sie auf deine (oder dass Sie auf Ihrem eigenen Schritt) Schritt. Bei der asynchronen Fäden weben sich umeinander, wie es oft der Fall in der modernen JavaScript-Anwendungen, können Sie nicht wirklich sicher sein, in welcher Reihenfolge Sie verschiedene Teile des Codes ausführen und welche globalen Variablen wird bei welchem Wert von wem überlassen werden. Die einzige vernünftige Ansatz ist es, sie möglichst zu vermeiden.

Globale Variablen können auch ein Tippfehler Punkt. Wenn Sie eine globale Variable, die Sie nicht bedeutete, zu haben, und Sie haben einen unbenutzten Variable mit einem ähnlichen Namen, könnten Sie einer von ihnen falsch geschrieben haben: das heißt, Sie können es mit einem Namen deklariert und benutzt es mit einem anderen unterschiedliche Schreibweise . Es kann auch bedeuten, dass Sie es erklärt, nachdem Sie es verwendet haben, was bedeutet, dass zum Zeitpunkt der Ausführung finden Sie vielleicht Ihr Variable nicht initialisiert, wie Sie es erwartet haben bedeutet.

Mit this

Mit this ist oft mühsam für Anfänger, weil es einfach zu Kette aus den Augen verlieren, wo wir in den Anwendungsbereich. Bis wir etwas Übung zu bekommen, kann die Verfolgung Umfang ein Thema sein. Auch die Entwicklung einer Codierung Stil und eine Struktur für die Anwendung hilft sehr, schließlich geht es darum zu wissen, wo Sie Platz Dinge. Wenn Sie (lernen Orte zu organisieren Ihren Code konsequent und speichern Staat in logischer this Punkte auf einem solchen Platz), in Ihrem Programm Informationen leicht finden werden. Jeder Debugger wird Ihnen zeigen, was this Punkte bei jedem Schritt. Es ist immer eine gute Sache erst prüfen, ob this Objekt ist die Referenzierung Sie erwarten. Eine Menge Zeit, wenn wir Fehler haben, ist es, weil this auf den Hinweis ist window . Es gibt mehrere Situationen, dass dieses Ergebnis produzieren kann.

Wenn wir eine Methode mit einer inneren Funktion, wenn wir der Aufforderung, die innere Funktion wird es nicht den Umfang der Anrufer, sondern dass window . Dieses Beispiel zeigt, dass die innere Funktion teilt nicht die Tragweite des Verfahrens, in dem es enthalten ist:

  var someObject = {
     outerFunction: function () {
         console.log ("äußere", this); / / gibt äußere Objekt {}
         var innerFunction = function () {
             console.log ('innere', this); / / gibt innere Fenster
         };
         innerFunction ();
     }
 };
 someObject.outerFunction (); 

Es gibt ein paar Möglichkeiten, dies zu beheben. In diesem Beispiel, bitten wir Sie JavaScript, um Hilfe zu korrigieren Rahmen call() :

  var someObject = {
     outerFunction: function () {
         console.log ("äußere", this); / / gibt äußere Objekt {}
         var innerFunction = function () {
             console.log ('innere', this); / / gibt innere Object {}
         };
         . InnerFunction Anruf (this);
     }
 };
 someObject.outerFunction (); 

Im nächsten Beispiel nutzen wir die Fähigkeit zur inneren Funktionen auf die Variablen der Funktionen enthält, zu teilen. Wir erstellen eine Variable self , die wir von zu initialisieren, um den Wert this in der äußeren Funktion. Wir können dann self in der inneren Funktion zu Funktion finden Sie in der Verpackung:

  var someObject = {
     outerFunction: function () {
         console.log ("äußere", this); / / gibt äußere Objekt {}
         var Selbst = this;
         var innerFunction = function () {
             console.log ("innere", Selbst-); / / gibt innere Object {}
         };
         innerFunction ();
     }
 };
 someObject.outerFunction (); 

Schließlich, mit Veranstaltungen, ist der Umfang der Zuhörer, dass das Element, auf die die Zuhörer angebracht ist:

  var someObject = {
     outerFunction: function () {
         console.log ("äußere", this); / / gibt äußere Objekt {}
         YAHOO.util.Event.on ('Taste', 'click', function () {
             console.log ('innere', this); / / gibt innere <button id="button">
         });
     }
 };
 someObject.outerFunction (); 

Wenn wir den Umfang der Zuhörer anzupassen wenn Sie ihn

  var someObject = {
     outerFunction: function () {
         console.log ("äußere", this); / / gibt äußere Objekt {}
         YAHOO.util.Event.on ('Taste', 'click', function () {
             console.log ('innere', this); / / gibt innere Object {}
         }, Diese, true);
     }
 };
 someObject.outerFunction (); 

Dies gilt auch für YUI-Komponenten. Wenn wir ein click-Ereignis auf einer DataTable Zelle, ein TreeView-Knoten oder ein MenuItem hören, wird der Umfang der Hörer als solche des YUI Komponenteninstanz, die das Ereignis besitzt - sofern dies nicht ausdrücklich festgelegt ist anders.

Sandkästen für Anwendungen

Eine weitere gute Möglichkeit, um Ihren Code sauber zu halten ist, mit einem sauberen Skelett starten. Der Stil der Codierung JavaScript-Anwendungen hat im Laufe der Zeit verändert. Heutzutage nutzen die meisten Entwickler zwei verschiedene Arten: eine für Anwendungen und eine für Bibliothek-Komponenten. Die meisten YUI 2 Beispiele zeigen die alten Stil, wo wir YAHOO.namespace Code erstellen Sie einen Namespace für unsere eigenen.

Heutzutage für unsere Anwendungen haben wir meist mit einem einzigen Sandkasten erklärte im Rahmen einer anonymen Funktion, die ausgeführt onDOMReady :

  YAHOO.util.Event.onDOMReady (function () {
     var dom = YAHOO.util.Dom,
         Event = YAHOO.util.Event,
         Lang = YAHOO.lang;

     var yourVariable = Anfangswert,
         moreOfTheSame = otherInitialValue;

     var myFunction1 = function (...) {
         / / Körper-Funktion;
     };
     var myFunction2 = function (...) {
         / / Körper-Funktion;
     };
     ...
 }); 

Diese Technik hat mehrere Vorteile.

1. Wir prüfen für die Bereitschaft der DOM von Anfang an sichergestellt, dass alle Teile des HTML, das wollen wir manipulieren könnte präsentieren und sicher zu bedienen sind.
2. Die Funktion vorgesehen, um onDOMReady ist noch nicht alles verloren an, es ist der Behälter der Sandkasten und, weil es anonym ist, nicht zu verunreinigen den globalen Namespace.
3. Wir beginnen sofort Definition unserer Variablen, darunter Alias oder Kurznamen für unsere am häufigsten genutzten Objekten. Dies hat verschiedene Vorteile für sich:
   1. Wir sparen Tipparbeit
   2. Die YUI Compressor komprimiert unsere kurze Namen, während er nicht komprimieren kann einen globalen Namen wie YAHOO oder seine Eigenschaften wie util oder Menu , egal wie tief sie sein könnten. Wenn sie, wie sie verankert in einem globalen Namen YAHOO , ganze Branche ist die unantastbar. So ist unsere bereits kurze Namen Dom , Event und Lang weiter reduziert werden könnte A , B und C , wenn Kompressor Bauzeit ist beim Windows.
   3. Der Dolmetscher muss nicht lösen immer und immer wieder die langen Namen. Jeder Punkt in einem Namen wie YAHOO.util.Event.onDOMReady dich ist Symbol der Zeit verbraucht in einer Tabelle zu suchen.
   4. Alle Variablen werden überall in diesem anonymen Funktion verfügbar, auch auf Funktionen definiert, innerhalb, sofern nicht eine Variable mit dem gleichen Namen in ihnen definiert wurde. Grundsätzlich ist es als ob ein Sub-globalen Umfeld innerhalb definiert wurde, und alle Variablen wird es überall vorhanden ist nur dem Namen nach.
   5. Für die Variablen in der Sandbox brauchen wir nicht zu nutzen this , das uns wie Kopfschmerzen bei Verwendung der herkömmlichen Technik der Herstellung OOP sogar die wichtigste Funktion eines Objekts.

4. Wir definieren unsere Funktionen. Wir können das tun dies mit var -Anweisung, wie ich oder hat oberhalb der function Aussage, es gibt einen feinen Unterschied, aber es ist meist irrelevant. Ich benutze die var -Anweisung zu betonen, dass sie Variablen sind ebenso zugänglich wie die anderen: Wir können überall auf sie zugreifen in der Sandbox.

Natürlich beruht auf der Fähigkeit von JavaScript, damit wir Funktionen innerhalb von Funktionen und auf die Tatsache, dass die inneren Funktionen Zugriff auf alle Variablen in der äußeren Funktion definiert haben definieren. Grundsätzlich erzeugt jede Funktion definieren Sie einen neuen lokalen Umfeld im Internet keine weiteren Funktionen innerhalb.

Sandbox ist der normale Weg, Dinge zu tun in YUI 3:

  YUI (). Verwenden ("Modul1", ..., Funktion (Y) {
     / / Dies ist die Sandbox
 }); 

Namespaces für Bibliotheken

Während die Sandbox-Technik eignet sich hervorragend für Endanwendungen, es ist nicht gut für Bibliotheken. Was passiert in der Sandbox Aufenthalte in den Sandkasten, völlig unsichtbar für die Außenwelt. Jedoch, wenn Sie eine Bibliothek Dienstprogramm oder Bestandteil des eigenen definieren, müssen Sie wieder verwenden wollen, so muss es die allgemein zugänglich (was nicht dasselbe wie rein global). Alles, was Sie unter definieren YAHOO.example , - zB YAHOO.example.myUtility - ist weltweit zugänglich. Sie können Namen darauf zugreifen, indem es seine volle einmal definiert wurde. myUtility , als Mitglied der globalen YAHOO , ist nicht global, aber es ist global zugänglich.

Wenn wir Bibliotheken bauen, verwenden wir normalerweise den Sandkasten für unseren Code und Namensräume für den Austausch, wie folgt aus:

  (Function () {
     var MyClass = function () {
         / / Das wäre der Konstruktor werden
     };
     MyClass.prototype = {
         / / Eigenschaften und Methoden
     };
     YAHOO.namespace ("MyLibrary ');
     YAHOO.MyLibrary.MyClass = MyClass
 })(); 

Wir schaffen eine Sandbox indem alles in eine anonyme Funktion, die wir sofort ausführen (siehe all jene Klammer da?, Sie bedeuten "nehmen das Ergebnis der Definition dieser Funktion und ausführen"). Hier haben wir nicht warten, bis das DOM bereit zu sein, Bibliotheken selten tun, da die Anwendung, die sie ist dafür verantwortlich, dass alles überprüfen nutzt ist vorhanden. Im Sandkasten haben wir die gleichen Vorteile wie mit dem vorherigen Sandkasten. Wir können kurze Namen für etwas verwenden wir oft zu definieren, auch für die Klasse definieren wir: keiner von ihnen wird sichtbar außen. Dann, um sie global zugänglich, haben wir eine unserer eigenen Namensraum zu erstellen und stellen Ihnen unsere neu geschaffenen Klasse in ihm.

YUI Logger

Sagen wir, wir haben unseren Code schön und sauber, ohne Fehler oder Warnungen JSLint, aber wir haben noch Probleme zu debuggen. YUI kann hilfreich sein, uns zu sagen was falsch ist. Für die Herstellung Code, werden wir in der Regel laden die minimierte Version der YUI-Komponenten, aber es gibt auch zwei andere Versionen. Die debug.js-Version ist diejenige, die Probleme können uns helfen, zu entdecken. Zum Beispiel, wir könnten mit Dom Collection Methode setStyle zu, sagen wir, die Farbe von einem Textblock. Die Veränderung geschieht nicht, und wir können nicht finden, was falsch ist. Die Datei dom-debug.js hat dies hilfreich Linie, die in gestrichen -min -Version:

  YAHOO.log ('element' + el + "ist nicht definiert ',' Fehler ',' Dom '); 

Diese wird ausgeführt, wenn setStyle Stil versucht werden, suchen Sie das Element an und findet es nicht. Die Fehlermeldung wird wohl zeigen, ein falsch geschriebenes Element-ID oder so Fehler, so schwierig ist, nach einem langen Tag starrte auf den gleichen Code zu pflücken.

Es ist leicht zu bekommen Logger die zum Laufen, brauchen Sie nur Dateien enthalten sein :

  <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>
 <script src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"> </ script>
 <script src="http://yui.yahooapis.com/2.8.1/build/logger/logger-min.js"> </ script> 

Die grundlegende yahoo-dom-event Aggregat ist am wahrscheinlichsten, da bereits während der Drag & Drop optionale Abhängigkeit ist praktisch, um das Fenster zu verschieben den Logger aus dem Weg. Dann fügen Sie einfach:

  var myLogReader = new YAHOO.widget.LogReader (); 

Dann ist es eine Frage der Belastung der -debug Versionen der Komponente-Dateien und alle Nachrichten, die sie erzeugen wird angezeigt. Die Menge an Informationen kann überwältigend sein, so ist es nicht klug, alle Last -debug -Versionen auf einmal. Der Logger kann auch filtern die Informationen angezeigt und Sie können die Info-Kategorie von Nachrichten deaktivieren, um Über-und Fail konzentrieren. Die Filter wirken sich nicht auf, was protokolliert wird, nur das, was gezeigt wird; Logger protokolliert alle Meldungen, unabhängig davon, ob die LogReader zeigt oder nicht. Es gibt nur eine Message Queue pro Anwendung und Protokollierung wird, sobald die Logger-Komponente-Datei geladen wird, ist es egal, ob es angezeigt ist oder nicht gestartet.

Ein weiteres Power-User Strategie für YUI-Debugging mit dem Logger Control ist die Vorteile der Logger die Fähigkeit zu nutzen, nehmen Sie den Browser der Konsole (in den unterstützten Browsern):

  YAHOO.widget.Logger.enableBrowserConsole (); 

Mit diesem Code-Zeile, können Sie alle Rohr Logger an den Browser-Konsole, die ein natürlicher Bestandteil des Workflows in der Entwicklung ist in jedem Fall.

Die einzige langweilige Sache, über die Logger ist daran zu denken, die Änderung der Komponente-Dateien aus dem minimierte, Zuschlagstoffe und Combos zu -debug -Versionen. In dieser, wie immer, das Dependency-Konfigurator ist eine große Hilfe; Klicken Sie auf das -debug Taste auf der oberen linken und es wird Dateien erzeugen die richtige Liste von.

Und jetzt, ich habe es erwähnt:

Überprüfen Sie Ihre Abhängigkeiten

Es ist eine gute Idee, wenn Sie mit YUI starten, um ein Beispiel, das sehr ähnlich, was Sie tun möchten, und ändern Sie es abholen. Wenn Sie mehr Features hinzuzufügen, du nimmst Bits und Stücke aus anderen Beispielen und integrieren sie in Ihre Entwicklung Anwendung. Eine häufige Quelle von Problemen sind die Abhängigkeiten. Viele Menschen fügen Sie die Dateien Abhängigkeit eines jeden Beispiel in ihrer Anwendung, Vervielfältigung einige von ihnen immer und immer wieder. Fehlende, zu vervielfältigen oder in der falschen Reihenfolge Abhängigkeiten kann zu unerwarteten Fehlern kommen. Nicht mit der Yahoo Global Object geladen werden, bevor irgendetwas anderes ist sicherlich werde tödlich sein. Jedenfalls Laden etwas zweimal wird mit Sicherheit zunehmen wie lange es dauert deine Seite zu laden.

Schließlich, wenn Sie mit Ihrem eigenen Server, um die YUI-Bibliothek zu laden, müssen Sie möglicherweise die Basis für Ihren Weg Kopie der Bibliothek falsch. Wenn Sie Firebug haben, auf die Registerkarte Net gehen und überprüfen, dass es keine Linien in rot. Diese würde bedeuten, dass eine angeforderte Ressource konnte nicht gefunden werden.

Debuggen

Die Firebug-Add-on für Firefox ist immer noch der beste Debugger um, plus es ist kostenlos. Standardmäßig wird, wenn der Debugger ist der "Break on all errors" aktivierte Option eingeschaltet ist, was bedeutet, dass Firebug wird an dem Punkt, wo es einen Fehler findet Halt und zeigen die Fehlermeldung und den Quellcode. Einige dieser Fehler werden die gleichen, die JSLint würde diagnostiziert werden, so JSLint noch den ersten Platz zu starten - vor allem, weil Firebug kann nur ein Fehler-Signal auf jedem Lauf während JSLint kann sie alle auf einmal Signal. Einige Fehler werden nur angezeigt, während der Laufzeit, so dass der Debugger ist die einzige Option. Wann immer Sie brechen sich an einem solchen, als erstes zu prüfen, ist die this , ein Vier-Buchstaben-Wort der kniffligsten sortieren.

Bei Verwendung einer Sandbox, wird Debugger zeigen in der Regel lokale Variablen und Argumente, aber sie werden normalerweise nicht zur Verfügung, um die Variablen in Funktionen enthält, wie sie in der Sandbox deklariert und verwendet innerhalb der inneren Funktionen zeigen. Der Debugger können ihren Wert zeigen, wenn du für sie ausdrücklich fragen nach Namen, aber es wird nicht zeigen sie automatisch. Eine weitere Alternative ist, damit sie global zugänglich. Zum Beispiel, da YAHOO.example ist immer verfügbar (wenn YUI 2 Seite ist im), wenn Sie es wünschen, mit Sicherheit ein Auge auf eine Komponente zu allen Zeiten ihr können Sie einfach kopieren:

  var myTree = new YAHOO.widget.TreeView ("Baum-Behälter ');
 YAHOO.example.myTree = myTree; 

Wir fügen der letzten Zuweisung beim Debuggen, so dass wir zB TreeView kann ein Auge auf die beim Debuggen seit myTree normalerweise anderswo innerhalb der Sandbox und unsichtbar.

Verwenden Sie keine Mitglieder beginnend mit Unterstrich

Viele Menschen nutzen den Debugger für die Namen von Variablen oder Eigenschaften, die die Informationen die sie benötigen, zu suchen. Manchmal sind diese Informationen gespeichert ist wie in den Eigenschaften, beginnend mit einem Unterstrich _nodes . Vereinbarungsgemäß werden die privaten Eigenschaften, nicht für den allgemeinen Gebrauch. JavaScript erzwingt keine wahre Begriff der private oder protected Mitglieder, so der führenden Unterstrich den herkömmlichen Weg, um die Absicht der Klasse Entwickler Signal zu halten, dass Eigentum privat ist. Diese Eigenschaften können vorliegenden Versuchung (immerhin kann man dort sehen in dem Debugger), aber es gibt ein paar gute Gründe, warum es nicht ratsam, sie in Ihren Programmen verwenden.

Zunächst werden nur öffentliche Schnittstellen unterstützt. Da Sie sollen nicht eine Eigenschaft, beginnend mit einem Unterstrich verwenden, wird die Klasse Entwickler frei, um es jederzeit ändern. Der Entwickler sollte Wert derselben Verfügung gestellt haben einige öffentliche diesen Mechanismus, um Zugang, zum Beispiel, ein _nodes Privateigentum könnte eine haben getNodes() -Methode oder ein nodes -Konfiguration zuzuschreiben. Jede dieser würde die öffentliche Schnittstelle, die gleiche Wert sein. Der zweite Grund, nicht Eigenschaften mit führenden Unterstriche ist, dass ihre Accessoren Möglicherweise müssen Sie einen sekundären Effekt, der das Privateigentum würde komplett umgehen Zugriff zu produzieren. Die Komponente würde dann in einem inkonsistenten, fragilen Zustand belassen werden.

Also, wenn Sie den Debugger für einen Wert suchen und finden Sie es in einer Immobilie, beginnend mit einem führenden Unterstrich, benutzen Sie es nicht. Gehe stattdessen auf die API-Dokumentation und Blick in den Index für einige Methoden getXxxx() -Methode mit einem ähnlichen Namen oder in der Configuration Attribute Index. Vermeiden Sie die Verwendung private Variablen.

Stack-Traces

Die YUI-Bibliothek ist robust und zuverlässig. Wenn der Debugger bricht im YUI-Bibliothek, ist es wahrscheinlicher, dass es aufgrund eines Fehlers von Ihrem Code induziert wird, die von einigen Scheitern in YUI sich. JavaScript wurde entwickelt, um weitermachen, immer Umgang mit Fehlern so gut wie möglich. Die YUI-Bibliothek funktioniert ebenfalls. Die -debug Versionen werden zusätzliche Kontrollen und Meldungen abgeben Diagnose, aber sie sind alle Versionen entfernt in der minimierte. Wenn Sie einen Fehler in einer Datei YUI sehen, es ist wahrscheinlich, dass es dort ankamen aus purer Sturheit, aber versuchen Sie nicht den Fehler dort zu finden. Wenn der Debugger stoppt es nicht, weil sie die Ursache des Fehlers gefunden hat, sondern weil der JavaScript-Interpreter nicht mehr tragen kann.

Breaks in minimierte Dateien sind nicht hilfreich, wenn Sie eine Nachricht erhalten, wie ...

  F ist kein Objekt in Zeile 7 von dom-min.js 

... Es ist sinnlos, im Forum zu fragen. Zunächst F ist ein Alias von YUI Compressor erzeugt eine Datei ersetzen eine längere, beschreibende Variablennamen im ursprünglichen unkomprimierten, zweitens die ersten Zeilen einer Komponente Datei werden in der Regel respektiert genommen von den Copyright-Vermerk, der die YUI Compressor immer . Und da die YUI Compressor löscht auch alle neuen Online-Zeichen, da es nicht mit anderen Raum weiß, alle ausführbaren Code in dom-min.js ist in den Zeilen 7, 8 und 9 - so die Zeilennummer nicht viel sagen entweder .

Das ist, wenn der Stack-Trace Registerkarte in der rechten Sub-Panel von der Registerkarte Skript von Firebug (oder wo finden Sie die Stack-Trace in Ihrem Debugger) kommt praktisch. Es sagt Ihnen, wie Sie dort hingekommen ist. Hier ist ein Screen-Capture von Firebug:

Die Position auf der rechten Seite, createEvent() ist der Name der Funktion, wo die aktuelle Anweisung ist, die unten ist der Ort, wo createEvent() aufgerufen wurde, die unten, dass die Funktion, dass man als die vorherige; und so weiter. Die meisten Debugger lässt Sie wählen eine dieser Trace-Punkte und sehen, wie Sie wo Sie sind bekam. Firebug informiert Sie außerdem über den Wert der Variablen an jeder der Trace-Punkte. Wir können Unterpanel sehen in der linken den gelben Pfeil, der auf createEvent() . Wir hatten Glück dieses Mal, wie es zu beleidigen Code wird immer auf die Zeile mit dem, aber das Code kann überall innerhalb dieser Zeile; glücklicherweise createEvent() Linie geschieht das zu Beginn des. Sehen Sie die Variablen und Argumente? B , G , L ... es gibt keine raten, was die ursprünglichen Namen konnte, wurden, da dies die YUI Compressor bei der Arbeit. Beachten Sie jedoch, dass YAHOO ist unberührt und die Copyright-Vermerke erhalten bleiben.

Sie können nicht erkennen, viele der Namen in der Stack-Trace, da sie Funktionen innerhalb von Funktionen innerhalb der YUI-Bibliothek selbst sein könnte. Schließlich sehen Sie möglicherweise Funktionsnamen Sie erkennen. In diesem Bild, ich weiß showAlbums , die ruft der Konstruktor für die REDT Klasse (was ich schrieb Code). Ich habe keine Ahnung von nichts anderes. Das ist, wo ich suchen gehen ... die, die ich kenne.

Wenn Sie nicht sicher sind, können Sie durch die Liste gehen. Wenn Sie Code sehen komprimiert (vorausgesetzt, Sie haben nicht komprimiert Ihre eigenen noch) nicht, einfach ignorieren, oder wechseln Sie zu den nicht-minimierte Version des YUI Quelldateien. Aber in erster Linie auf jene Namen, die Sie erkennen, dass auf Ihrem eigenen Code beziehen. Beachten Sie, dass Firebug verwendet (?)() für Spuren es Namen nicht. Üblicherweise wird Ihr Code in der Sandbox signalisiert, dass seit den Sandkasten in einer anonymen Funktion enthalten sein. An jeder solchen Stelle in Ihrer Spur, überprüfen Sie die Werte der Variablen, die Sie als Argumente zur Verfügung gestellt, einige von ihnen vielleicht nicht, was Sie angenommen. Prüfen sie gegen die API-Dokumentation zu sehen, ob es ein gültiges Argument Wert ist.

Wenn das Argument und variablen Werten Sie sehen, sind nicht schlüssig, zumindest können Sie einen Haltepunkt der richtige Ort, bevor Ihr Code ruft die YUI-Komponente. Sie könnten dann in der Lage sein zu sehen, wie Sie in den Schlamassel zu verdanken.

Stack-Traces sind oft von den Entwicklern aber mit JavaScript die Tendenz zu graben sich in ein immer tieferes Loch halten, wie es weiter zu machen versucht ignoriert, ist es gut zu können, kommen an die Oberfläche, um sich umzusehen. Wie bei allen Debugging-Techniken, könnte es nicht immer, aber es ist schön zu wissen, es ist da. Seien wir ehrlich, weit, Sie wissen, was Verzweiflung ist, wenn Sie diese gelesen haben.

Asynchrone Aufrufe

Ein großer Teil der Interaktivität, die Web2.0-Anwendungen charakterisiert ist auf die Fähigkeit zur asynchronen Ereignisse behandeln basiert. Im Gegensatz zu den ursprünglichen Stil von Web-Anwendungen, bei denen jeder Interaktion beteiligt wartet auf eine neue Seite vom Server geliefert werden, umfassen die moderne interaktive Anwendungen Einstellung Dinge und das Hören für einen von mehreren möglichen Ereignisse passieren ... und dann reagieren auf diese Ereignisse. Wir setzen Hörer für Klicks oder Tastatureingaben oder sonstigen programmatischen Veranstaltungen, diese sind in der Regel intuitiv. Asynchrone Aufrufe und deren Rückrufe, aber oft sind schwerer zu verstehen.

Der häufigste Fehler sehe ich in Implementierungen in den Foren ist es, Anruf-Code direkt nach einem asynchronen wie Connection Manager asyncRequest() oder DataSource's sendRequest() -Methoden der Annahme, dass solche Code ausgeführt wird, wenn der Vorgang abgeschlossen ist. Wenn Sie eine solche Funktion aufrufen, sind Sie nur Grundierung der Operation nicht ausführen es in vollem Umfang. Keine Daten werden nach dem Aufruf der asynchronen Methode zur Verfügung. Nur der Antrag auf derartige Daten produziert bisher. Der Server muss erhalten und zu verarbeiten, und die Antwort (wenn es jemals kommt) ist noch in der Zukunft ab. Deshalb ist für solche asynchrone Operationen wir Callback-Funktionen verwenden.

Ein Rückruf ist wie die Funktion weisen wir als Listener für ein Ereignis wie ein Mausklick auf einen Button in einem Formular, wenn der Benutzer, der Listener aufgerufen wird. Der Rückruf auf eine asynchrone Ereignisse ist sehr viel davon, so wie wir ein Formular zu senden, damit ein Benutzer ausfüllen, senden wir eine Anfrage-Nachricht auf dem Server, und genauso wie wir für die ausgefüllte Formular eingereicht zurück zu warten unser Programm, wir warten auf die Antwort vom Server geschickt, um wieder zu uns. Wir können nicht wissen, wann der Benutzer das Formular oder den Server zu senden der Antwort vorzulegen; deshalb haben wir was für eine Aktion des Benutzers nennen wir ein Ereignis-Listener und für ein asynchrones Ereignis nennen wir eine Callback-Funktion gesetzt. Es könnte scheinen die Server-Antwort ist schnell, wenn nicht sofort, sondern es bedeutet, in Zeiten CPU-Zeit.

Debuggen asynchrone Aufrufe

Manchmal gibt es keine Alternative zu Single-Schritt durch den Code. Seien Sie vorsichtig, wenn Sie uns an die asynchrone Aufrufe wie Connection Manager asyncRequest() -Methode, die DataSource sendRequest() oder DOM window.setTimeout() . Diese beginnen eine asynchrone Anforderung Daten auf dem Server oder Verspätung eine Aktion einer bestimmten Zeit und ihre Rückrufe bekommen aufgerufen, wenn die Daten empfangen wurden oder die Zeit abgelaufen ist. Es gibt zwei Aspekte zu berücksichtigen: erstens, wird der Debugger nicht in den Callback automatisch Schritt. Wenn Sie den Anschluss an die Antwort wollen, müssen Sie einen Haltepunkt in der Callback-Funktion setzen. Viele Leute den Punkt erreichen, von dem Aufruf der asynchronen Methode und erwarten, dass die Single-Stepping innerhalb der Callback fortgesetzt, wenn die asynchrone Operation beendet ist. Dies wird nicht passieren, den Faden der Ausführung nicht automatisch fließen in den Rückruf, und der Debugger kann nicht erwartet werden, dass man herausfinden werden.

Zweitens, wenn Sie erreichen die Zeile mit dem asynchronen Aufruf, legte den Haltepunkt in der Callback und lassen Sie dann die Anwendung auszuführen. Normalerweise geht, was nach dem asynchronen Aufruf nicht wirklich wichtig ist, in der Tat ist die asynchrone Aufruf in der Regel am Ende einer Funktion, da es nicht viel zu tun, bis die Antwort eintrifft. Nicht einstufigen über den asynchronen Aufruf, da der Debugger den JavaScript-Interpreter auf Eis halten wird, und wenn die Antwort eintrifft, oder die Zeit abgelaufen ist, wird es verfehlt, denn der Interpreter wurde eingefroren und unfähig, es zu behandeln. Also, wenn Sie waren auf Schritt auf Over, wenn Sie die asynchrone Anruf erhalten, stellen Sie sicher, den Haltepunkt in der Callback und dann auf Ausführen, so der JavaScript-Interpreter ist aktiv und in der Lage, die Antwort zu behandeln.

Für sich wiederholende Ereignisse wie Rückrufe an window.setInterval() oder andere zeitkritische Operationen, ist es besser, sie nicht zu stellen Haltepunkte in. Während Sie sich auf halten, werden viele Ereignisse verpasst werden. Es ist in der Regel besser zu nutzen console.log oder YUI Logger einfach signalisieren, dass das Ereignis geschieht, und zeigen ein paar kritische Werte. Verwenden Sie keine window.alert() aus dem gleichen Grund, es bringt einen Einfluß auf den Browser und die Ereignisse die Sie interessieren werden vermisst wird.

Fazit

Es gibt viele Werkzeuge, die uns helfen herauszufinden, was in unseren Programmen geschieht. Mit der richtigen Werkzeuge zur Hand, können wir einen Fehler finden in weniger Zeit als das, was es bringt uns auf eine Frage in den Foren schreiben zu können. Der erste Schritt ist jedoch auf gute und zuverlässige Code zu schreiben und machen JSLint ein integraler Bestandteil des Entwicklungsprozesses.

Finden Gespräche: Bloglines | technorati

Sagen und erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!