Ich habe lange Zeit JavaScript -Code geschrieben und kann mich nicht erinnern, in welcher Ära es begann. Ich freue mich sehr über die Erfolge von JavaScript in den letzten Jahren. Ich bin sehr glücklich, der Nutznießer dieser Erfolge zu sein. Ich habe viele Artikel, Kapitel und ein Buch geschrieben, das ihm gewidmet ist, aber ich kann jetzt noch ein neues Wissen über diese Sprache finden. Das Folgende beschreibt Programmierfähigkeiten, die mich zum Seufzen "Ah!" in der Vergangenheit. Sie sollten diese Fähigkeiten jetzt ausprobieren, anstatt darauf zu warten, sie in Zukunft versehentlich zu entdecken.
Prägnantes Schreiben
Eine meiner Lieblingssachen in JavaScript ist die Abkürzungsmethode zum Generieren von Objekten und Arrays. Wenn Sie in der Vergangenheit ein Objekt erstellen möchten, müssen Sie dies tun:
var car = new Object (); car.colour = 'rot'; Auto.Weels = 4; CAR.HUBCAPS = 'Spinning'; co.age = 4;
Die folgende Schreibmethode kann den gleichen Effekt erzielen:
var car = {color: 'rot', Räder: 4, Hubcaps: 'Spinning', Alter: 4}Es ist viel einfacher, Sie müssen den Namen dieses Objekts nicht wiederholt verwenden. Auf diese Weise wird das Auto definiert. Vielleicht stoßen Sie auf das Problem von InvaliduserInSession, das nur dann auftritt, wenn Sie IE verwenden. Denken Sie an eine Sache und schreiben Sie keine Kommas vor den Schließklammern, und Sie haben keine Probleme.
Eine weitere sehr bequeme Abkürzung ist für Arrays. Die traditionelle Art, ein Array zu definieren, ist wie folgt:
var moviesthatneedbetterwriters = new Array ('Transformers', 'Transformers2', 'Avatar', 'Indianajones 4');Die Abkürzung Version ist wie folgt:
var moviesthatneedbetterwriters = ['Transformers', 'Transformers2', 'Avatar', 'Indianajones 4'];
Für Arrays gibt es hier ein Problem, aber es gibt eigentlich keine Graph -Gruppenfunktion. Aber Sie werden oft feststellen, dass jemand das obige Auto so definiert, so wie dieses
var car = new Array (); Car ['Farbe'] = 'rot'; Auto ['Räder'] = 4; Car ['Hubcaps'] = 'Spinning'; Auto ['Alter'] = 4;
Arrays sind nicht allmächtig; Wenn sie falsch geschrieben sind, werden sie verwirrend sein. Grafikgruppen sind tatsächlich die Funktion von Objekten, und die Menschen haben diese beiden Konzepte verwirrt.
Eine weitere sehr coole Abkürzungsmethode besteht darin, ternäre bedingte Symbole zu verwenden. Sie müssen es nicht wie unten schreiben ...
var Richtung; if (x <200) {Direction = 1; } else {Direction = -1; }…Sie können es mit der ternären bedingten Notation vereinfachen:
var Direction = x <200? 1: -1;
Wenn die Bedingung zutrifft, wird der Wert nach dem Fragezeichen genommen, ansonsten der Wert nach dem Dickdarm.
Daten in JSON speichern
Bevor ich JSON entdeckte, verwendete ich verschiedene verrückte Methoden, um Daten in den inhärenten Datentypen von JavaScript wie Arrays, Zeichenfolgen, Glyphen, die leicht zu spalten sind, und andere nervige Dinge zu speichern. Nachdem Douglas Crockford Json erfunden hatte, änderte sich alles. Mit JSON können Sie die eigenen Funktionen von JavaScript verwenden, um Daten in komplexe Formate zu speichern, und es müssen keine anderen zusätzlichen Konvertierungen durchgeführt werden, und Sie können direkt darauf zugreifen. JSON ist die Abkürzung der "JavaScript -Objektnotation", die die beiden oben genannten Abkürzungsmethoden verwendet. Wenn Sie also eine Band beschreiben möchten, können Sie so schreiben:
var band = { "name":"The Red Hot Chili Peppers", "members":[ { "name":"Anthony Kiedis", "role":"lead vocals" }, { "name":"Michael 'Flea' Balzary", "role":"bass guitar, trumpet, backing vocals" }, { "name":"Chad Smith", "role":"drums,percussion" }, {"Name": "John Frusciante", "Rolle": "Lead Gitarre"}], "Jahr": "2009"}Sie können JSON direkt in JavaScript verwenden, es in Funktionen zusammenfassen oder sogar als Rückgabewertform einer API verwenden. Wir nennen dies JSON-P, und viele APIs verwenden dieses Formular.
Sie können eine Datenversorgungsquelle aufrufen und JSON-P-Daten direkt im Skriptcode zurückgeben:
<div id = "delicious"> </div> <script> Funktion lecker (o) {var out = '<ul>'; für (var i = 0; i <o.Length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out += '</ul>'; document.getElementById ('lecker'). Innerhtml = out; } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"> </script>Dadurch wird die von der leckere Website bereitgestellte Webdienstfunktion aufgerufen, um die neueste, nicht ordnungsgemäße Lesezeichenliste im JSON -Format zu erhalten.
Grundsätzlich ist JSON der leichteste Weg, um komplexe Datenstrukturen zu beschreiben, und es kann im Browser ausgeführt werden. Sie können es sogar in PHP mit der Funktion json_decode () ausführen. Eine Sache, die mich über die eigenen Funktionen von JavaScript (Mathematik, Array und String) überraschte, ist, dass ich, nachdem ich die Mathematik- und String -Funktionen in JavaScript studiert habe, festgestellt habe, dass sie meine Programmierarbeiten erheblich vereinfachen können. Mit ihnen können Sie komplexe Schleifenverarbeitung und bedingte Urteile speichern. Wenn ich beispielsweise eine Funktion implementieren muss, um die größte Zahl im Nummernarray zu finden, habe ich diese Schleife wie folgt geschrieben:
VAR -Zahlen = [3,342,23,22,124]; var max = 0; für (var i = 0; i <number.length; i ++) {if (number [i]> max) {max = number [i]; }} alert (max);Wir können es ohne Looping tun:
VAR -Zahlen = [3,342,23,22,124]; nummern.sort (Funktion (a, b) {return b - a}); Alert (Zahlen [0]);Es ist zu beachten, dass Sie eine Reihe numerischer Zeichen nicht sortieren können, da es in diesem Fall nur in alphabetischer Reihenfolge sortiert wird. Wenn Sie mehr über die Verwendung erfahren möchten, können Sie diesen guten Artikel über Sort () lesen.
Eine weitere interessante Funktion ist Math.max (). Diese Funktion gibt die größte Zahl im Parameter zurück:
Math.max (12,123,3,2,433,4); // Gibt 433 zurück
Da diese Funktion Zahlen überprüfen und die größte zurückgeben kann, können Sie sie verwenden, um die Unterstützung des Browsers für eine Funktion zu testen:
var scrolltop = math.max (doc.documentElement.scrolltop, doc.body.scrolltop);
Dies wird verwendet, um IE -Probleme zu lösen. Sie können den Scrolltop -Wert der aktuellen Seite abrufen. Abhängig vom DocType auf der Seite speichert nur eine der beiden oben genannten Eigenschaften diesen Wert, und die andere Eigenschaft wird nicht definiert, sodass Sie diese Nummer mit Math.max () erhalten können. Lesen Sie diesen Artikel und Sie erhalten mehr Wissen über die Verwendung mathematischer Funktionen, um JavaScript zu vereinfachen.
Es gibt auch ein Paar sehr nützliche Funktionen, die Strings betreiben () und join (). Ich denke, das repräsentativste Beispiel wäre, eine Funktion zum Anhängen von CSS -Stilen an Seitenelemente zu schreiben.
Es ist so. Wenn Sie eine CSS -Klasse an das Seitenelement anhängen, ist es entweder die erste CSS -Klasse dieses Elements oder es hat bereits einige Klassen. Sie müssen nach der vorhandenen Klasse einen Platz hinzufügen und dann der Klasse folgen. Und wenn Sie diese Klasse entfernen möchten, müssen Sie auch die Räume vor dieser Klasse entfernen (dies war in der Vergangenheit sehr wichtig, da einige alte Browser die Klasse, gefolgt von den Räumen, nicht erkannt haben).
Das ursprüngliche Schreiben sieht also wie folgt aus:
Funktion AddClass (ELM, NewClass) {var c = elm.className; elm.className = (c === '')? NewClass: C+''+NewClass; }Sie können Split () und Join () -Funktionen verwenden, um diese Aufgabe automatisch zu erledigen:
Funktion addClass (ELM, NewClass) {var classes = elm.className.split (''); classes.push (NewClass); elm.className = classes.join (''); }Dadurch wird sichergestellt, dass alle Klassen durch Leerzeichen getrennt sind und dass die Klasse, die Sie anhängen möchten, genau die letzte platziert.
Ereignisdelegation
Webanwendungen werden alle von der Veranstaltung angetrieben. Ich mag das Handling mit Events, besonders ich mag es, Ereignisse selbst zu definieren. Es macht Ihr Produkt skalierbar, ohne den Kerncode zu ändern. Es gibt ein großes Problem (auch eine mächtige Manifestation) über die Entfernung von Ereignissen auf der Seite. Sie können einen Event -Listener in einem Element installieren und der Event -Listener funktioniert. Auf der Seite gibt es jedoch keinen Hinweis darauf, dass es einen Hörer gibt. Aufgrund dieses unvorhersehbaren Problems (das für einige Neulinge besonders problematisch ist) und der verschiedenen Speicherprobleme, die "Browser" wie IE6 zu viele Ereignishörungen verwenden, müssen Sie zugeben, dass es ratsam ist, das Ereignisprogramm so wenig wie möglich zu verwenden.
Die Begehung des Vorfalls ereignete sich also.
Wenn ein Ereignis auf einem Element auf der Seite ausgelöst wird und in der DOM -Erbschaftsbeziehung alle Kinder dieses Elements auch dieses Ereignis erhalten. Zu diesem Zeitpunkt können Sie einen Event -Handler auf dem übergeordneten Element verwenden, um es zu verarbeiten, anstatt Ereignishörer für eine Reihe von Kinderelementen zu verwenden, um es zu verarbeiten. Was genau bedeutet es? Lassen Sie es uns so ausdrücken, es gibt viele Hyperlinks auf der Seite. Sie möchten diese Links nicht direkt verwenden. Sie möchten diesen Link über eine Funktion aufrufen. Der HTML -Code ist so:
<h2>Great Web resources</h2> <ul id="resources"> <li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li> <li><a href="http://sitepoint.com">Sitepoint</a></li> <li><a href = "http://alistapart.com"> eine Liste auseinander </a> </li> <li> <a href = "http://yuiblog.com"> yui blog </a> </li> <li> <a href = "http://blameitonthevoices"> bloame it it it it the voices </bameitonthevoices href = "http://oddlyspecific.com"> Seltsamerweise spezifisch </a> </li> </ul>
Es ist eine übliche Praxis, diese Links zu durchlaufen und an jedem Link einen Ereignishandler anzubringen:
// typisches Beispiel für Ereignisbehandlungen (function () () {var ressourcen = document.getElementById ('ressourcen'); var links = ressourcen.getElementsByTagName ('a'); var alle = links.length; Länge; für (var i = 0; i <all; i ++) {// Anbringen eines Hörers an jeden Link -Link -Links [i] .Addeer ('klicks ’; Handler (e) {var x = e.target;Wir können diese Aufgabe auch mit einem Ereignisprozessor erledigen:
(function () {var ressourcen = document.getElementById ('Ressourcen'); Ressourcen.AdDeventListener ('Click', Handler, False); Funktion Handler (e) {var x = e.target; // Holen Sie sich den Link, der (x.nodename.tolowerCoire () {) {) {) {) {) {) {{) {{{)}} ('Ereignis:' + · ×); }) ();Da das Klickereignis in diesen Seitenelementen stattfindet, müssen Sie nur ihre Knotennamen vergleichen und herausfinden, welches Element auf das Ereignis reagieren soll.
Haftungsausschluss: Die beiden oben genannten Beispiele zu Ereignissen können in allen Browsern ausgeführt werden. Mit Ausnahme von IE6 müssen Sie ein Ereignismodell auf IE6 und nicht für eine einfache W3C -Standardimplementierung verwenden. Aus diesem Grund empfehlen wir einige Toolkits.
Der Vorteil dieses Ansatzes beschränkt sich nicht darauf, mehrere Ereignisverarbeiter in einen zu reduzieren. Denken Sie beispielsweise darüber nach, dass Sie beispielsweise weitere Links zu dieser Link -Tabelle hinzufügen müssen. Nach der Verwendung von Ereignisdelegation müssen Sie keine anderen Änderungen vornehmen. Andernfalls müssen Sie diese Link-Tabelle neu anlegen und den Ereignishandler für jeden Link erneut installieren.
Anonyme Funktionen und Modularität
Das nervigste in JavaScript ist, dass Variablen keinen Umfang zu verwenden haben. Jede Variable, Funktion, Array, Objekt, solange es sich nicht in der Funktion befindet, gilt als global, was bedeutet, dass andere Skripte auf dieser Seite ebenfalls darauf zugreifen und darauf überschreiben können.
Die Lösung besteht darin, Ihre Variable in eine anonyme Funktion zu stecken und sie sofort nach ihrer Definition aufzurufen. Beispielsweise erzeugt die folgende Schreibmethode drei globale Variablen und zwei globale Funktionen:
var name = 'chris'; var age = '34'; var status = 'Single'; Funktion CreateMember () {// [...]} Funktion getMemberDetails () {// [...]}Wenn in anderen Skripten auf dieser Seite eine Variable bezeichnet wird, die als Status bezeichnet wird, treten Probleme auf. Wenn wir sie in einer MyApplication zusammenfassen, wird dieses Problem gelöst:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'Single'; Funktion CreateMember () {// [...]} Funktion getMemberDetails () {// [...]}} ();Auf diese Weise gibt es jedoch keine Funktion außerhalb der Funktion. Wenn Sie dies brauchen, ist das in Ordnung. Sie können auch den Namen der Funktion weglassen:
(function () {var name = 'chris'; var age = '34'; var status = 'einzeln'; Funktion createMember () {// [...]} Funktion getMemberDetails () {// [...]}}) ();Wenn Sie die Innenseite der Funktion verwenden möchten, müssen Sie einige Änderungen vornehmen. Um auf CreateMember () oder GetMemberDetails () zuzugreifen, müssen Sie sie in Myapplication -Eigenschaften verwandeln, um sie der externen Welt auszusetzen:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'Single'; return {CreateMember: function () {// [...]}, getMemberDetails: function () {// [...]}}} (); //myapplication.createmember () und //myapplication.getMemberDetails () können verwendet werden.Dies wird als Modulmodus oder Singleton bezeichnet. Douglas Crockford hat viele Male darüber gesprochen und ist in der Yui -Bibliothek der Yahoo User Interface in großem Umfang verwendet. Was mich jedoch unbequem macht, ist, dass ich die Satzstruktur ändern muss, damit auf Funktionen und Variablen von der Außenwelt zugegriffen werden können. Darüber hinaus muss ich beim Anruf das Präfix der MyApplication hinzufügen. Ich mache das also nicht gerne, ich bevorzuge es, Zeiger einfach in Elemente zu exportieren, auf die von der Außenwelt zugegriffen werden muss. Danach wird das Schreiben externer Anrufe vereinfacht:
var myApplication = function () {var name = 'chris'; var age = '34'; var status = 'Single'; Funktion CreateMember () {// [...]} Funktion getMemberDetails () {// [...]} return {create: createmember, get: getMemberDetails}} (); // Schreiben Sie es jetzt als myApplication.get () und myapplication.create ().Ich nenne das "enthüllende Modulmuster".
Konfigurierbar
Nachdem ich den JavaScript -Code, den ich an diese Welt geschrieben habe, veröffentlicht hatte, wollte jemand ihn ändern. Normalerweise wollten die Leute Aufgaben erledigen, die es nicht selbst erledigen konnten - aber normalerweise war das Programm, das ich schrieb, nicht flexibel genug und bot keine benutzerdefinierten Funktionen. Die Lösung besteht darin, Ihrem Skript ein Konfigurationselementobjekt hinzuzufügen. Ich habe einmal einen Artikel geschrieben, in dem JavaScript -Konfigurationselementobjekte eingehalten werden. Hier sind die wichtigsten Punkte:
---- Fügen Sie in Ihrem Skript ein Objekt namens Konfiguration hinzu.
---- Dieses Objekt speichert alle Dinge, die Menschen oft ändern müssen, wenn dieses Skript verwendet wird:
** CSS -ID und Klassenname;
** Schaltflächenname, Beschriftungswort usw.;
** Werte wie "Anzahl der pro Seite angezeigten Bilder" und "Größe der angezeigten Bilder";
** Standort, Ort und Spracheinstellungen.
--- Geben Sie dieses Objekt an den Benutzer als gemeinsame Eigenschaft zurück, damit der Benutzer es ändern und überschreiben kann.
Dies ist normalerweise das, was Sie im letzten Schritt in Ihrem Programmierungsprozess tun müssen. Ich habe diese in einem Beispiel konzentriert: "Fünf Dinge, die sie mit einem Skript vorgehen sollten, bevor ich es dem nächsten Entwickler übergab."
Tatsächlich möchten Sie auch, dass Ihr Code sehr gut verwendet wird und einige Änderungen entsprechend ihren jeweiligen Bedürfnissen vornimmt. Wenn Sie diese Funktion implementieren, erhalten Sie weniger verwirrende E -Mails von Personen, die sich über Ihr Skript beschweren. Dies wird Ihnen sagen, dass jemand Ihr Skript geändert hat und es sehr nützlich ist.
Mit dem Hintergrund interagieren
Eines der wichtigen Dinge, die ich in so vielen Jahren der Programmierung gelernt habe, ist, dass JavaScript eine hervorragende Sprache für die Entwicklung der Schnittstelleninteraktion ist. Wenn es jedoch verwendet wird, um Zahlen zu verarbeiten oder auf Datenquellen zuzugreifen, ist es etwas unbefriedigend.
Zunächst habe ich JavaScript gelernt, Perl zu ersetzen, weil ich es hasse, den Code in den CGI-bin-Ordner kopieren zu müssen, um Perl zu laufen. Später wurde mir klar, dass ich eine Backend -Arbeitssprache verwenden sollte, um die Hauptdaten zu verarbeiten, und ich kann nicht zulassen, dass JavaScript alles tut. Noch wichtiger ist, dass wir Sicherheits- und Sprachmerkmale berücksichtigen müssen.
Wenn ich auf einen Webdienst zugreife, kann ich die Daten im JSON-P-Format abrufen. Im Clientbrowser führe ich verschiedene Datenkonvertierung durch, aber wenn ich einen Server habe, habe ich mehr Möglichkeiten, die Daten umzuwandeln. Ich kann JSON- oder HTML-Formatdaten auf der Serverseite generieren und an den Client sowie an Cache-Daten usw. zurückgeben. Wenn Sie diese im Voraus verstehen und vorbereiten, werden Sie langfristige Gewinne erzielen und viele Kopfschmerzen sparen. Das Schreiben von Programmen, die für verschiedene Browser geeignet sind, ist Zeitverschwendung. Verwenden Sie das Toolkit!
Als ich die Webentwicklung zum ersten Mal begann, hatte ich lange Zeit mit der Verwendung von Dokument.all oder Dokument.Layers bei dem Zugriff auf die Seite. Ich habe mich für Dokument entschieden. Das Schichtmuster schlug schließlich fehl, so dass ich mit Dokument.Alle begann. Ich war sehr glücklich, als Netscape 6 ankündigte, dass es nur W3C -DOM -Modelle unterstützt, aber tatsächlich kümmerten sich die Benutzer dies nicht darum. Benutzer sehen nur, dass solche Browser Dinge nicht anzeigen können, die die meisten Browser normal anzeigen können - dies ist ein Problem mit unserer Codierung. Wir haben kurzsichtigen Code geschrieben, der nur in der aktuellen Umgebung ausgeführt werden kann, aber leider ändert sich unsere Betriebsumgebung ständig.
Ich habe zu viel Zeit damit verschwendet, mit verschiedenen Browsern und verschiedenen Versionen Kompatibilität umzugehen. Wenn ich gut mit dieser Art von Problem umgehen kann, gibt ich eine gute Arbeitsplatzmöglichkeit. Aber jetzt müssen wir diesen Schmerz nicht ertragen.
Einige Toolkits wie Yui, JQuery und Dojo können uns helfen, mit dieser Art von Problem umzugehen. Sie lösen verschiedene Browserprobleme, indem sie verschiedene Interface -Implementierungen abstrahieren, wie z. B. Versionskompatibilität, Designfehler usw., was uns vor unseren Schmerzen rettet. Wenn Sie keinen bestimmten Beta -Browser testen möchten, fügen Sie Ihrem eigenen Programm keinen Code hinzu, um die Fehler des Browsers zu korrigieren, da Sie wahrscheinlich vergessen, Ihren Code zu löschen, wenn der Browser dieses Problem geändert hat.
Andererseits ist es auch ein kurzsichtiges Verhalten, sich vollständig auf Toolkits zu verlassen. Toolkits können Ihnen helfen, sich schnell zu entwickeln. Wenn Sie jedoch kein tiefes Verständnis von JavaScript haben, werden Sie auch etwas falsch machen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.