ブックマークガジェット作成のjs理論_javascriptスキル

私たちは、よく知られているものもあれば、あまり知られていないものも含めて、ユーザーのブラウジング エクスペリエンスを向上させる方法を常に探しています。私は当初、ブックマーク ウィジェットは後者であり、煩わしいものだと考えていました。非常に残念なことに、この問題に関して私は完全に間違っていたことが分かりました。退屈ではなく、ユーザー中心であり、多くの優れた機能を備えており、ご想像のとおり、視聴者やウェブとのやり取りの中核を成しています。
ここでは、気の利いたブックマークを実現するためのブックマーク ガジェットの開発プロセス全体を説明したいと思います。はい、ブックマークです。たとえ非常に小さなブックマークであっても、複数のブックマークを作成します。好奇心旺盛？始めましょう!

ブックマーク ガジェットとは正確には何ですか?
前の記事からの引用:
ブックマーク ガジェットは、小さなアプリケーションに見せかけた JavaScript コードの優れたスニペットであり、ワンクリックで Web ページに追加機能を提供します。

この単語はブックマークとアプレットを組み合わせたもので、ファブレットとも呼ばれます。これらの小さな JavaScript スニペットを使用すると、任意のページを閲覧するときに追加の機能を呼び出すことができます。これらは JavaScript のみで作られているため、モバイル対応であり、モバイル デバイスやタブレットを含むすべてのブラウザで動作します。インストールも非常に簡単で、お気に入りにドラッグするだけです。

それで、鍵は何でしょうか?
重要なのは、ブックマークレット ガジェットを使用すると、開発者中心の方法で行う必要がある多くのことを実行できるということです。ブックマークレット ウィジェットでできることはすべて、ブラウザのコンソールを使用して短時間でアクセスできます。ブックマーク ガジェットは、いくつかの機能を実装するコードを小さなボタンにパッケージ化することで、このプロセスを簡素化します。ブックマーク ガジェットは一般に次のカテゴリに分類できます:

はデータの転送に使用されます。これは、ページを特定のサービスに送信するために使用されます。ソーシャルメディアの扱い、辞書の調べ、検索はすべてこのカテゴリに分類されます。ニュース Web サイト Reddit に情報を送信するブックマークレット ウィジェットを作成します。
情報を取得したり、現在のページを変更したりするために使用されます。 Webページの背景色を設定するウィジェットを作成します。
バックグラウンド操作に使用されます。現在の Web サイトの Cookie をクリアするブックマーク ガジェットはその代表的な例であり、以下で作成します。
1. 始めましょう
覚えておく必要がある最初のポイントは、すべての JavaScript コードに「javascript」URI をプレフィックスとして付けることです。ブラウザーは特定のプレフィックスを実装しているため、プレフィックスに続くコンテンツは JavaScript コードとして正しく処理および解析できます。
たとえば、「このリンク」(以下のコード) をクリックすると、ダイアログ ボックスが強制的に表示されます。

コードをコピー コードは次のとおりです:

このリンク

2. それを匿名関数にラップします
コードは現在読み込まれているページには、独自の JavaScript コードが含まれている可能性があります。つまり、ブックマーク ガジェットのコードと競合する可能性があります。最後に行う必要があるのは、ガジェットに現在のページを中止するように指示することです。
コードを匿名関数でラップすると、名前の競合がなくなります。また、JavaScript 初心者はこれをやると混乱して自分が神になったと思うでしょう。

コードをコピー コードは次のとおりです:

javascript:(function(){//コードをここに記述してください })();

これは、JavaScript コードを他の場所で使用する場合にも適しており、独自のコードを常に分離するように注意してください。
3. オンデマンドの外部化
ブックマーク ガジェットは小さい必要はなく、必要なだけ大きく記述できます。このような場合、配布を容易にし、ユーザーによる手動介入を必要とせずにコードを最新の状態に保つには、必要なコードをキャプチャするラッパーを作成するのが最善です。

コードをコピー コードは次のとおりです。

javascript: (function () {
var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://path/to/external/file.js');
document.body.appendChild( jsコード);
}());
The above code is a lot prettier, it creates a script tag, sets the src attribute to a file elsewhere, and finally appends it to the document. This way, no matter where part of your code changes, you can deploy your modified files and have them immediately propagated to every user.

Note: This is not limited to javascript. If your bookmarklet widget uses a front-end, you are also free to include external HTML and CSS to make your widget truly update automatically.

4. Add libraries carefully
If you want to create a large bookmark tool, you may need a javascript class library. But using them in your pages isn't just a matter of including them, you need to make sure the library doesn't already exist. For large-market libraries like jQuery and MooTools you have to be careful to ensure that they are not pre-loaded.
On the other hand, the web page may have loaded other class libraries, which may cause "$" symbol component conflicts. Version conflicts may also occur in some cases, so be aware of that as well.

Here is a script used in my code. Note that in your code you need to pay attention to the points I mentioned above.

Copy code The code is as follows:

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
}

The meaning of this code should be clear, let’s go through it briefly.

First we determine whether jQuery has been loaded by determining whether the jQuery object exists in the namespace.
If it doesn’t exist, we introduce it. We can load it via CDN according to best practices. Finally we make sure to point to the program's main function which contains the code to be executed.
If it already exists, run the main function directly.
If you find it troublesome to solve this problem, I highly recommend Ben Alman’s “Bookmark Widget Generator”. It uses a very complete method to resolve full name space and version conflicts. nice one!

5. Don’t mess with the master page unless you have to.
This is so important. The bookmark gadget is useless if you accidentally destroy the master page. Please note that javascript is not the only thing you need to deal with. If you have a front-end, HTML and CSS will also run in the page. Don't give your containers and classes very common names. For example, if you call it "container", I will hate you forever. A simple method is to add a special prefix (or suffix) string unique to the tool to all names. When you write CSS, it needs to be very, very special. Using styles is fine, but use maximum precision. Leaking styles onto the main page is illegal and can lead to distrust.

6. Test, test, test again
If you are creating a small bookmarklet gadget that references a vulnerable third-party library, you may encounter a permanent nightmare—— Cross-browser compatibility issues. It seems obvious but this is something that many people forget a lot of the time.
Another pitfall is that a widget that expects to work on all sites only works on a few. Web pages can have different levels and use different methodologies. Some sites may include HTML5 and use related containers while others may use generic div tags for safety reasons. Make sure you consider every situation when gathering information.