The theory of creating a bookmarked widget in js

We have been looking for ways to increase the browsing experience. Some methods are well known, while others are little known. I originally thought that the bookmarking tool belongs to the latter, which is very annoying. What makes me very annoyed is that I found that I was totally wrong on this issue. It is not annoying, but user-centered, can achieve many outstanding features, and as expected, it becomes the core part of my interactions with viewers and networks.
Here I want to introduce you to developing a bookmarkdonefile to realize the whole process of some exquisite bookmarks. Yes, bookmarks. We will create more than one bookmarks, even very small ones. Curious? Let's get started!

What is a bookmarks?
Reference the previous article:
Bookmarks are a great small application disguised as a small part of javascript code. They reside in your browser and provide additional functions for the webpage, just click it.

This word is a synthesis of bookmark and applet, also known as favelets. This small javascript snippet allows you to summon additional features when Browsing any page. Because they only consist of javascript, they are mobile and support all browsers, even mobile devices and tablets. Installing them is also quite simple, just drag them to favorites!

So what is the key?
The key lies in the bookmarking tool that you can do a lot of things that were originally intended to be done by developers. You can use the console of your browser to obtain any functions that can be obtained through a bookmarkdonet tool. The bookmarking tool simplifies this process and packs code that implements some functions into a small button. Bookmarks can be divided into the following types:

Used to transmit data. It is used to submit a page to a specific service. Processing social media, searching dictionaries, and searching all belong to this category. We will create a bookmarkdonefile that submits information to Reddit (a news website.
Used to obtain information or modify the current page. We will create a small tool to set the webpage background color.
Used for background operations. The main example is to clear the current website cookie bookmarks. We will create one below.
1. Start
The first thing you need to remember is the "javascript" URI on the prefixes of all javascript code. The browser implements a specific prefix. Therefore, the content after the prefix can be correctly processed and parsed as javascript code.
For example, click "this link" (the Code is as follows) to bring up a dialog box.
Copy codeThe Code is as follows:
<A href = "javascript: alert ('text link ');"> this link </a>

2. package it into an anonymous Function
Remember that your code will run on the currently loaded page. It may have its own javascript code, which means there may be conflicts with the code of the bookmarked tool. Finally, you need to abort the current page for your gadgets.
Wrap your code in an anonymous function to ensure that no name conflict exists. In addition, javascript beginners will be confused and think of you as God, if you do.
Copy codeThe Code is as follows:
Javascript :( function () {// your code here })();

This is also appropriate when you use javascript code elsewhere. always pay attention to keep your code isolated.
3. On-Demand externalization
The bookmarking tool does not have to be small. You can write as much as you need. In this case, to facilitate release and keep the code up-to-date without manual intervention, it is best to create an encapsulation for getting the required code.
Copy codeThe Code is as follows:
Javascript: (function (){
Var jsCode = document. createElement ('script ');
JsCode. setAttribute ('src', 'HTTP: // path/to/external/file. js ');
Document. body. appendChild (jsCode );
}());

The code above has become much more beautifying. It creates a script tag, sets the src attribute to a file elsewhere, and finally attaches it to the document. In this way, no matter which part of your code changes, you can deploy your modified file and immediately spread it to every user.

Note: This is not limited to javascript. If your bookmarks use the front-end tool, you can freely introduce external HTML and CSS so that your tool can be automatically updated.

4. Carefully add a class library
If you want to create a large bookmarks tool, you may need a javascript class library. However, using them on your page is not just as simple as including them, but you need to ensure that this library does not already exist. Class libraries such as jQuery and MooTools, which have a large market, must be carefully processed to ensure that they are not loaded in advance.
On the other hand, the webpage may have loaded other class libraries, which may cause a "$" symbol component conflict. Version conflicts also occur in some cases.

Here is a script used in my code. Note: In your code, pay attention to the points I mentioned above.
Copy codeThe 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 = releasetemediraken;
Document. body. appendChild (script );
}
Else {
Releasetaskraken ();
}

Function releasetaskraken (){
// 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 take a simple look.

First, we determine whether the jQuery object exists in the namespace to determine whether jQuery has been loaded.
If it does not exist, we will introduce it. We can load it through CDN based on best practices. Finally, make sure to point to the main program function that contains the code to be executed.
If it already exists, run the main function directly.
If you think it is troublesome to solve this problem, I strongly recommend Ben Alman's "bookmarkdonator builder ". It uses a very complete method to resolve the conflict between the full-Name Space and version. Good stuff!

5. Do not mess up the parent page
This is too important. If the parent page is accidentally destroyed, the bookmarkdonet tool is useless. Note that javascript is not the only thing you need to handle. If you have a front-end, HTML and CSS will also run on the page. Do not give your containers and classes a very common name. For example, if you call it "container", I will always hate you. A simple method is to add a special prefix (or suffix) string with tool characteristics to all names. When writing CSS, you need special features. The style is good, but use the highest precision. If a style is leaked to the home page, it is nonstandard and will lead to distrust.

6. Test, test, and then test
If you are creating a small bookmarking tool that references a vulnerable third-party class library, you may encounter a nightmare forever-cross-browser compatibility issues. It looks obvious, but this is something many people often forget.
Another trap is that gadgets that want to work on all websites only work on several websites. Web pages can have different levels and use different methodologies. Some websites may contain HTML5 and use related containers, while others may use common div labels for security reasons. Make sure that every situation is taken into account when collecting information.