Schmerzloser JavaScript mit Prototypen

Wenn Sie sich auf Rails befinden, müssen Sie den Prototyp nicht herunterladen: Es ist in der Verteilung enthalten. Sie können es in Ihre Ansichten einbeziehen, indem Sie dies in die Ihrer Seiten einfügen:

<%= javascript_include_tag 'prototype' %>

Lassen Sie uns jetzt darauf eingehen!

Prototype Little Helpers

Eine der wirklich netten Dinge bei der Verwendung von Prototypen sind die tödlichen einfachen Helferfunktionen, die es für sehr häufige Skriptaufgaben bietet. Die $ -Funktion hat bereits etwas Aufmerksamkeit erregt. Geben Sie ihm ein oder mehrere Element -IDs, und es wird Referenzen auf sie zurückgeben:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Es ist wie ein aufgemotztes Dokument.

Eine weitere unglaublich nützliche Funktion ist Dokument.

Da dieser Artikel geschrieben wurde, hat Prototyp Version 1.5.0_RC0 die leistungsstarke $$ -Funktion gewonnen, mit der Sie Elemente mit der Standard -CSS -Selektorsyntax auswählen können:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Bitte beachten Sie, dass diese Funktion zum Zeitpunkt des Schreibens, es sei denn

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

JavaScript weniger saugen

$F takes an ID and returns the value of any form field, for instance, a select box like this:

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

oops, ich habe eine andere JavaScript -Bibliotheks -Tag -Linie gestohlen. Die Entwickler der JavaScript -Bibliothek können einfach nicht davon abhalten, JavaScript wie eine andere Sprache zu machen. Die Mochikit -Leute wollen, dass JavaScript Python ist, unzählige Programmierer haben versucht, JavaScript wie Java zu machen, und der Prototyp versucht, es wie Ruby zu machen. Der Prototyp führt Erweiterungen zum Kern von JavaScript, der (wenn Sie sie verwenden) einen dramatischen Einfluss auf Ihren Ansatz zur Codierung von JavaScript haben können. Abhängig von Ihrem Hintergrund und der Funktionsweise Ihres Gehirns kann dies Ihnen helfen oder auch nicht.

oo the Ruby (ish) Weg: class.create und object.extend

Mit der Klasse der Klasse können Sie Klassen auf rubinartigere Weise definieren, obwohl dies rein ästhetisch ist, da sie im Wesentlichen nur die initialisierende Methode, die Sie als Konstruktor definieren, und nicht den traditionellen JavaScript-Ansatz des Erstellens von Objekten mit Konstruktorfunktionen aufruft.

viel leistungsstärker ist die dumm einfache, aber effektive Objekt. Alles, was es tut, ist, die Eigenschaften und Methoden eines Objekts in ein anderes Objekt zu kopieren, aber seine Verwendung sind viele. Hier ist ein kurzer Zeitpunkt:

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

Es wird am häufigsten verwendet, um Methoden aus einem Objekt mit einem anderen zu „mischen“. Zum Beispiel können Sie eine Reihe von Funktionen erstellen, die bestimmte DOM -Elemente sortierbar machen:

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

Wenn wir dann unsere Domtable von oben sortierbar machen wollten, könnten wir diese Methoden mit dem Domtable -Objekt mischen:

<%= javascript_include_tag 'prototype' %>

Jetzt können wir diese Methoden auf der Tabelle aufrufen:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Funktionsbindung

Prototyp fügt dem Funktionsobjekt auch zwei wirklich nützliche Methoden hinzu: BindaseventListener. Diese werden hauptsächlich verwendet, um eine Funktion an ein bestimmtes Objekt zu binden, so dass dieses Schlüsselwort auf dieses Objekt zeigt. Dies ist unglaublich nützlich, wenn Sie Event -Handler -Funktionen festlegen. Stellen Sie sich vor, Sie probieren so etwas aus:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

traditionell erhalten Sie einen Fehler, denn wenn das Ereignis die Handler -Funktion auslöst, bezieht sich dies auf das MyDIV -Element, nicht auf MyObject, so dass diese Message undefiniert ist. Sie können dieses Problem anhand der Bind -Methode wie SO lösen:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

Jetzt funktioniert alles einwandfrei, da dieses Schlüsselwort an myObject gebunden ist. Darüber hinaus macht BindaseventListener das Gleiche, obwohl es das Ereignisobjekt in einer Kreuzbrowser-kompatiblen Weise an Ihre Funktion übergeben, sodass Sie sich keine Sorgen mehr machen müssen. Event in dh. Versuchen Sie Folgendes:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Jetzt hat unsere EventHandler -Funktion Zugriff auf das Ereignisobjekt. Auf der Website ihres Erstellers sind viel mehr Details zu diesen beiden Methoden verfügbar.

Neue Zeichenfolge und Zahlenmethoden

Prototyp hat dem integrierten in String -Objekt eine enorme Anzahl nützlicher Methoden hinzugefügt. Schauen wir uns einen kurzen Blick auf einige der besten an.

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

Prototyp fügt ebenfalls eine großartige Methode hinzu. Verabschieden Sie sich von Ihnen für Schleifen!

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

Hier nimmt die Times -Methode eine Funktion, die als die angegebene Häufigkeit bezeichnet wird, und gilt in der aktuellen Iterationsnummer als Argument. Diese Verwendung einer Iteratorfunktion ist häufig bei der Verwendung von Aufzählung, die wir als nächstes besprechen.

iteriert den Ruby -Weg: Aufzählbar und Hash

Eines der versteckten Edelsteine ​​des Prototyps ist das aufzählbare Mischung und das Hash-Objekt, das direkt aus Ruby pochiert wurde. Wenn Sie mit Ruby nicht vertraut sind, machen Sie sich keine Sorgen. Ich werde alles hier erklären.

wir beginnen mit aufzählbar. Kurz gesagt, wenn wir ein Objekt mit Objekt aufzählbar addieren, gibt es dem fraglichen Objekt viele wirklich nützliche Funktionen für die Arbeit mit seinen Eigenschaften. Aufzählbar wurde zum Prototyp von Array hinzugefügt, sodass jedes Array diese neuen Methoden hat. Hier sind einige Beispiele für das, was Sie mit den neuen „aufgezählten“ Arrays tun können:

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

// sort the table using the given function <br>
myTable.sortBy(function (itemA, itemB) { ... });

var myObject = new Object();  <br>
myObject.message = "Hello!";  <br>
myObject.eventHandler = function() {  <br>
  alert(this.message);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler;

$("mydiv").onmouseover = myObject.eventHandler.bind(myObject);

myObject.eventHandler = function(event) {  <br>
  alert(event.srcElement.nodeName);  <br>
}  <br>
  <br>
$("mydiv").onmouseover = myObject.eventHandler.bindAsEventListener(myObject);

// "backgroundColor"  <br>
"background-color".camelize()

camelize turns hyphenated strings to camel case strings that you can use to work with CSS properties.

// "I am a piece of HTML"  <br>
"I am a piece of <strong>HTML</strong>".striptTags()  <br>
  <br>
// {a : 10, b: "thing"}  <br>
"a=10&b=thing".toQueryParams()

Um einen Hash zu erstellen, rufen Sie die magische Funktion $ H für jedes Objekt auf. Dies verwandelt alle Eigenschaften des Objekts in einen Satz von Schlüsselwertpaaren mit aufzählbarem gemischtem. Nehmen wir Hashes für einen Spin:

<%= javascript_include_tag 'prototype' %>

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Wenn Sie kein Rubyist, aufzählbar sind und Hash ein bisschen mühsam erscheinen, aber ich kann Ihnen versichern, dass Sie sich fragen, warum Sie sich jemals die Mühe gemacht haben, RSI alle für Loops zu schreiben! Wenn Sie einen oder mehrere von ihnen zusammen verwenden, werden Sie die massive Kraft dieser neuen Methoden erkennen. Du kannst "> Lesen Sie über Aufzählung und Hash ausführlicher bei Encyte Media.

Das Ereignisobjekt hilft, für viele den heiligen Gral von JavaScript zu liefern: Einfache Cross-Browser-Ereignishandhabung:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

Auf eine ziemlich angenehme Weise versucht der Prototyp, diese lästigen Speicherlecks in IE zu vermeiden, indem jeder Beobachter automatisch entfernt wird, wenn die Seite entlädt.

Meiner Meinung nach ist dies im Moment jedoch eine eher unterentwickelte Ereignisbehandlungslösung, daher könnte es sich lohnt, etwas zu verwenden, das ein bisschen reicher wie Dean Edwards 'AddEvent ist.

Handhabungsformulare

Die Formular- und Feldobjekte bieten eine Reihe einfacher, aber bequemer Funktionen für die Arbeit mit Formularen und Eingabefeldern sowie Code, die die AJAX -Implementierung des Prototyps unterstützt.

Das Formularobjekt

Im Allgemeinen nehmen Methoden des Formularobjekts entweder eine ID oder eine Objektverweise auf ein Element:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Das Feldobjekt

Das Feldobjekt befasst sich mit einzelnen Formularelementen, und seine Methoden nehmen typischerweise eine ID oder einen Objektverweis auf das Element in ähnlicher Weise wie das Formularobjekt an:

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

Formserialisierung

In Prototypen bedeutet Serialisierung eines Formulars das Lesen aller Elemente des Formulars und verwandeln sie in eine URL-kodierte Zeichenfolge (nahezu) (fast) identisch mit dem, die gesendet werden würde, wenn Sie das Formular einreichen. Betrachten Sie beispielsweise diese Form:

var DOMTable = Class.create(); <br>
DOMTable.prototype = { <br>
  initialize : function(el) { <br>
    this.el = el; <br>
  }, <br>
  ... <br>
}

Beachten Sie, dass das Formular enthält. Form.Serialize ist für mehrere Aufgaben nützlich, kommt aber selbst, wenn wir mit Ajax arbeiten, wie wir in Kürze sehen werden.

// make a (shallow) copy of obj1 <br>
var obj2 = Object.extend({}, obj1); <br>
 <br>
var options = { <br>
  method : "post", <br>
  args : "" <br>
}; <br>
 <br>
// merges in the given options object to the default options object <br>
Object.extend(options, { <br>
  args : "data=454", <br>
  onComplete : function() { alert("done!"); } <br>
}); <br>
 <br>
options.method // "post" <br>
options.args // "ata=454" <br>
options.onComplete // function() { alert("done!"); }

var Sortable = { <br>
  sortBy : function(func) { <br>
    ... <br>
  }, <br>
  sortByReversed : function(func) { <br>
    ... <br>
  }, <br>
  reset : function() { <br>
    ... <br>
  } <br>
};

var myTable = new DOMTable("table-id"); <br>
Object.extend(myTable, Sortable);

Diese Beobachter prüfen jede Sekunde, ob sich die Daten geändert haben oder nicht, und nennen Sie MyCallbackfunction, wenn dies ist.

Die zweite Art von Beobachter ist ereignisbasiert und führt nur die Überprüfung durch, wenn Änderungen oder Klickereignisse für die Elemente erstellt werden. Sie können es so verwenden:

// sort the table using the given function <br>
myTable.sortBy(function (itemA, itemB) { ... });

Wenn alle Felder in der Form, die Sie beobachten, einen Ereignishandler unterstützen, ist dies eine viel effizientere Möglichkeit, die Form zu beobachten. Wenn Sie jedoch nach Änderungen der Elemente achten möchten, die diese Ereignisse nicht unterstützen, verwenden Sie die regelmäßigen Beobachter.

DOM

arbeiten

Prototyp hat 4 Objekte (Element, Insertion, Beobachter und Position), die verschiedene Formen der DOM-Manipulation ermöglichen und über viele der Browserunterschiede glatt sind, die den Umgang mit dem DOM-so-senkmalsmischend machen. Anstatt Ihren Computer aus dem Fenster zu werfen, schauen Sie diesen Abschnitt durch.

Das Elementobjekt

Das Elementobjekt funktioniert in der Art und Weise, wie Sie es wahrscheinlich zu diesem Zeitpunkt erwarten: Die meisten Methoden des Elements nehmen einfach eine ID oder einen Objektverweis auf das Element, das Sie manipulieren möchten. Hier ist ein Blick auf einige der nützlichsten Methoden:

<%= javascript_include_tag 'prototype' %>

Siehe die vollständige Liste auf der Site von Sergio Pereira.

Das Insertion -Objekt

Ich weiß, was du denkst: Das klingt ein bisschen komisch, oder? Nun, das Insertion -Objekt fügt HTML -Stücke in und um ein Element hinzu. Es gibt 4 Arten von Insertion: Vor, nach oben und unten. Hier erfahren Sie, wie Sie vor einem Element mit der ID "Myelement" HTML hinzufügen:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Dieses Diagramm zeigt, wo jeder Einfügungsart Ihren HTML -Inhalt in Bezug auf das angegebene Element fallen lässt.

Das Positionsobjekt

Das Positionsobjekt bietet eine Ladung von Methoden, die Ihnen über einen bestimmten Ort auf dem Bildschirm informiert werden und Informationen zu diesem Ort in Bezug auf andere Elemente in einer kompatiblen Art und Weise angeben können. Dies sollte einen Großteil der Geige aus dem Schreiben von Animationen, Effekten und Drag-and-Drop-Code nehmen. Schauen Sie sich die Positionsreferenz für weitere Details an.

Holen Sie sich Ihr Web 2.0 auf

"Endlich!" Sie denken: "Er hat das, was wir wirklich wissen wollen." Ja, ich habe es bis zum Ende überlassen, um in AJAX -Helfer von Prototypen zu gelangen, da sie auf all den anderen Dingen aufgebaut sind, die wir durchgemacht haben, und es hilft, die Form der Form der Prototype, Beobachter und Insertionen zu verstehen, wenn wir über AJAX sprechen.

Ajax, falls Sie in den letzten Jahren in einem sehr tiefen Loch begraben wurden, bezieht sich auf das XMLHTTPREquest -Objekt des Browsers (oder gleichwertig), um mit dem Server zu kommunizieren, ohne die Seite neu zu laden. Der Prototyp glättet die meisten Details, aber es ist immer noch gut, ein wenig Hintergrund zu XMLHTTPrequest zu erhalten, was Sie in diesem Artikel von Cameron Adams finden.

Jetzt sind Sie alle gepumpt, um eine Web 2.0 -Aktion zu erhalten. Schauen wir uns in eine wirklich einfache AJAX -Anfrage an:

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

Der Ajax.Request -Konstruktor nimmt eine URL und ein Optionsobjekt. In diesem Fall senden wir einen Parameter (Namen) an Hello.php und alarmieren seine Antwort (oder alarmieren einen Fehler, wenn er nicht funktioniert). Es lohnt sich, sich die Zeit zu nehmen, um sich mit den verfügbaren Optionen vertraut zu machen. Hier ist ein Überblick über die Optionen sowie ihre Standardeinstellungen:

Prototyp fügt allen AJAX -Anforderungen einen benutzerdefinierten HTTP -Header hinzu, sodass Ihre Serveranwendung erkennen kann, dass es sich um einen AJAX -Aufruf handelt und nicht einen normalen Anruf. Der Header ist:

<%= javascript_include_tag 'prototype' %>

Hier ist eine Beispiel -PHP -Funktion, mit der ein Ajax -Aufruf erfasst wird:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Mit diesem Ansatz können Sie AJAX -Anwendungen schreiben, die funktionieren, auch wenn der Benutzer einen alten Browser verwendet oder JavaScript deaktiviert hat, aber das ist ein ganz anderer Artikel…

Verwenden von Form.Serialize, um Daten an ajax.request

weiterzugeben

Wie oben gesehen, wird die Parameteroption verwendet, um eine URL-kodierte Variablenfolge zu übergeben. Wenn die Daten, die Sie senden müssen, über ein Formular festgelegt werden, wie bei den meisten AJAX-Anwendungen, können Sie einfach das Formular verwenden.

// all elements with class 'navlink' <br>
document.getElementsByClassName("navlink") <br>
// all elements with class navlink and inside the element with ID 'nav' <br>
document.getElementByClassName("navlink", $("nav"))

AJAX -Ereignishandler schreiben

Im obigen Beispiel sind Onsuccess und Onfailure zwei Beispiele für AJAX -Ereignishandler. Ereignishandlerfunktionen im Optionsobjekt eines Ajax.request -Aufrufs erhalten ein Argument, das das XMLHTTPrequest -Objekt für diesen Ajax -Aufruf ist. Normalerweise nenne ich diese Argument -Antwort oder red. Sie können dieses Argument verwenden, um die Antwort vom Server wie SO zu erhalten:

// an array of all input elements inside 'commentform' <br>
$$("#commentform input") <br>
// an array of all links with the class 'external' <br>
$$("a.external")

Denken Sie jedoch daran, dass resp nur das xmlhttprequest -Objekt ist, sodass alle diese Eigenschaften verfügbar sind.

Sie können Daten als JSON von Ihrem Server von Ihrem Server senden, indem Sie die JSON-Daten zum X-JSON-Antwortheader hinzufügen. Dies wird dann automatisch durch Prototyp bewertet und als zweites Argument gesendet.

the ajax.updater und ajax.periodicalUpdater

Viele AJAX -Operationen beinhalten lediglich die Aktualisierung von HTML auf Ihrer Seite mit HTML, die vom Server zurückgegeben wurden. Das Objekt Ajax.Updater wickelt ajax.request und vereinfacht diesen gemeinsamen Anwendungsfall für uns. Hier ist ein einfaches Beispiel:

$F takes an ID and returns the value of any form field, for instance, a select box like this:

Der obige Snippet würde einfach den Inhalt des Elements ersetzen, dessen ID „myDiv“ durch den Inhalt war, der vom Server zurückgegeben wurde. Ajax.periodicalUpdater ist ähnlich, bringt den Ajax jedoch wiederholt in einem Intervall auf, das Sie festgelegt haben:

<select name="country" > <br>
  <option selected="selected" value="UK">United Kingdom</option> <br>
  <option value="FR">France</option> <br>
  ... <br>
</select> <br>
 <br>
$F('country') // 'UK'

Mit der Zerfallsoption können Sie Ihrem Server ein wenig Pause geben, wenn sie viele identische Antworten zurückgibt. Im Wesentlichen stellt jederzeit, in dem PeriodicalUpdater eine Anfrage stellt, die Ergebnisse mit dem vergleicht, was der Server beim letzten Mal zurückgegeben hat. Wenn die Werte gleich sind, multipliziert sie das Intervall mit dem Zerfallswert. Für das obige Beispiel würde die nächste Anfrage zwei Sekunden später, vier Sekunden später und so weiter, bis sie ein anderes Ergebnis vom Server erhielt. Zu diesem Zeitpunkt würde das Intervall auf eine Sekunde zurückgesetzt.

ajax mit Respondern Mit

AJAX -Responder können Sie globale Ereignishandler registrieren, die für jede Ajax -Anfrage, die auf der Seite stattfindet, ausgelöst werden. Sie sind sehr nützlich, um Anwendungen mit großen Mengen an AJAX -Aktivitäten zu verwalten. Zum Beispiel können Sie sie verwenden, um eine Standard -Ladeanimation anzuzeigen, wenn eine AJAX -Anfrage stattfindet:

<%= javascript_include_tag 'prototype' %>

Wenn Sie nach Arbeitsbeispielen von AJAX mit Prototyp suchen, probieren Sie diesen Artikel aus.

wohin als nächstes?

Wie wir in diesem Artikel gesehen haben, ist Prototyp nicht nur für sich genommen nützlich, sondern bietet auch einen hervorragenden Ausgangspunkt für das Schreiben anderer, spezialisierterer Bibliotheken. Genau das hat eine wachsende Anzahl von Menschen getan.

script.aculo.us und moo.fx

Thomas Fuchs 'script Es war ursprünglich Teil der Kernprototyp -Bibliothek, wurde aber bald außer Kontrolle und brach sich von seinem Elternteil frei.

Verwenden Sie Prototyp als Grundlage, script.aculo.us spezialisiert auf eine umfangreiche Benutzererfahrung durch animierte Effekte, einfach zu verwendende Drag & Drop -Funktionen und leistungsstarke UI -Komponenten. Auf der Website befindet sich ein schönes Wiki mit einem schnell wachsenden Laden von Qualitätsdokumentationen, mit denen Sie loslegen können, und Beispielseiten, um Ihre kreativen Säfte zum Fließen zu bringen. Da script.aculo.us in der Dateigröße ziemlich groß wird, wurde es in mehrere Dateien aufgeteilt, sodass Ihre Benutzer die gesamte Bibliothek nicht herunterladen müssen, damit Sie einige Folieneffekte verwenden können. Selbst die einzelnen Dateien sind jedoch ziemlich sperrig.

Wenn Sie nach einigen einfachen Effekten suchen, würde ich MOO.FX wirklich empfehlen. Es ist nur 3K an Größe und bietet Ihnen einige Umschaltungen und Verblasseneffekte, die häufig alles in einer einfachen AJAX -Anwendung benötigen. Es ist auch ein großartiger Ausgangspunkt, wenn Sie Ihre eigenen Effekte schreiben möchten. Schauen Sie sich den Code an, um ein großartiges Beispiel für die Programmierung mithilfe von Prototypen zu sehen. Valerio konzentriert sich offensichtlich sehr darauf, seine Skriptdateigrößen niedrig zu halten, sodass er sogar eine Lite -Version von Prototypen (gehackt auf etwa 10 km) und eine magere Version von ajax.request hat, die ich häufig verwende als die vollständige Prototyp -Bibliothek. Es ist definitiv einen Blick wert.

Verhalten

Verhalten ist eine großartige Ergänzung zu Ihrem DOM -Skript -Toolkit, mit dem Sie CSS -Selektoren verwenden können, um Ihren Dokumenten Verhaltensweisen hinzuzufügen. Hier ist ein Beispiel dessen, was Sie tun können:

 <br>
// reference to the element with the ID 'nav' <br>
$("nav") <br>
// an array of element references <br>
$("img1", "img2", "img3")

Lesen Sie mehr darüber auf der Verhaltensseite. Es ist nun möglich, eine ähnliche Art von Dingen mit der zuvor diskutierten brandneuen $$ -Funktion zu erreichen, sodass dies schließlich redundant wird.

jQuery

jQuery ist eine kompakte kleine Bibliothek, die gut mit dem Prototyp spielt und eine Superhelden -Version der $ -Funktion erstellt, die XPath und CSS 3 -Selektoren aufnehmen kann. Es Paare, die mit einem extrem cleveren Methodenkettungsansatz in der Lage sind, einen sehr prägnanten Code zu erzeugen. Achten Sie auf diesen.

up

Prototype ist ein leistungsstarkes Stück Kit, wenn es darum geht, Ihren Webanwendungen ein gewisses Dom -Skript -Gewürz hinzuzufügen. Leider sind seine Fähigkeiten und Werkzeuge viel schneller gewachsen als die Dokumentation! Wir haben es geschafft, in diesem Artikel jede Ecke des Prototyps abzudecken, aber nicht jede Methode. Ich hoffe jedoch, dass Sie jetzt wissen, wohin Sie die zusätzlichen Informationen erhalten, die Sie benötigen.

Wenn Sie mehr wissen möchten, versuchen Sie es mit dem Prototypedoc.com von Ronnie Roller, einer Ressource, die mit der wachsenden Anzahl von Prototypendokumentationen Schritt hält. Viel Spaß!

häufig gestellte Fragen (FAQs) zu schmerzlosen JavaScript -Prototypen

Was ist der schmerzlose JavaScript -Prototyp? Es ist eine Blaupause, aus der andere Objekte erstellt werden können. Diese Funktion ist besonders nützlich, wenn Sie mehrere Objekte mit denselben Eigenschaften und Methoden erstellen möchten. Es fördert die Wiederverwendbarkeit und Effizienz der Code. Dies bedeutet, dass Sie mehrere Objekte aus demselben Prototyp erstellen können, jeweils ihre eigenen einzigartigen Eigenschaften und Methoden. Dies unterscheidet sich von anderen JavaScript -Merkmalen, die nur die Erstellung einzelner Objekte ermöglichen. Hier ist ein einfaches Beispiel:

Funktion Car (make, modell, Jahr) {

this.make = make;

this.model = model; Und "Mycar" ist ein neues Objekt, das aus dem "Car" -Prototyp erstellt wurde. Dies geschieht mit der Eigenschaft "Prototyp". Hier ist ein Beispiel:

car.prototype.color = 'schwarz';

Kann ich einem schmerzlosen JavaScript -Prototyp Methoden hinzufügen? Dies geschieht auf die gleiche Weise wie das Hinzufügen von Eigenschaften unter Verwendung der Eigenschaft "Prototyp". Hier ist ein Beispiel:

car.prototype.start = function () {
console.log ('Car gestartet'); Der JavaScript -Prototyp sind Code -Wiederverwendbarkeit und Effizienz. Durch das Erstellen eines Prototyps können Sie mehrere Objekte mit denselben Eigenschaften und Methoden erstellen, ohne diese Eigenschaften und Methoden für jedes Objekt neu zu definieren. Dies kann viel Zeit sparen und Ihren Code effizienter machen. Sobald Sie jedoch verstanden haben, wie es funktioniert, kann es ein sehr leistungsstarkes Werkzeug sein. Tatsächlich wird es häufig in Verbindung mit anderen Merkmalen verwendet, um komplexere und leistungsfähigere Anwendungen zu erstellen. Es ist jedoch immer eine gute Idee, die spezifische Browser -Unterstützung für jede JavaScript -Funktion zu überprüfen, die Sie verwenden. Einige gute Orte sind das Mozilla Developer Network (MDN) und verschiedene JavaScript -Tutorials und -kurse, die auf Websites wie Codecademy und Udemy verfügbar sind.

Das obige ist der detaillierte Inhalt vonSchmerzloser JavaScript mit Prototypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!