우리는 항상 귀하의 브라우징 경험을 향상시킬 수 있는 방법을 찾고 있습니다. 일부는 잘 알려져 있고 일부는 덜 알려져 있습니다. 나는 원래 북마크 위젯이 후자인 귀찮은 것이라고 생각했습니다. 나는 이 문제에 대해 내가 완전히 틀렸다는 것을 알게 되어 매우 유감스럽습니다. 지루하지 않고 사용자 중심적이며 훌륭한 일을 많이 하며, 예상대로 시청자 및 웹과의 상호 작용의 핵심 부분이 됩니다.
여기서 멋진 북마크를 얻기 위한 북마크 가젯 개발의 전체 과정을 안내해 드리겠습니다. 예, 북마크입니다. 아주 작은 북마크라도 두 개 이상의 북마크를 생성합니다. 궁금한? 시작해 봅시다!
북마크 가젯이란 정확히 무엇인가요?
이전 기사 인용:
북마크 가젯은 작은 애플리케이션으로 위장한 아주 작은 JavaScript 코드 조각으로, 단 한 번의 클릭으로 브라우저에 위치하며 웹페이지에 추가 기능을 제공합니다.
이 단어는 북마크와 애플릿(favelet이라고도 함)의 합성어입니다. 이 작은 JavaScript 스니펫을 사용하면 페이지를 탐색할 때 추가 기능을 호출할 수 있습니다. JavaScript로만 만들어졌기 때문에 모바일 친화적이며 모든 브라우저, 심지어 모바일 장치 및 태블릿에서도 작동합니다. 설치도 매우 쉽습니다. 즐겨찾기로 드래그하기만 하면 됩니다!
그럼 핵심은 뭔가요?
중요한 점은 북마크릿 가젯을 사용하면 개발자 중심 방식으로 수행해야 하는 많은 작업을 수행할 수 있다는 것입니다. 북마크릿 위젯으로 할 수 있는 모든 작업은 브라우저 콘솔을 사용하여 짧은 시간 안에 액세스할 수 있습니다. 북마크 가젯은 일부 기능을 구현하는 코드를 작은 버튼에 패키징하여 이 프로세스를 단순화합니다. 북마크 가젯은 일반적으로 다음 카테고리로 나눌 수 있습니다.
은 데이터를 전송하는 데 사용됩니다. 특정 서비스에 페이지를 제출하는 데 사용됩니다. 소셜 미디어 다루기, 사전 찾기, 검색 등이 모두 이 범주에 속합니다. 뉴스 웹사이트인 Reddit에 정보를 제출하는 북마크릿 위젯을 만들어 보겠습니다.
정보를 얻거나 현재 페이지를 수정하는 데 사용됩니다. 웹 페이지의 배경색을 설정하는 위젯을 만들어 보겠습니다.
백그라운드 작업에 사용됩니다. 현재 웹사이트의 쿠키를 지우는 북마크 가젯이 대표적인 예이며, 아래에서 이를 만들어 보겠습니다.
1. 시작하기
첫 번째로 기억해야 할 점은 모든 자바스크립트 코드 앞에 "javascript" URI를 붙여야 한다는 것입니다. 브라우저는 접두사 뒤의 콘텐츠가 올바르게 처리되고 JavaScript 코드로 구문 분석될 수 있도록 특정 접두사를 구현합니다.
예를 들어 "이 링크"(아래 코드)를 클릭하면 대화 상자가 강제로 나타납니다.
2. 익명 함수로 래핑합니다.
코드가 다음에서 실행된다는 점을 기억하세요. 현재 로드된 페이지에는 자체 자바스크립트 코드가 있을 수 있으며, 이는 북마크 가젯의 코드와 충돌할 수 있음을 의미합니다. 마지막으로 해야 할 일은 가젯에 현재 페이지를 중단하도록 지시하는 것입니다.
코드를 익명 함수로 래핑하면 이름 충돌이 발생하지 않습니다. 또한, 자바스크립트 초보자들은 이렇게 하면 혼란스러워하고 당신이 신이라고 생각할 것입니다.
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)
}());
위 코드는 훨씬 더 예쁩니다. 스크립트 태그를 생성하고 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 태그를 사용할 수 있습니다. 정보를 수집할 때는 모든 상황을 고려하십시오.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
