We're always looking for ways to enhance your browsing experience, some well known and some less so. I originally thought the bookmarks widget was the latter, a nuisance. Much to my chagrin I discovered that I was completely wrong on this issue. It's not boring, it's user-focused, it does a lot of great things, and as one would expect, it becomes a core part of my interactions with viewers and the web.
Here I want to walk you through the entire process of developing a bookmark gadget to achieve some nifty bookmarks. Yes, bookmarks, we will create more than one bookmark, even a very small one. Curious? Let's get started!
What exactly is a bookmark gadget?
Quote from the previous article:
The bookmark gadget is a great little snippet of JavaScript code disguised as a small application. It resides in your browser and provides additional functionality to web pages with just one click. .
This word is a portmanteau of bookmark and applet, also known as favelets. These small JavaScript snippets allow you to summon additional functions when browsing any page. Because they are made of only JavaScript, they are mobile-friendly and work with all browsers, even mobile devices and tablets. Installing them is also pretty easy, just drag them to your favorites!
So, what is the key?
The key thing is that the bookmarklet gadget allows you to do a lot of things that you would otherwise have to do in a developer-centric way. Everything you can do with a bookmarklet widget can be accessed in a fraction of the time using your browser's console. The bookmark gadget simplifies this process by packaging the code that implements some functions into a small button. Bookmark gadgets can generally be divided into the following categories:
is used to transfer data. It is used to submit pages to a specific service. Dealing with social media, looking up dictionaries, and searching all fall into this category. We will create a bookmarklet widget that submits information to Reddit, a news website.
Used to obtain information or modify the current page. We will create a widget that sets the background color of a web page.
Used for background operations. A bookmark gadget that clears cookies for the current website is a prime example, and we will create one below.
1. Get Started
The first point you need to remember is to prefix all javascript code with the "javascript" URI. Browsers implement specific prefixes so that the content following the prefix can be correctly processed and parsed as JavaScript code.
For example, clicking "this link" (code below) will force a dialog box.
2. Wrap 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 it may conflict with the code of the bookmark gadget. The last thing you need to do is tell your gadget to abort the current page.
Wrapping your code in an anonymous function ensures there are no name conflicts. Also, javascript newbies will be confused and think you are god if you do this.
javascript:(function(){// your code here })();
This is also appropriate when you use JavaScript code in other places, always be careful to keep your own code isolated.
3. On-demand externalization The bookmark gadget does not have to be small, you can write it as big as you need. In these cases, in order to facilitate distribution and keep the code up to date without requiring manual intervention by users, it is best to create a wrapper that captures the required code.
javascript: (function () {
var jsCode = document.createElement('script');
jsCode.setAttribute('src', 'http://path/to/external/file.js');
document.body.appendChild(jsCode);
}());
위 코드는 훨씬 더 예쁩니다. 스크립트 태그를 생성하고 src 속성을 다른 파일에 설정한 다음 마지막으로 문서에 추가합니다. 이렇게 하면 코드의 어느 부분이 변경되더라도 수정된 파일을 배포하고 즉시 모든 사용자에게 전파할 수 있습니다.
참고: 이는 자바스크립트에만 국한되지 않습니다. 북마크릿 위젯이 프런트 엔드를 사용하는 경우 외부 HTML 및 CSS를 포함하여 위젯이 실제로 자동으로 업데이트되도록 할 수도 있습니다.
4. 라이브러리를 신중하게 추가하세요
대규모 북마크 도구를 만들려면 자바스크립트 클래스 라이브러리가 필요할 수 있습니다. 그러나 페이지에서 이를 사용하는 것은 단순히 포함하는 문제가 아니며 라이브러리가 이미 존재하지 않는지 확인해야 합니다. jQuery 및 MooTools와 같은 대규모 시장 라이브러리의 경우 사전 로드되지 않도록 주의해야 합니다.
반면에 웹페이지에 다른 클래스 라이브러리가 로드되어 "$" 기호 구성요소 충돌이 발생할 수 있습니다. 경우에 따라서는 버전 충돌이 발생할 수도 있으니 이 점에도 유의하시기 바랍니다.
다음은 내 코드에 사용된 스크립트입니다. 코드에서 위에서 언급한 사항에 주의를 기울여야 합니다.
if (!($ = window.jQuery )) { // typeof jQuery=='undefine'도 작동합니다
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() {
// 크라켄이 출시되었습니다!
// 예, 여기에 코드를 입력하세요
}
이 코드의 의미는 명확해야 합니다. 간단히 살펴보겠습니다.
먼저 네임스페이스에 jQuery 객체가 존재하는지 확인하여 jQuery가 로드되었는지 확인합니다.
없으면 소개합니다. 모범 사례에 따라 CDN을 통해 로드할 수 있습니다. 마지막으로 실행할 코드가 포함된 프로그램의 기본 함수를 가리킵니다.
이미 존재한다면 main 함수를 직접 실행하세요.
이 문제를 해결하는 것이 번거롭다면 Ben Alman의 “Bookmark Widget Generator”를 강력히 추천합니다. 전체 이름 공간과 버전 충돌을 해결하기 위해 매우 완벽한 방법을 사용합니다. 좋은 것!
5. 꼭 필요한 경우가 아니면 마스터 페이지를 건드리지 마세요.
이것이 매우 중요합니다. 실수로 마스터 페이지를 삭제한 경우 북마크 가젯은 쓸모가 없습니다. 자바스크립트만 처리해야 하는 것은 아닙니다. 프런트엔드가 있으면 HTML과 CSS도 페이지에서 실행됩니다. 컨테이너와 클래스에 매우 흔한 이름을 지정하지 마십시오. 예를 들어 "컨테이너"라고 부르면 영원히 미워할 것입니다. 간단한 방법은 도구에 고유한 특수 접두사(또는 접미사) 문자열을 모든 이름에 추가하는 것입니다. CSS를 작성할 때는 매우 특별해야 합니다. 스타일을 사용하는 것은 좋지만 최대 정밀도를 사용하십시오. 메인 페이지에 스타일을 유출하는 것은 불법이며 불신을 초래할 수 있습니다. 6. 테스트, 테스트, 다시 테스트
취약한 타사 라이브러리를 참조하는 작은 북마크 가젯을 만드는 경우 영구적인 악몽에 직면할 수 있습니다.— 브라우저 간 호환성 문제. 당연한 것 같지만 많은 사람들이 시간을 두고 잊어버리는 부분입니다.
또 다른 함정은 모든 사이트에서 작동할 것으로 예상되는 위젯이 일부 사이트에서만 작동한다는 것입니다. 웹 페이지는 다양한 수준을 가질 수 있으며 다양한 방법론을 사용할 수 있습니다. 일부 사이트는 HTML5를 포함하고 관련 컨테이너를 사용할 수 있지만 다른 사이트는 안전상의 이유로 일반 div 태그를 사용할 수 있습니다. 정보를 수집할 때는 모든 상황을 고려하십시오.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
