Wie versprochen, hier sind einige konkretes Beispiel für unaufdringliche Javascript, vielseitiges und leistungsstarkes Werkzeug, wenn sie ordnungsgemäß verwendet. On Site / Blog Ryan Johnson können Sie zwei sehr gutes Beispiel dafür, unaufdringliche Javascript:
Ryan Johnson, in seinem Skript verwendet die Bibliothek Prototype , wie viele von den übrigen. Er hat auch einige Erweiterungen des relativ geschrieben Prototype , dann eingeführt - in einer anderen Form - in der neuesten Version der Bibliothek.
Verwenden Prototype zu veranschaulichen, der Betrieb von dezent JavaScript-Code ist in der Regel bequemer - wie wir später sehen werden, aber hier ist ein erstes Beispiel Rohöl, die keine externen Bibliotheken benötigt. Wir beginnen mit dem Hinweis, dass das Konzept hinter dem unaufdringlichen JavaScript, um von einem beliebigen HTML-Seite (Standard und nicht notwendigerweise von uns geschrieben - noch wichtiger Pluspunkt) beginnen soll, und verwenden JavaScript, um einige Änderungen vornehmen.
Schematimamente das Konzept ist es, eine Funktion, die die HTML-, durchquert dann analysiert der DOM und insbesondere die Punkte hinzufügen oder ändern Funktionalität durchzuführen. Normalerweise verwenden zwei Methoden, um Javascript-Code ausführen, um eine Seite zu laden: der erste ist, was du nicht umschließen Sie den Code in irgendeiner Funktion, und dann lassen Sie das Ausführen von Code-Browser sofort zu dem Punkt, wo der Anruf erscheint hochgeladen:
Das gleiche Ergebnis wird durch die Einbeziehung der Code erhalten:
1
| "http://miosito.com/miocodice.js" >< / script > < script src = "http://miosito.com/miocodice.js"> </ script > |
Allerdings, wenn es muss auf dem DOM einer Seite zu betreiben, dass sie eine voll beladen, dass alle Tag der Seite vorhanden und verfügbar zu verfolgen ist, übernimmt. So ist die beste Lösung wird derjenige sicher sein, dass die Seite vollständig ist. Dies ist durch die Gewinnung der onload-Ereignis des body-Tag, zum Beispiel, die freigegeben, wenn der Ladevorgang vollständig abgeschlossen ist wird möglich.
1
2
3
| miafunzione ; Fenster onload = myfunction.;
/ / Oder, was dasselbe
function ( ) { alert ( "Hello" ) ; } . Fenster onload = function () {alert ("Hallo");} |
Vermieden, natürlich, die kanonische Lösung, die eine Untertreibung zu nennen es aufdringlich wäre:
1
| "miafunzione()" > < Körper onload = "myfunction ()"> |
Eine andere Technik, gröber und ebenso aufdringlich (wie es erzwingen, dass der Endanwender, um den Code an einer bestimmten Stelle zu platzieren), ist es, unser Skript am Ende des Dokuments einzufügen vor dem schließenden Body-Tag, mittlerweile veraltet Technik und verwendet in seltenen Fällen (siehe Google Analytics!).
Noch besser ist es, die Methode zu verwenden:
1
2
3
4
5
6
7
| window. addEventListener ) { if (window. addEventListener) {
"load" , miafunzione , false ) ; Fenster. addEventListener ("Last", myfunction, false) ¾ i
( window. attachEvent ) { } Else if (window. attachEvent) {
"onload" , miafunzione ) ; Fenster. attachEvent ("onload", myfunction) ¾ i
{ Else {}
createSubMenus; Fenster. onload = createSubMenusÍ ¾
} |
Auch dieses Stück Code wird in einer Funktion eingeschlossen. Es wird ein Ereignis-Listener für das Load-Ereignis des Fensters hinzuzufügen, ruft unsere Funktion miafunzione() . . Moderne Browser wie Firefox zum Beispiel, wird die Funktion addEventListener() in DOM Level 2 definiert, während Internet Explorer seine proprietäre Funktion nutzen wird attachEvent() . Allerdings sind wir nicht auf Perfektion in dieser Weise in der Tat, so ersetzt sie alle - wenn überhaupt - onload Ereignisse durch andere Skripte, die nicht wirklich geschaffen "non-intrusive".
Um dieses Problem schnell zu lösen, dass wegen der unterschiedlichen Verhalten der Browser würde zumindest kompliziert sein, hier zu erklären, sollten Sie als libreirie verwenden Prototype bietet un'elengantissimo Methode, um das Problem zu überwinden:
1
| window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; . Ereignis beobachten (Fenster, 'load', function () {alert ("Hallo");}); |
Die Syntax ist sehr auffällig und spektakulär! Der Vorteil für diejenigen, die nicht verstanden hatte, ist, dass Sie schreiben:
1
2
| window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; . Ereignis beobachten (Fenster, 'load', function () {alert ("Hallo 1");});
window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; . Ereignis beobachten (Fenster, 'load', function () {alert ("Hallo 2");}); |
Beim Laden der Seite wird vor dem Alarm "Hallo 2" und dann die Warnung "Hallo 1" gezeigt werden. Grundsätzlich können in einem FILO (Vorname Nachname Input Output) einem Stapel laden, während gleichzeitig die Ausführung aller Ereignisse angespannt, um das Dokument genau das, was gewünscht wurde zu laden. Auf diese Weise kann eine Seite zu laden - praktisch - endlos unaufdringliche Javascript, um das Dokument, dass Lasthaken.
Aber was kann man mit dieser Technik zu tun? Viele interessante Sachen. Ein Beispiel, dass wir kommentieren (siehe auch Vorbild: die Verwendung der doppelten Dollarzeichen ($ $) ) kommt von Tobie Langel . Mit wenigen Zeilen Code und Download-Bibliotheken Prototype und Scriptaculous kann man einen schönen Effekt auf die klassische Anker unserer Seiten geben. Erstellen Sie zunächst eine HTML-Seite mit dem folgenden Code:
1
2
3
4
5
6
7
8
| = "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < ein href = "# Kapitel 1"> Vai in Kapitel 1 </ ein > </ p > < / p > < p > </ p > < / p > < p > </ p > .... < / p > .... eine Menge 'von < p > </ p > .... Nur als Beispiel "capitolo1" > Capitolo 1 < / h1 > < h1 id = "Kapitel 1"> Kapitel 1 </ h1 > |
Fügen Sie die Seite:
1
2
3
4
5
6
7
8
9
10
11
12
| "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "prototype.js" type = "text / javascript" charset = "UTF-8"> </ script > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "UTF-8"> </ script > "text/javascript" language = "javascript1.2" > < script type = "text / javascript" language = "JavaScript1.2"> Event.observe (Fenster, 'load', function () { $ $ ('A [href ^ = #]: nicht ([href = #])') each (function (element) {. element.observe ('click', function (event) {neue Effect.ScrollTo (this.hash.substr (1)); Event.stop (event); bindAsEventListener (Element)) }) }) </ script > |
Dank "verwenden Event.observe() -Funktion und Zwei-Dollar ($ $) Sie leicht ändern, können das Verhalten des klassischen Anker. In diesem Fall ist eine neue Funktion wird auf die HTML-Seite geladen wird süchtig. Bei der Aufnahme das load-Ereignis wird alle Links im DOM (Tag <A>) mit href, die mit einer Raute (#, mit Ausnahme der einen Hash nur mit!) Beginnt zurückzuführen. Um dieser Elemente ist eine Funktion, die an das Click-Ereignis, ähnlich dem, was war mit der Last des Dokuments getan. An diesem Punkt ins Spiel kommt Scriptaculous , die einen Einfluss der Spirale in Richtung des Elements punatato aus unserer Verbindung produziert - modifiziert!
Mehr ...
JavaScript-Code kann in Echtzeit reagieren und zu manipulieren eine Vielzahl von Informationen: Zulassen, dass Benutzer mit einem Web-Seite in den letzten Jahren zu interagieren hat einen signifikanten Anstieg in der Verwendung von Client-seitiges Scripting produziert. Das Web2.0 ist der ultimative Ausdruck dieser Fähigkeit zur Interaktion, in dem der Endbenutzer - die benutzerfreundliche, sich aktiv an den Bau und die "Evolution der Website, mit dieser zu interagieren und sich selbst helfen. , Die der "Navigator" wird definitiv nicht passiv sieht - ist als User-Generated Content (User Generated Content oder UGC) bezeichnet!
Um diese Interaktion zu erreichen, so dass der Endverbraucher seinen Beitrag hinzuzufügen, entwickelten wir eine Reihe von Techniken, die das Aussehen und das Verhalten von Webseiten (statisch, bis jetzt, aber jetzt ähnlich wie bei den traditionellen Anwendungen verändert haben Desktop) in den letzten Jahren. Ändern Sie den Inhalt einer Seite, Dateien versenden, geben ihre Stimme zu einem Video oder einem Dokument, registrieren oder ihre persönlichen Daten ändern, sind nur einige der Anpassungen Operationen in vielen Dienstleistungen (2.0 beta) im Web
Mehr ...
Neueste Kommentare
kOoLiNuS : @ Giovambattista Fazioli: danke! mehr als bereit!
Giovambattista Fazioli : @ kOoLiNuS: Ruhig, können Sie wahrscheinlich davon aus, dass WPX Cleanfix wird frei sein, und ...
kOoLiNuS : @ kOoLiNuS: eine fehlende
und 
kOoLiNuS : @ Giovambattista Fazioli: ich abonniert, aber wenn ich mein Hobby war die Nutzung der Plattform ...
Giovambattista Fazioli : @ kOoLiNuS: Ja, das ist ein bekanntes Problem. Tritt auf, wenn die Tabellen in Frage stehen ...