Heim >Web-Frontend >js-Tutorial >Besser durch Lesezeichen leben
Kernpunkte
Lesezeichen Applet ist eine einfache Möglichkeit, Ihrem Webbrowser Funktionen hinzuzufügen, und kann eine nützliche Ergänzung zum Workflow von Webentwicklern sein. In diesem Artikel werde ich auf einige nützliche Lesezeichen -Applets hinweisen, Tipps zum Erstellen eigener Lesezeichen -Applets geben und einige fortgeschrittene Techniken demonstrieren, um diese leistungsstarken Tools optimal zu nutzen. Lesezeichen -Applets sind kurze JavaScript -Code -Snippets, die in Browser -Lesezeichen eingebettet sind. Wenn ein Lesezeichen ausgewählt wird, wird JavaScript -Code ausgeführt. Magischerweise findet diese Ausführung im Kontext der aktuellen Seite statt. Das Lesezeichen -Applet kann auf das vollständige Dokumentobjektmodell der Seite zugreifen und diese ändern und die darin enthaltenen Informationen verwenden, um ein neues Fenster zu starten oder den Browser auf eine andere Website umzuleiten. Wenn Sie noch nie versucht haben, das Lesezeichen -Applet zu verwenden, wird empfohlen, es zu versuchen, bevor Sie den Rest dieses Artikels lesen. Sowohl www.bookmarklets.com als auch www.favelets.com bieten eine große Sammlung von Lesezeichen -Applets, und Jesse Ruderman verfügt über eine Sammlung von Lesezeichen -Applets unter www.squarefree.com/bookmarklets. Jesses Webentwicklungs-Lesezeichen-Applet sollte insbesondere ein Muss für den Browser eines Webentwicklers sein. Lesezeichen -Applets eignen sich für alle modernen Browser, die JavaScript unterstützen, aber einige Browser sind freundlicher als andere. Der Internet Explorer 6 für Windows verfügt über ein nerviges Lesezeichen-Größenlimit von 508-Charakter, das den Umfang der Lesezeichen-Applets, die diesem Browser zur Verfügung stehen, stark einschränkt, obwohl die Technologie, die ich später behandeln werde, ein teilweise Mittel bietet. Um das optimale Lesezeichen-Applet optimal zu nutzen, empfehle ich Ihnen, einen Mozilla-basierten Browser wie das exzellente Firefox zu verwenden, das auch viele nützliche Tools enthält, um die Entwicklung des Lesezeichen-Applets zu unterstützen. Eines der Charms der Lesezeichen-Appletentwicklung ist jedoch, dass das Cross-Browser-Problem, das häufig schwerwiegende JavaScript-Entwicklung plagt, vermieden werden kann: Es gibt kein Problem, wenn es darum geht, Lesezeichen-Applets für einen bestimmten Browser (insbesondere von Lesezeichen-Applets von Einzelpersonen) zu entwickeln, sodass Entwickler tatsächlich alles tun können, was der Browser ihnen erlaubt.
Common Lesezeichen Applet -Varianten
Wenn Sie eine der oben genannten Websites durchsucht haben, sollten Sie eine Vorstellung von der großen Auswahl an Funktionen haben, die Lesezeichen -Applets bieten können. Die einfachste und häufigste Art des Lesezeichen -Applets ist das einfache Navigations -Lesezeichen -Applet, das die URL der aktuellen Seite übernimmt und auf eine andere Website weitergibt. Ein klassisches Beispiel ist das Verifizierungs -Lesezeichen -Applet, das Benutzer auf der aktuellen Seite in den Online -HTML- oder CSS -Verifizierungsdienst umleitet. Diese Lesezeichen -Applets sind sehr einfach zu erstellen, können jedoch an einige sehr nützliche Verwendungen angepasst werden. Ich erstelle wirklich gerne das Buchmark-Applet für Websites für Websites, die von einem webbasierten Content-Management-System betrieben werden. Viele solcher Systeme bitten IDs in URLs der öffentlichen Site -Seiten ein, die direkt den IDs entsprechen, die in den im Site -Management -System verwendeten Form -URLs verwendet werden, um den Inhalt dieser Seite zu bearbeiten. Die Bearbeitung dieser Seite Lesezeichen Applet extrahiert die URL der aktuellen Seite und verwendet sie sofort zur Umleitung von Benutzern zur Bearbeitungsschnittstelle der Seite. Stellen Sie sich zum Beispiel eine Site mit der folgenden URL vor:
<code>http://www.site.com/articles/123</code>
Die Site verfügt außerdem über eine kennwortgeschützte Verwaltungsschnittstelle, die die Schnittstelle "Seite bearbeiten" unter der folgenden Adresse bietet:
<code>http://www.site.com/admin/edit-article?id=123</code>
Das Lesezeichen -Applet der oben genannten Website "Diese Seite bearbeiten" kann so implementiert werden:
javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()
Dieses Konzept kann erheblich erweitert werden, wenn Sie über das Content -Management -System, das Sie auf Ihrer Website verwenden, eine gewisse Kontrolle haben. In einer Site, auf der die interne ID eines Artikels nicht in einer URL nicht ausgesetzt ist, können Sie die ID im HTML -Meta -Tag stattdessen an die ID angeben, die dann der Bearbeitung dieser Seite mit einem Lesezeichen -Applet über die DOM zur Verfügung gestellt werden kann. Viele Lesezeichen -Applets ändern die aktuelle Seite in irgendeiner Weise. Zu den häufigen Beispielen gehören Lesezeichen -Applets zum "Eliminieren" von nervigen Inhalten wie unerwünschten Flash -Animationen und sogar Bilder, die sich auf häufig verwendete Größen für Banneranzeigen ändern. Diese können interessant sein, sind jedoch normalerweise durch die Notwendigkeit begrenzt, jedes Mal, wenn die Seite geladen wird, manuell zu aktivieren. Was nützlicher ist, ist ein Lesezeichen-Applet, mit dem Webentwickler die Seitenstruktur analysieren und sogar die Seitenstruktur ("Echtzeit") analysieren. Meine Lieblings -Applets dieses Typs sind Jesse Rudermans "Test Style", "Edit Style" und "Ancestor" aus seiner Webentwicklungskollektion. Letzteres zeigt die HTML -Elementhierarchie, die zum Seitenabschnitt unter dem Maus -Cursor führt, was nützlich ist, um herauszufinden, wie CSS auf die Seite angewendet werden. Die ersten beiden ermöglichen es den CSS der aktuellen Seite, "Echtzeit" zu modifizieren, wodurch ein sofortiges Feedback zu potenziellen Designänderungen bereitgestellt wird. Mein Mozilla Image-Drag-Lesezeichen-Applet macht jedes Nicht-Rückgang-Bild auf der Seite "Dragable", was auch hilfreich ist, wenn sie die Optimierung des Seitendesigns in Betracht ziehen. Ein nützlicher, aber oft übersehener JavaScript -Trick ist, dass die gesamte HTML -Seite in ein Lesezeichen -Applet eingebettet werden kann. Versuchen Sie, das Folgende direkt in die URL -Leiste des Browsers einzugeben:
javascript:'<h1>This is HTML</h1>'
Der Browser sollte die in der Zeichenfolge gerendertes HTML anzeigen. Dies geschieht, weil die Zeichenfolge als Ausdruck bewertet wird und das Ergebnis dann im aktuellen Browserfenster angezeigt wird. Der gleiche Trick kann sogar verwendet werden, um Ihren Browser in einen übermäßig angegebenen Taschenrechner zu verwandeln:
<code>http://www.site.com/articles/123</code>
Manchmal kann es nützlich sein, Lesezeichen -Applets zu schreiben, die ganze Seiten auf diese Weise einbetten, insbesondere wenn sie eine komplexere Benutzeroberfläche als die Felder für einfache Bestätigung () und prompt () benötigen.
Hilfstexteingabe
Ich verbringe viel Zeit online damit, auf das Feld Textbereich zu starren. Die drei Blogs, die ich aktualisiert habe, werden über TextArea gepflegt, ebenso wie die Websites, an denen ich bei der Arbeit und in verschiedenen Online -Foren, an denen ich teilnehme,. Textbereich ist überall. Sie sind auch weit entfernt von der besten Art, Text zu verarbeiten, insbesondere im Vergleich zur dedizierten Texteditor -Software. Lesezeichen -Applets können die Handhabung von Textenspannen erheblich weniger schmerzhaft machen und nützliche zusätzliche Funktionen bieten. Mein bevorzugtes Beispiel für das von Texaaaa erweiterte Lesezeichen-Applet ist ein weiteres von Jesse Ruderman: Blogidat XML-Vorteilen-ein Mozilla/Firefox-Lesezeichen-Applet, das überprüft, ob der Text in jedem Textbereich auf der Seite gut strukturiert ist und die Hintergrundfarbe des Textbereichs entsprechend ändert. Dies ist nützlich, um einfache Fehler in XHTML zu erfassen, bevor sie auf der Website veröffentlicht werden. Jesse verfügt außerdem über eine Reihe von HTML -Verifizierungs -Lesezeichen -Applets, mit denen der WDG -Validator die Syntax von HTML -Fragmenten in TextArea überprüft. Ein weiteres Tool, das ich oft benutze, ist meine Erweiterung HTML Shorthand Lesezeichen Applet. Es wendet eine Reihe einfacher Transformationen in Text in TextArea an:
Beispiel:
<code>http://www.site.com/admin/edit-article?id=123</code>
wird:
javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()
Die kürzere Version ist für den IE geeignet. Diese Veröffentlichung opfert die Titelunterstützung für die 508-Zeichen-Grenze: Erweiterte HTML-Kurzschrift dh. Erweiterte HTML -Abkürzung:
javascript:'<h1>This is HTML</h1>'
erweiterte HTML -Abkürzung dh:
javascript:1 + 4;
unpanded Quellcode (bevor der Speicherplatz entfernt wird) sieht so aus:
<code>= Header Paragraph * list 1 * list 2</code>
Lesezeichen Applet Creation Tool
Sie können Lesezeichen -Applets mit nur einem Texteditor erstellen. Oder, wenn Sie sehr zuversichtlich sind, können Sie diese direkt in das neue Lesezeichenfeld in Ihrem Browser eingeben. Für Inhalte, die komplexer sind als ein einfaches Navigations -Lesezeichen -Applet, ist es jedoch sinnvoll, dedizierte Tools zu verwenden. Wenn Sie Firefox verwenden, können Sie bereits auf nützliche Lesezeichen -Applet -Erstellungshelfer zugreifen. Die JavaScript -Konsole von Firefox ist ein wertvolles Debugging -Tool. Die Firefox -Applets von Jesse Ruderman und Mozilla bieten eine interaktive JavaScript -Eingabeaufforderung, die dem aktuellen Seitenkontext angeschlossen ist. Obwohl Lesezeichen -Applets keine Zeilenpausen enthalten, muss der Quellcode für mehr als einige Aussagen eingerichtet werden. Mein Newline -Lesezeichen (unten) entfernen (unten) ist ein Tool zum Entfernen von Registerkarten, Newlines und mehreren Leerzeichen aus JavaScript -Codeblöcken. In vielen Fällen ist dies genau alles, was Sie tun müssen, um ein Lesezeichen -Applet aus einem einfachen Codeblock zu erstellen, obwohl Sie sich daran erinnern müssen, jede Zeile mit einem Semikolon vor dem Umwandeln zu beenden. Das Lesezeichen -Applet ist auch ein Beispiel für HTML -Seiten, die in das Lesezeichen -Applet eingebettet sind. Zeilenumbrüche entfernen:
<code>http://www.site.com/articles/123</code>
Variable Umfangskonflikte vermeiden
Ein potenzielles Problem, das von Lesezeichen -Applets eingeführt wird, ist der Namespace -Konflikt: Was passiert, wenn Ihr Lesezeichen -Applet die Variablen verwendet oder neu definiert, die andere Skripte auf der Seite bereits verwenden? Eine Technik, um dieses Problem zu vermeiden, besteht darin, zufällige Variablennamen zu verwenden, die wahrscheinlich nicht verwendet wurden. Dadurch wird der Lesezeichen -Applet -Code schwieriger zu lesen und erhöht die unnötige Länge des Lesezeichen -Applets. Eine bessere Lösung besteht darin, anonyme Funktionen mit einem eigenen variablen Bereich als Lesezeichen -Applet zu erstellen. So funktioniert es:
<code>http://www.site.com/admin/edit-article?id=123</code>
Die Funktion () {} Teil hier ist eine anonyme Funktion - eine Funktion, deren Name nicht deklariert wird. Indem die Funktion in Klammern eingeschlossen und () am Ende eingeschlossen wird, wird die Funktion sofort nach der Erstellung ausgeführt, dh in dem Moment, in dem das Lesezeichen -Applet aktiviert wird. Solange Variablen innerhalb des Körpers der anonymen Funktion mit dem Schlüsselwort "var" deklariert werden, sind sie auf den Umfang der Funktion beschränkt und stören Variablen nicht im Rest des Dokuments mit demselben Namen. Dank der Funktion von JavaScript können Sie sogar andere Funktionen in anonymen Funktionen deklarieren, ohne sie dem globalen Umfang des Dokuments hinzuzufügen.
Längere Skripte
anhängenIch habe bereits erwähnt, dass es eine Möglichkeit gibt, die Länge von Internet Explorer für die Lesezeichenlänge zu umgehen. Dieser Ansatz ermöglicht auch das Schreiben von Lesezeichen -Applets in standardmäßigen eingerksamen JavaScript, ohne das gesamte Skript in einer einzigen Zeile aufbewahren zu müssen, wodurch es zu einer nützlichen Technik für komplexere Lesezeichen -Applets wird, die von einem Browser implementiert werden. Der Trick besteht darin, die tatsächliche Lesezeichen -Applet -Implementierung als externe .js -Datei auf einem Webserver zu hosten. Das Lesezeichen -Applet muss dann nur den "Stub" -Code enthalten, mit dem der Rest der Skripte geladen werden kann. Dies kann leicht mit einer 508 -Charakter -Grenze erreicht werden. Das Folgende ist der Mini -Programmcode, der die Stub -Lesezeichen lädt, und die Lesbarkeit für die Lesbarkeit:
<code>http://www.site.com/articles/123</code>
Nach dem Entfernen des Raums erreicht der obige Code (ohne die externe Skript -URL) 193 Zeichen. Dieser Code hat einen Nachteil: Er funktioniert nicht mit der Macintosh -Version IE5. Wenn der IE5 -Support von Macintosh Version für Ihr Lesezeichen -Applet wichtig ist, verfügt Liorean auch über eine erweiterte Version des Laststubs, der die Browser -Erkennung verwendet, um diesen Browser gleichzeitig zu erfüllen.
Weitere Lesen
Der beste Weg, um über Lesezeichen -Applets zu wissen, besteht darin, Lesezeichen -Applets anzuzeigen, die von anderen geschrieben wurden:
Ich hoffe, dieses schnelle Browsing des Lesezeichen -Applets wird Sie dazu inspirieren, ein eigenes Lesezeichen -Applet zu erstellen.
FAQs über Lesezeichen -Applets
Lesezeichen Applet ist ein kleiner JavaScript -Code -Snippet, der in einer URL in einem Webbrowser -Lesezeichen gespeichert ist. Wenn Sie auf ein Lesezeichen klicken, wird der JavaScript -Code auf der aktuellen Seite ausgeführt, anstatt die neue Seite zu Laden. Auf diese Weise können Sie Ihre Website neue Funktionen hinzufügen, sich wiederholende Aufgaben automatisieren und sogar Spiele spielen, ohne Software oder Erweiterungen zu installieren.
Erstellen eines Lesezeichen -Applets ist so einfach wie das Erstellen eines Lesezeichens. Anstatt eine URL einzugeben, geben Sie ein Stück JavaScript -Code ein. Dieser Code wird ausgeführt, wenn Sie auf ein Lesezeichen klicken. Sie können Ihren eigenen Code schreiben oder online vorgefertigte Lesezeichen-Applets finden.
Lesezeichen -Applets sind normalerweise sicher und zuverlässig, da sie in Ihrem Browser ausgeführt werden und nicht auf das Dateisystem Ihres Computers zugreifen können. Wie bei jedem Code können sie jedoch böswillig verwendet werden. Verwenden Sie unbedingt nur Lesezeichen Applets aus vertrauenswürdigen Quellen und verstehen Sie die Funktionalität des Codes, bevor Sie ihn verwenden.
Theoretisch kann das Lesezeichen -Applet auf jeder Website verwendet werden. Einige Websites haben jedoch möglicherweise Sicherheitsmaßnahmen implementiert, um zu verhindern, dass Lesezeichen -Applets funktionieren. Darüber hinaus kann die Funktionalität des Lesezeichen -Applets von der Struktur der von ihr verwendeten Website abhängen.
Es kann mehrere Gründe geben, warum Ihr Lesezeichen -Applet nicht funktioniert. Auf den Websites, auf denen Sie sie verwenden möchten, haben möglicherweise Sicherheitsmaßnahmen implementiert, um zu verhindern, dass Lesezeichen -Applets funktionieren. Der Code im Lesezeichen -Applet kann mit der Website abgelaufen oder nicht kompatibel sein. Oder es kann Fehler im Code selbst geben.
Debugging -Lesezeichen -Applets können etwas schwierig sein, da sie keine traditionelle Debugging -Umgebung haben. Sie können jedoch die Entwickler -Tools des Browsers verwenden, um den Code zu überprüfen und alle Fehlermeldungen anzuzeigen. Sie können auch versuchen, den Code in der Konsole des Browsers auszuführen, um festzustellen, ob er dort funktioniert.
Ja, Sie können das Lesezeichen -Applet auf Ihrem mobilen Gerät verwenden. Der Hinzufügen und Gebrauch kann jedoch komplizierter sein als in einem Desktop -Browser. Möglicherweise müssen Sie den JavaScript -Code mit einem Lesezeichen manuell ein Lesezeichen versehen, da mobile Browser im Allgemeinen die auf Desktop -Browsers verwendete Drag & Drop -Methode nicht unterstützen.
Ja, Sie können Lesezeichen -Applets mit anderen teilen. Senden Sie ihnen einfach den JavaScript -Code und die Anweisungen, wie Sie ihn zu ihren Lesezeichen hinzufügen können. Denken Sie jedoch daran, nur Lesezeichen Applets aus vertrauenswürdigen Quellen zu teilen, und Sie verstehen die Funktionalität des Codes.
Ja, Sie können das Lesezeichen -Applet verwenden, um das Erscheinungsbild der Website zu ändern. Dies geschieht durch Betrieb des CSS der Website. Diese Änderungen sind jedoch nur vorübergehend und gehen nach dem Auffrischen der Seite verloren.
Ja, Sie können das Lesezeichen -Applet verwenden, um auf der Website automatisch Aufgaben auszuführen. Dies kann von der Ausfüllung des Formulars bis zum Klicken auf eine Schaltfläche sein. Die Funktionalität des Lesezeichen -Applets hängt jedoch von der Struktur der Website und den Aufgaben ab, die Sie automatisch ausführen möchten.
Das obige ist der detaillierte Inhalt vonBesser durch Lesezeichen leben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!