We have been looking for ways to increase our browsing experience, some of which are well known and others obscure. I thought the bookmark gadget belonged to the latter, which was a very annoying thing. To my great chagrin, I found that I was completely wrong in this matter. It's not boring, it's user-centric, it can do a lot of good, and as expected, it becomes a central part of my interaction with the viewer and the Web.
Here I want to introduce you to the whole process of developing a bookmark gadget to achieve some subtle bookmarks. Yes, bookmark, we will create more than one bookmark, even if it is very small. Are you curious? Here we go!
What exactly is a bookmark gadget?
Refer to the preceding text:
The bookmark gadget is a great little piece of JavaScript code that is disguised as a small application that resides in your browser and provides additional functionality for the Web page, with just a click.
The word is a combination of bookmarks and applets, also known as a Collection gadget (Favelets), which allows you to summon additional functionality when browsing through any page. Because they are only JavaScript, they are removable and can support all browsers, even mobile devices and tablet devices. Installing them is also fairly simple, just drag them to your favorites!
So, what is the key?
The key point is that the bookmarks gadget allows you to do a lot of things that you would have to do as a developer center. Any feature you can get with a bookmark gadget can take a little time to use the browser's console. The bookmark widget simplifies this process by packaging code that implements some functionality in a small button. Bookmark gadgets can be grouped into the following categories:
Used to transmit data. It is used to submit a page to a specific service. Dealing with social media, looking up dictionaries, and searching for them all fall into this category. We will create a bookmark gadget that submits information to Reddit (a news site).
Used to get information or modify the current page. We'll create a gadget that sets the background color of the page.
For background operation. The bookmark widget that clears the current Web site cookie is a prime example, and we'll create one below.
1. Start
The 1th thing you need to remember is the "JavaScript" URI on all the JavaScript code prefixes. The browser implements a specific prefix so that the content behind the prefix can be handled correctly as JavaScript code, parsing.
For example, clicking on "This link" (the code below) will make a dialog box stronger.
Copy Code code as follows:
<a href= "javascript:alert (' text link ');" > This link </a>
2, packaging as an anonymous function
Remember that your code will run on the currently loaded page, and it may have its own JavaScript code, which means there might be a conflict with the bookmark Gadget's code. The last thing you need to do is get your gadget to abort the current page.
Wrapping your code in an anonymous function can guarantee no name conflict. In addition, JavaScript novice will be confused and think you are God if you do so.
Copy Code code as follows:
JavaScript: (function () {//Your code here}) ();
This is also appropriate when you are using JavaScript code elsewhere, and always be careful to keep your code isolated.
3. externalized on Demand
Bookmark gadgets are not necessarily very small, you can write as much as you need. In these cases, it's best to create a package that gets the code you need in order to be easy to publish and keep the code up to date without the user having to manually intervene.
Copy Code code 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 beautiful, creating a script tag, setting the SRC attribute to a file somewhere else, and then eventually attaching it to the document. In this way, no matter what part of your code changes, you can deploy your modified files and immediately spread to each user.
Note: This is not limited to JavaScript. If your bookmarks gadget uses the front end, you can also freely introduce external HTML and CSS to make your gadgets truly Automatic updates.
4, carefully add Class library
If you want to create a large bookmark tool, you may need a JavaScript class library. But using them on your page is not just about incorporating them in, you need to make sure that the library is not already there. A class library of large markets such as jquery and mootools you have to deal with it carefully to make sure it is not loaded beforehand.
On the other hand, the page may already be loaded into another class library, which may cause the "$" symbol component to conflict. Version conflicts also occur in some cases, so be aware.
Here is a section of my code used in the script. Note that in your code you need to pay attention to the points I have mentioned above.
Copy Code code 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 piece of code should be very clear, let's simply go through it.
First we determine if jquery is already loaded by judging whether the jquery object exists in the namespace.
If it does not exist, we introduce it. We can load it up with a CDN based on best practices. Finally, we make sure to point to the program main function that contains the code to execute.
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 gadget Builder. It solves the full space and version conflicts in a very complete way. Good thing!
5, must not confuse the Mother page
This is too important. If you accidentally destroy the master page, the bookmark gadget is useless. 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 on the page. Do not give your containers and classes a very ordinary name, such as you call it "container", I will always hate you. An easy way to do this is to add a special prefix (or suffix) string with tool characteristics to all the names. When you write CSS, you need to be particularly special. It's nice to use a style, but use the highest precision. If a style is leaked to the home page it is not standard and can cause mistrust.
6, testing, testing, and then testing
If you are creating a smaller bookmark gadget that references a vulnerable third party class library, you may encounter a perpetual nightmare-cross-browser compatibility issue. It seems obvious but this is a point that many people will forget many times.
Another pitfall is a gadget that wants to work on all sites only on several sites. Web pages can have different levels, using different methodologies. Some sites may contain HTML5 and use the associated container while others may use a generic div tag for security reasons. Ensure that each situation is taken into account when gathering information.
