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!