js 책 갈피 도구 만 들 기 이론

우 리 는 줄곧 조회 체험 을 늘 리 는 방법 을 찾 고 있 는데,어떤 방법 은 모두 가 알 고 있 고,어떤 방법 은 잘 알려 지지 않 았 다.나 는 원래 책 갈피 도구 가 후자 에 속 하고 매우 싫 은 것 이 라 고 생각 했다.나 를 매우 괴 롭 히 는 것 은 내 가 이 문제 에 있어 서 완전히 틀 렸 다 는 것 을 발견 한 것 이다.이것 은 사람 을 귀 찮 게 하 는 것 이 아니 라 사용 자 를 중심 으로 훌륭 한 기능 을 많이 실현 할 수 있 고 사람들 이 기대 하 는 것 처럼 저 와 조회 자,그리고 인터넷 상호작용 의 핵심 부분 이 되 었 습 니 다.여기 서 나 는 너 에 게 정교 한 책 갈피 의 전 과정 을 실현 하기 위해 책 갈피 도 구 를 개발 하 는 것 을 소개 하고 싶다.예,책 갈피 입 니 다.아주 작은 책 갈피 라 도 책 갈 피 를 만 들 것 입 니 다.궁금 하 세 요?우리 시작 합 시다!도대체 무엇이 책 갈피 도구 입 니까?앞의 말 을 참조 하 십시오:책 갈피 도 구 는 아주 좋 은 자바 script 코드 작은 조각 으로 위장 한 작은 응용 프로그램 입 니 다.브 라 우 저 에 남아 웹 페이지 에 추가 기능 을 제공 합 니 다.클릭 만 하면 됩 니 다.이 단 어 는 bookmark 와 applt 의 합성어 로 소장 도구(favelets)라 고도 합 니 다.이 작은 자바 script 세 션 은 모든 페이지 를 탐색 할 때 추가 기능 을 소환 할 수 있 습 니 다.javascript 만 구성 되 어 있 기 때문에 모든 브 라 우 저,심지어 모 바 일 장치 와 태 블 릿 장 치 를 지원 할 수 있 습 니 다.설치 도 간단 합 니 다.즐겨 찾기 폴 더 로 끌 어 다 놓 으 면 됩 니 다!그렇다면 무엇이 관건 일 까?중요 한 것 은 책 갈피 도구 가 개발 자 를 중심 으로 해 야 할 일 을 많이 할 수 있다 는 점 이다.책 갈피 도 구 를 통 해 얻 을 수 있 는 모든 기능 은 브 라 우 저의 콘 솔 을 사용 하여 적은 시간 을 들 여 얻 을 수 있 습 니 다.책 갈피 도 구 는 이 과정 을 간소화 하고 일부 기능 을 실현 하 는 코드 를 작은 버튼 에 포장 합 니 다.책 갈피 도 구 는 크게 다음 과 같은 몇 가지 로 나 눌 수 있다.데 이 터 를 전송 하 는 데 사용 된다.페이지 를 특정 서비스 에 제출 하 는 데 사 용 됩 니 다.소 셜 미디어 를 처리 하고 사전 을 찾 으 며 검색 하 는 것 은 모두 이런 부류 에 속한다.저 희 는 Reddit(뉴스 사이트)에 정 보 를 제출 하 는 책 갈피 도 구 를 만 들 것 입 니 다.정 보 를 가 져 오 거나 현재 페이지 를 수정 하 는 데 사 용 됩 니 다.웹 페이지 배경 색 을 설정 하 는 작은 도 구 를 만 들 것 입 니 다.백 스테이지 운영 에 사용 합 니 다.현재 사이트 쿠키 를 제거 하 는 책 갈피 도 구 는 주요 한 예 입 니 다.아래 에 만 들 것 입 니 다.1.처음에 기억 해 야 할 첫 번 째 점 은 모든 javascript 코드 접두사 에"javascript"URI 입 니 다.브 라 우 저 는 특정한 접 두 사 를 실 현 했 기 때문에 접두사 뒤의 내용 은 자바 script 코드 로 정확하게 처리 되 고 해석 할 수 있 습 니 다.예 를 들 어'이 링크'(코드 는 다음 과 같 음)를 누 르 면 대화 상자 가 강해 집 니 다

 
<a href="javascript: alert('    ');">    </a> 

2.익명 함수 로 포장 하여 코드 가 현재 불 러 온 페이지 에서 실 행 될 것 임 을 기억 하 십시오.이것 은 자신의 javascript 코드 를 가지 고 있 을 수 있 습 니 다.이것 은 책 갈피 도구 의 코드 와 충돌 할 수 있 음 을 의미 합 니 다.마지막 으로 당신 이 해 야 할 일 은 현재 페이지 를 중단 시 키 는 작은 도구 입 니 다.코드 를 익명 함수 에 포장 하면 이름 충돌 이 없 음 을 보증 할 수 있 습 니 다.또한,자바 script 초보 자 는 헷 갈 리 고 당신 이 하나님 이 라 고 생각 할 것 입 니 다.만약 당신 이 이렇게 한다 면..

 
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); 
}()); 

위의 코드 는 많이 미화 되 었 습 니 다.script 탭 을 만 들 고 src 속성 을 다른 곳 의 파일 로 설정 한 다음 에 문서 에 추가 합 니 다.이러한 방법 을 통 해 어느 부분의 코드 가 변화 하든지 간 에 수 정 된 파일 을 배치 하고 모든 사용자 에 게 즉시 전파 할 수 있다.주의:이것 은 자 바스 크 립 트 에 만 국 한 된 것 이 아 닙 니 다.책 갈피 도구 가 프론트 엔 드 를 사용한다 면 외부 HTML 과 CSS 를 자 유 롭 게 도입 하여 작은 도 구 를 자동 으로 업데이트 할 수 있 습 니 다.4.라 이브 러 리 를 신중하게 추가 합 니 다.대형 책 갈피 도 구 를 만 들 려 면 자바 script 라 이브 러 리 가 필요 할 수 있 습 니 다.그러나 당신 의 페이지 에서 그것들 을 사용 하 는 것 은 단지 그것들 을 포함 하 는 것 만 이 아니 라,이 라 이브 러 리 가 이미 존재 하지 않 는 다 는 것 을 보증 해 야 합 니 다.jQuery 와 MooTools 처럼 큰 시장 을 차지 하 는 라 이브 러 리 는 미리 불 러 오지 않도록 꼼꼼 히 처리 해 야 합 니 다.다른 한편,웹 페이지 는 다른 라 이브 러 리 를 불 러 왔 을 수도 있 습 니 다.'$'기호 구성 요소 가 충돌 할 수도 있 습 니 다.버 전 충돌 은 어떤 경우 에 도 발생 할 수 있 으 므 로 주의해 야 한다.여 기 는 제 코드 에 사 용 된 스 크 립 트 입 니 다.주의 하 세 요.당신 의 코드 에서 당신 은 내 가 위 에서 말 한 몇 가 지 를 주의해 야 합 니 다

 
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 
} 

이 코드 의 의 미 는 매우 명확 할 것 이다.우 리 는 간단하게 살 펴 보 자.우선 jQuery 대상 이 이름 공간 에 존재 하 는 지 판단 함으로써 jQuery 가 불 러 왔 는 지 확인 합 니 다.만약 존재 하지 않 는 다 면,우 리 는 그것 을 도입 할 것 이다.우 리 는 최선 의 실천 에 따라 CDN 을 통 해 그것 을 불 러 올 수 있다.마지막 으로 실행 할 코드 를 포함 하 는 프로그램의 주 함 수 를 확보 합 니 다.존재 한다 면 주 함 수 를 직접 실행 합 니 다.만약 당신 이 이 문 제 를 해결 하 는 것 이 매우 번거롭다 고 생각한다 면,나 는 Ben Alman 의"책 갈피 도구 생 성기"를 강력 히 추천 합 니 다.그것 은 전 칭 공간 과 버 전의 충돌 을 아주 완전한 방법 으로 해결한다.좋 은 물건!5.어 쩔 수 없 이 페이지 를 흐 트 러 뜨리 지 않 는 것 이 중요 합 니 다.만약 부주의 로 모페이지 를 망 가 뜨 렸 다 면,책 갈피 도 구 는 쓸모 가 없 을 것 이다.자 바스 크 립 트 는 당신 이 유일 하 게 처리 해 야 할 것 이 아 닙 니 다.전단 이 있 으 면 HTML 과 CSS 도 페이지 에서 실 행 됩 니 다.당신 의 용기 와 클래스 에 아주 일반적인 이름 을 지어 주지 마 세 요.예 를 들 어 당신 이 그것 을'container'라 고 부 르 면 나 는 영원히 당신 을 싫어 할 것 입 니 다.간단 한 방법 은 모든 이름 에 도구 특색 을 가 진 특별한 접두사(또는 접두사)문자열 을 추가 하 는 것 이다.CSS 를 쓸 때 는 특별한 특별한 것 이 필요 하 다.사용 스타일 은 좋 지만 최고의 정밀 도 를 사용 하 세 요.홈 페이지 에 스타일 이 새 는 것 은 규범 에 맞지 않 고 불 신 을 불 러 일 으 킬 수 있다.6.테스트,테스트,재 테스트 만약 에 작은 책 갈피 도 구 를 만 들 고 있다 면 약 한 제3자 라 이브 러 리 를 인용 하여 영원한 악몽 인 브 라 우 저 호환성 문 제 를 만 날 수 있 습 니 다.뻔 해 보이 지만 많은 사람들 이 잊 어 버 리 는 점 이다.또 다른 함정 은 모든 사이트 에서 일 하고 싶 은 작은 도구 가 몇 개의 사이트 에서 만 일 하 는 것 이다.웹 페이지 는 서로 다른 차원 에서 서로 다른 방법론 을 사용 할 수 있다.일부 사 이 트 는 HTML 5 를 포함 하고 관련 용 기 를 사 용 했 을 수도 있 고,다른 사 이 트 는 일반적인 div 라벨 을 사 용 했 을 수도 있다.정 보 를 수집 할 때 모든 상황 을 고려 하도록 확보 했다.