js 创建书签小工具之理论_javascript技巧
我们一直在寻找增加浏览体验的方法,有的方法众所周知,有的则鲜为人知。我原本认为书签小工具属于后者,非常令人讨厌的东西。令我非常懊恼的是我发现在这个问题上我完全是错误的。它并不是令人厌烦的,而是以用户为中心的,能实现很多出色的功能,而且就像人们所预期的一样,它成为了我与浏览者以及网络交互的核心部分。
这里我想向你介绍开发书签小工具以实现一些精妙的书签的全过程。是的,书签,我们将创建不只一个书签,即使是非常小的书签。很好奇吗?我们开始吧!
究竟什么是书签小工具呢?
引用前文的话:
书签小工具是一个非常棒的javascript代码小片断伪装成的小应用,它驻留在你的浏览器里并为网页提供额外的功能,仅仅只需要点击一下。
这个词是bookmark和applet的合成词,也叫做收藏小工具(favelets),这个小的javascript片断让你可以在浏览任何页面时召唤出额外的功能。因为它们只有javascript构成,所以它们是可移动的,可以支持所有的浏览器,甚至是移动设备和平板设备的。安装它们也相当简单,只需要将它们拖到收藏夹就行了!
那么,什么是关键呢?
关键之处在于书签小工具认你可以做很多原本要以开发人员为中心才能做的事情。任何通过书签小工具能获得的功能你都可以使用浏览器的控制台花费很少的时间而获得。书签小工具简化了这个过程,将实现一些功能的代码打包在一个小小的按钮里。书签小工具大体上来说可以分为以下几类:
用于传输数据。它用于将页面提交到特定的服务。处理社交媒体,查字典,搜索都属于这一类。我们将创建一个提交信息到Reddit(一个新闻网站)的书签小工具。
用于获取信息或修改当前页面的。我们将创建一个设置网页背景色的小工具。
用于后台运作。清除当前网站cookie的书签小工具是一个主要的例子,我们将下面创建一个。
1、开始
你需要记住的第一点就是在所有javascript代码前缀上“javascript”URI。浏览器实现了特定的前缀因此前缀后面的内容可以被当作javascript代码正确的处理,解析。
例如,点击“这个链接”(代码如下)将会强出一个对话框。
2、包装成匿名函数
记住你的代码将运行于当前加载的页面,它可能会拥有自己的javascript代码,这意味着可能和书签小工具的代码存在冲突。最后你需要做的是让你的小工具中止当前页面。
将你的代码包装在一个匿名函数里可以保证没有名称冲突。此外,javascript新手将会被搞混并认为你是上帝,如果你这样做的话。
javascript:(function(){// your code here })();
当你在其它地方使用javascript代码时这也是适当,时刻注意保持自己的代码隔离。
3、按需外部化
书签小工具不一定要很小,你可以需要多大就写多大。在这种些情况下,为了发布方便并在不让用户手动干预的情况下保持代码为最新,最好是创建一个获取需要的代码的封装。
javascript: (function () {
var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://path/to/external/file.js');
document.body.appendChild(jsCode);
}());
上面的代码变得美化了许多,它创建了一个script标签,将src属性设置成其它地方的一个文件,然后最终将它附加到文档中。通过这种方法,无论你哪上部分代码发生变化,你可以部署你修改后的文件并立刻传播到每一个用户。
注意:这不仅限于javascript。如果你的书签小工具使用前端,你也可以自由地引入外部HTML和CSS,使得你的小工具真正的自动更新。
4、谨慎地添加类库
如果你要创建一个大型的书签工具,你可能需要一个javascript类库。但是在你的页面里使用它们不仅仅只是将它们包含进来那么简单,你需要保证这个库不是已经存在了的。像jQuery和MooTools这样占有很大市场的类库你得仔细的处理来确保它预先没有被载入。
另一方面网页可能已经载入了其它类库,可能会导致“$”符号组件冲突。版本冲突在一些情况下也会出现,所以也要注意。
这里是一段我代码中使用的脚本。注意,在你的代码中你需要注意我上面说的几点。
if (!($ = window.jQuery)) { // typeof jQuery=='undefined' works too
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=releasetheKraken;
document.body.appendChild(script);
}
else {
releasetheKraken();
}
function releasetheKraken() {
// The Kraken has been released, master!
// Yes, I'm being childish. Place your code here
}
这段代码的含义应该很明确了,我们简单地过一下。
首先我们通过判断jQuery对象是不是存在于名称空间里来确定jQuery是不是已经被加载了。
如果不存在,我们引入它。我们根据最佳实践能过CDN来载入它。最后我们确保指向包含要执行的代码的程序主函数。
如果已存在,直接运行主函数。
如果你觉得解决这个问题很麻烦,我强烈推荐Ben Alman的“书签小工具生成器”。它用一种很完全的方法解决全称空间和版本冲突。好东西!
5、非不得已不要搞乱母页
这一点太重要了。如果不小心破坏了母页,书签小工具就是毫无用处的。请注意javascript并不是你唯一需要处理的东西。如果你有一个前端,HTML和CSS也会在页面中运行。不要给你的容器和类取非常普通的名字,比如你把它叫做“container”,我会永远讨厌你。一种简单的方法就是给所有名字添加具有工具特色的特别前缀(或者是后缀)字符串。当你写CSS的时候,需要特别特别的特殊。使用样式很不错,但请使用最高的精度。如果有样式泄漏到主页面上是不合规范的,且会引发不信任。
6、测试,测试,再测试
如果你正创建一个较小的书签小工具,它引用了脆弱的第三方的类库,你可能会碰到永远的噩梦——跨浏览器兼容性问题。看起来很明显但是这是很多人很多时候都会忘记的一点。
另一个陷阱是希望能工作在所有网站上的小工具只工作在几个网站上。网页可以有不同的层次,使用不同的方法论。有些网站可能包含了HTML5并且使用了相关的容器而其它的可能安全起见使用了通用的div标签。在收集信息的时候确保考虑了每一种情况。

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

So implementieren Sie die Kartenschwenkfunktion mit JS und Baidu Map. Baidu Map ist eine weit verbreitete Kartendienstplattform, die häufig zur Anzeige geografischer Informationen, Positionierung und anderer Funktionen in der Webentwicklung verwendet wird. In diesem Artikel wird erläutert, wie Sie mit JS und der Baidu Map API die Kartenschwenkfunktion implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Vorbereitung Bevor Sie die Baidu Map API nutzen können, müssen Sie zunächst ein Entwicklerkonto auf der Baidu Map Open Platform (http://lbsyun.baidu.com/) beantragen und eine Anwendung erstellen. Erstellung abgeschlossen

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen Möglichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden häufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

So verwenden Sie PHP und JS zum Erstellen eines Aktienkerzendiagramms. Ein Aktienkerzendiagramm ist eine gängige technische Analysegrafik auf dem Aktienmarkt. Es hilft Anlegern, Aktien intuitiver zu verstehen, indem es Daten wie den Eröffnungskurs, den Schlusskurs, den Höchstkurs usw niedrigster Preis der Aktie. In diesem Artikel erfahren Sie anhand spezifischer Codebeispiele, wie Sie Aktienkerzendiagramme mit PHP und JS erstellen. 1. Vorbereitung Bevor wir beginnen, müssen wir die folgende Umgebung vorbereiten: 1. Ein Server, auf dem PHP 2. Ein Browser, der HTML5 und Canvas 3 unterstützt

Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt

Verwendung von JS und Baidu Maps zur Implementierung der Karten-Heatmap-Funktion Einführung: Mit der rasanten Entwicklung des Internets und mobiler Geräte sind Karten zu einem häufigen Anwendungsszenario geworden. Als visuelle Darstellungsmethode können Heatmaps uns helfen, die Verteilung von Daten intuitiver zu verstehen. In diesem Artikel wird die Verwendung von JS und der Baidu Map API zur Implementierung der Karten-Heatmap-Funktion vorgestellt und spezifische Codebeispiele bereitgestellt. Vorbereitung: Bevor Sie beginnen, müssen Sie Folgendes vorbereiten: ein Baidu-Entwicklerkonto, eine Anwendung erstellen und den entsprechenden AP erhalten

Überblick über die Verwendung von JS und Baidu Maps zum Implementieren von Funktionen zur Verarbeitung von Kartenklickereignissen: In der Webentwicklung ist es häufig erforderlich, Kartenfunktionen zum Anzeigen des geografischen Standorts und geografischer Informationen zu verwenden. Die Verarbeitung von Klickereignissen auf der Karte ist ein häufig verwendeter und wichtiger Teil der Kartenfunktion. In diesem Artikel wird erläutert, wie Sie mithilfe von JS und der Baidu-Karten-API die Klickereignisverarbeitungsfunktion der Karte implementieren, und es werden spezifische Codebeispiele angegeben. Schritte: Importieren Sie die API-Datei von Baidu Map. Importieren Sie zunächst die Datei von Baidu Map API in die HTML-Datei.

Verwendung von JS und Baidu Maps zur Implementierung der Kartenpolygonzeichnungsfunktion In der modernen Webentwicklung sind Kartenanwendungen zu einer der häufigsten Funktionen geworden. Durch das Zeichnen von Polygonen auf der Karte können wir bestimmte Bereiche markieren, damit Benutzer sie anzeigen und analysieren können. In diesem Artikel wird erläutert, wie Sie mithilfe von JS und der Baidu-Karten-API die Funktion zum Zeichnen von Kartenpolygonen implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die Baidu Map API einführen. Mit dem folgenden Code können Sie das JavaScript der Baidu Map API in eine HTML-Datei importieren
