첫 번째 JavaScript 라이브러리를 구축하십시오-JS 튜토리얼-php.cn

첫 번째 JavaScript 라이브러리 구축

반응의 마술에 놀랐습니까? Dojo가 어떻게 작동하는지 궁금한 적이 있습니까? JQuery의 영리한 운영에 대해 궁금한 적이 있습니까? 이 튜토리얼에서는 무대 뒤에서 몰래 빠져 나와 초기화 된 jQuery 버전을 구축하려고합니다.

우리는 거의 매일 JavaScript 라이브러리를 사용합니다. 알고리즘을 구현하거나 API 추상화를 제공하거나 DOM을 조작하든 라이브러리는 대부분의 최신 웹 사이트에서 많은 기능을 수행합니다.

이 튜토리얼에서는 처음부터 이와 같은 라이브러리를 구축하려고합니다 (이것은 단순화 된 버전입니다). jQuery와 유사한 DOM 운영을위한 라이브러리를 만들 것입니다. 그렇습니다. 재미 있지만, 흥분하기 전에 몇 가지 요점을 명확히하겠습니다.

이것은 완전히 특색 지어진 도서관이 아닙니다. 우리는 탄탄한 방법 세트를 작성할 것입니다. 그러나 이것은 완전한 jQuery가 아닙니다. 도서관을 구축 할 때 발생할 문제의 유형을 잘 이해하기에 충분합니다.
우리는 여기에서 모든 브라우저에서 모든 호환성을 추구하지 않습니다. 오늘 우리가 쓴 코드는 Chrome, Firefox 및 Safari에서 실행되지만 IE와 같은 이전 브라우저에서는 작동하지 않을 수 있습니다.
우리는 도서관의 가능한 모든 사용을 다루지 않을 것입니다. 예를 들어, prepend 메소드는 라이브러리 인스턴스를 전달할 때만 유효합니다.

라이브러리 생성을위한 프레임 워크

우리는 모듈 자체로 시작합니다. 웹에서 코드를 가져오고 내보내는 최신 방법 인 ECMASCRIPT 모듈 (ESM)을 사용합니다.

Class Dome {생성자 (selector) {}}

내보내기 dome 라는 클래스를 내보내지만 생성자가 매개 변수를 허용하지만 여러 유형 일 수 있습니다. 문자열 인 경우 CSS 선택기라고 가정하지만 단일 DOM 노드 또는 docum <code> length 속성이있는 경우 노드 목록이 있음을 알 수 있습니다. 우리는 이러한 요소를 this.elements 에 저장하여 dome 객체는 여러 dom 요소를 감싸고 거의 모든 방법으로 각 요소를 루프해야하므로 이러한 유틸리티는 매우 편리합니다.

매개 변수와 콜백 함수를 받아들이는 map 함수로 시작하겠습니다. 우리는 배열의 항목을 루프하고 콜백 함수에 의해 반환 된 컨텐츠를 수집합니다.

우리는 또한 foreach 메소드가 필요합니다. 기본적으로 mapone 로 호출을 전달할 수 있습니다. 이 기능이 무엇을하는지 쉽게 알 수 있지만 실제 질문은 왜 우리에게 필요한가? 이것은 당신이 "도서관 개념"이라고 부르는 것을 조금 필요로합니다.

개념에 대한 간단한 토론

도서관을 구축하는 것이 코드를 작성하는 경우 너무 어렵지 않습니다. 그러나이 프로젝트를 수행 할 때 내가 찾은 더 어려운 부분은 특정 방법이 어떻게 작동 해야하는지 결정하는 것이 었습니다.

곧 우리는 여러 dom 노드 ( $ ( "li"). text () )를 감싸는 dome 객체를 만들 것입니다. 이것이 유용합니까? 나는 그렇게 생각하지 않지만 더 나은 반환 가치가 무엇인지 모르겠습니다.

이 프로젝트의 경우 배열에 항목이 하나만 없으면 여러 요소의 텍스트를 배열로 반환합니다. 나는 당신이 단일 요소에 대한 텍스트를 가장 자주 얻는다고 생각합니다. 그래서 우리는이 상황에 대해 최적화했습니다. 그러나 여러 요소에 대한 텍스트를 얻는 경우 사용할 수있는 것을 반환합니다.

인코딩을 반환

따라서 mapone 는 먼저 map 를 호출 한 다음 배열 또는 어레이에서 단일 항목을 반환합니다. 이것이 어떻게 작동하는지 확신 할 수 없다면 계속 지켜봐주십시오 : 당신은 볼 수 있습니다!

 {const m = m.length}; 이것은 요소를 반복하고 텍스트를 설정하는 것입니다. 우리가 얻는다면, 우리는 <code> mapone </code> 메소드를 반환합니다. 여러 요소에서 작업하면 배열이되면 문자열이됩니다.  <p> <code> html </code> 메소드는 <code> innerhtml </code>를 사용한다는 점을 제외하고 <code> text </code> 메소드와 거의 동일합니다. </p> <fe> html (html) (html type! = defined ") {el. el.innerhtml = html;}; .  <hr> <ol start="5"> <li> <h2> 작동 클래스 </h2> </li> </ol> <p> 다음에 클래스를 추가하고 삭제할 수 있어야하므로 <code> addClass </code> 및 <code> removeclass </code> 메소드를 작성해 봅시다. </p> <p> 우리의 <code> addClass </code> 메소드는 각 요소에서 <code> classlist.add </code> 메소드를 사용합니다. 문자열을 통과 할 때 해당 클래스 만 추가되고 배열을 통과 할 때 배열을 반복하고 여기에 포함 된 모든 클래스를 추가합니다. </p> <freclass this.foreach elclass of classs else> <p> 이제 수업을 삭제하는 것은 어떻습니까? 이를 위해 거의 똑같은 일을하고 <code> classlist.remove </code> 메소드를 사용하십시오. </p> <ol start="6"> <li> <h2> 속성 사용 </h2> </li> </ol> <p> 다음에 <code> attr </code> 함수를 추가합시다. <code> html </code> 메소드와 거의 동일하기 때문에 쉽습니다. 이러한 방법과 마찬가지로, 우리는 동시에 속성을 얻고 설정할 수 있습니다. 설정할 속성 이름과 값 하나와 하나의 속성 이름 만 얻을 수 있습니다. </p> <fre> (attr, val) {if (typeof val! == "undefined"{return this.foreach (el.setattribute (att, val); 코드> setattribute  메소드. 그렇지 않으면 <code> getAttribute </code> 메소드를 사용합니다.  <ol start="7"> <li> <h2> 요소 생성 </h2> </li> </ol> <p> 새로운 요소를 만들 수 있어야하며 좋은 라이브러리가이를 수행 할 수 있습니다. 물론 이것은 <code> 돔 </code> 클래스의 방법으로 의미가 없습니다. </p> <preport function create attrs> <p> 보시다시피, 우리는 두 가지 매개 변수, 즉 요소의 이름과 속성 객체를 수락합니다. 대부분의 속성은 <code> att 이 모든 것이 실제로 수행되는 방법 : </code></p> <fort export function attrs> 돔  객체로 직접 보냅니다.  <p> 그러나 이제 우리는 새로운 요소를 만들고 있습니다. 우리는 그것들을 dom에 삽입하고 싶을 것입니다. </p> <ol start="8"> <li> <h2> 추가 및 선점 요소 </h2> </li> </ol> <p> 다음으로 <code> Append </code> 및 <code> prepend </code> 메소드를 작성합니다. 이러한 기능은 주로 여러 사용 사례가 있기 때문에 약간 까다 롭습니다. 우리가 할 수있는 일은 다음과 같습니다. </p> <fe> dome1.append (dome2); </fe></fort></preport></fre></freclass></fe>

로그인 후 복사

우리는 첨부하거나 접두사를 원할 수 있습니다. >

하나 이상의 기존 요소에 대한 여러 기존 요소

나는 "새로운"을 사용하여 아직 DOM에 있지 않은 요소가 이미 DOM에 있습니다. 지금 단계별로 설명 해 보겠습니다. 완전한 DOM 라이브러리는 노드 또는 노드 목록으로 허용하지만 그렇게하지는 않습니다. 우리는 각 요소를 통해 반복해야하며, 그 안에 첨부하려는 각 요소를 통과합니다.

우리가 추가되는 경우, 매개 변수로 전달 된 외부 dome 객체의 i 는 원본 (구별되지 않은) 노드 만 포함합니다. 따라서 단일 요소 만 단일 요소에 추가하면 관련된 모든 노드가 해당 prepend 메소드의 일부가됩니다.

요소를 삭제하십시오

완전성을 위해 제거 메소드를 추가하겠습니다. removechild 메소드를 사용하면 매우 간단합니다. 더 쉽게 만들기 위해 foreach 루프를 사용하여 트래버스를 역전시키기 위해 removechild 메소드를 사용하며, 각 요소의 돔 객체는 여전히 DOM을 추가하거나 조정하는 것을 포함하여 원하는 모든 방법을 사용할 수 있습니다. 나쁘지 않아요?