첫 번째 JavaScript 라이브러리를 구축하십시오

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

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

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

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

---

1. 라이브러리를위한 프레임 워크를 만듭니다

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

 수출 클래스 돔 {
    생성자 (선택기) {

    }
}

보시다시피, 우리는 생성자가 매개 변수를 수락하는 Dome 이라는 클래스를 내보내지 만 여러 유형 일 수 있습니다. 문자열 인 경우 CSS 선택기라고 가정하지만 단일 DOM 노드 또는 document.querySelectorAll 의 결과를 수락하여 요소 검색을 단순화 할 수도 있습니다. 속성이 length 있는 경우 노드 목록이 있음을 알 수 있습니다. 우리는이 요소들을 this.elements 에 저장합니다. 요소, Dome 객체는 여러 개의 dom 요소를 감싸고 거의 모든 방법으로 각 요소를 반복해야하므로 이러한 유틸리티가 매우 편리합니다.

콜백 함수 인 매개 변수를 취하는 map 함수부터 시작하겠습니다. Dome 의 항목을 루프하고 콜백 함수에 의해 반환 된 컨텐츠는 현재 요소와 인덱스 번호의 두 매개 변수를받습니다.

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

개념에 대한 간단한 토론

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

곧 우리는 여러 dom 노드 ( $("li").text() )를 감싸는 Dome 객체를 만들고 함께 연결된 모든 요소 텍스트가 포함 된 단일 문자열을 얻게됩니다. 이것이 유용합니까? 나는 그렇게 생각하지 않지만 더 나은 반환 가치가 무엇인지 모르겠습니다.

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

인코딩으로 돌아갑니다

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

 Mapone (콜백) {
    const m = this.map (콜백);
    M.Length> 1? M : M [0];
};

4. 텍스트 및 HTML 사용

다음으로 text 메소드를 추가하여 설정 중인지 확인하겠습니다. 이것은 요소를 반복하고 텍스트를 설정하는 것입니다. 우리가 얻는다면, 우리는 요소의 mapOne 메소드를 반환 할 것입니다. 여러 요소에서 작업하면 배열이되면 문자열이됩니다.

html 메소드는 text 메소드와 거의 동일하지만 innerHTML 사용한다는 점을 제외하고는 거의 동일합니다.

 html (html) {
    if (html typeof! == "undefined") {
        this.foreach (function (el) {
            el.innerhtml = html;
        });
        이것을 반환하십시오;
    } 또 다른 {
        이 this.mapone (function (el) {
            el.innerhtml을 반환합니다.
        });
    }
}

내가 말했듯이 : 거의 동일합니다.

---

5. 운영 클래스

다음으로 클래스를 추가하고 삭제할 수 있기를 원하므로 addClass 및 removeClass 메소드를 작성해 봅시다.

addClass 메소드는 각 요소의 classList.add 메소드를 사용합니다. 문자열을 통과 할 때 해당 클래스 만 추가되고 배열을 통과 할 때 배열을 반복하고 여기에 포함 된 모든 클래스를 추가합니다.

 AddClass (클래스) {
    return.foreach (function (el) {
        if (typeof classs! == "string") {
            for (const elclass of classes) {
                el.classlist.add (elclass);
            }
        } 또 다른 {
            el.classlist.add (클래스);
        }
    });
}

아주 간단합니까?

이제 수업을 삭제하는 것은 어떻습니까? 이를 위해 거의 똑같은 일을하고 classList.remove 를 사용하십시오.

6. 속성을 사용하십시오

다음으로 attr Function을 추가합시다. html 방법과 거의 동일하기 때문에 쉽습니다. 이러한 방법과 마찬가지로, 우리는 동시에 속성을 얻고 설정할 수 있습니다. 설정할 속성 이름과 값 하나와 하나의 속성 이름 만 얻을 수 있습니다.

 attr (attr, val) {
    if (typeof val! == "undefined") {
        return.foreach (function (el) {
            el.setattribute (attr, val);
        });
    } 또 다른 {
        이 this.mapone (function (el) {
            el.getAttribute (attr);
        });
    }
}

val 이 정의되면 setAttribute 메소드를 사용합니다. 그렇지 않으면 getAttribute 메소드를 사용합니다.

7. 요소를 만듭니다

우리는 새로운 요소를 만들 수 있어야하며 좋은 도서관이 그렇게 할 수 있습니다. 물론 이것은 Dome 수업의 방법으로 의미가 없습니다.

 내보내기 함수 생성 (tagname, attrs) {

}

보시다시피, 우리는 요소의 이름과 속성 객체의 두 매개 변수를 수락합니다. 대부분의 속성은 attr 메소드를 통해 적용되며 텍스트 내용은 text 메소드를 통해 Dome 객체에 적용됩니다. 그들 모두에 대한 실제 행동은 다음과 같습니다.

 내보내기 함수 생성 (tagname, attrs) {
    el = new Dome ([document.createElement (tagname)]);
    if (attrs) {
        for (attrs의 키를하자) {
            if (attrs.hasownproperty (key)) {
                el.attr (key, attrs [key]);
            }
        }
    }
    el el;
}

보시다시피, 우리는 요소를 만들어 새 Dome 객체로 직접 보냅니다.

그러나 이제 우리는 새로운 요소를 만들고 있습니다. 우리는 그것들을 dom에 삽입하고 싶을 것입니다.

8. 첨부 및 접두사 요소

다음으로, 우리는 append 작성하고 prepend 방법을 작성할 것입니다. 이러한 기능은 주로 여러 사용 사례가 있기 때문에 약간 까다 롭습니다. 우리가 할 수있는 일은 다음과 같습니다.

 dome1.append (dome2);
Dome1.prepend (dome2);

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

• 하나 이상의 기존 요소에 대한 새로운 요소
• 하나 이상의 기존 요소에 대한 여러 가지 새로운 요소
• 하나 이상의 기존 요소에 대한 기존 요소
• 하나 이상의 기존 요소에 대한 여러 기존 요소

나는 "새로운"을 사용하여 아직 DOM에 있지 않은 요소가 이미 DOM에 있습니다. 지금 단계별로 설명해 봅시다.

 부록 (els) {

}

우리는 els Dome 대상이 될 것으로 기대합니다. 완전한 DOM 라이브러리는 노드 또는 노드 목록으로 허용하지만 그렇게하지는 않습니다. 우리는 각 요소를 통해 반복해야하며, 그 안에 첨부하려는 각 요소를 통과합니다.

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

9. 요소를 삭제하십시오

완전성을 위해 remove 방법을 추가하겠습니다. removeChild 메소드를 사용하면 매우 간단합니다. 상황을 더 쉽게하기 위해 forEach 루프를 사용하여 반복을 반복하여 루프를 반복하여 removeChild 으로 사용하며, 각 요소의 Dome 객체는 여전히 DOM에 추가 또는 접두사를 포함하여 원하는 모든 방법을 사용할 수 있습니다. 나쁘지 않아요?

10. 사용 이벤트

마지막으로, 우리는 일부 이벤트 핸들러 기능을 작성합니다.

on 메소드를 확인하시면 다음과 같이 논의하겠습니다.

 on (evt, fn) {
    return.foreach (function (el) {
        el.addeventListener (EVT, FN, False);
    });
}

이것은 매우 간단합니다. 우리는 요소를 반복하고 addEventListener 메소드를 사용해야합니다. off 함수 (unloked 이벤트 핸들러)는 거의 동일합니다.

 OFF (EVT, FN) {
    return.foreach (function (el) {
        el.removeEventListener (EVT, FN, False);
    });
}

---

11. 사용 라이브러리

Dome 사용하려면 스크립트에 넣고 가져 오십시오.

 "./dome.js"에서 {dome, create} 가져 오기

거기에서 다음과 같이 사용할 수 있습니다.

 New Dome ( "Li")
...

가져 오기 스크립트가 ES 모듈인지 확인하십시오.

그게 다야!

나는 당신이 우리의 작은 도서관을 시도하고 조금 확장 할 수 있기를 바랍니다. 앞서 언급했듯이 Github에 넣었습니다. 자유롭게 포크, 플레이하고 풀 요청을 보내십시오.

다시 명확히하겠습니다.이 튜토리얼의 목적은 항상 자신의 라이브러리를 작성해야한다고 제안하지는 않습니다. 전용 팀이 함께 협력하여 크고 성숙한 도서관을 최대한 좋게 만들었습니다. 여기서 목적은 도서관 내에서 일어날 수있는 일에 대한 통찰력을 제공하는 것입니다.

좋아하는 라이브러리에서 파기하는 것이 좋습니다. 당신은 그들이 생각하는 것만 큼 신비하지 않다는 것을 알게 될 것입니다. 그리고 당신은 많은 것을 배울 수 있습니다. 좋은 출발점은 다음과 같습니다.

• jQuery 소스 코드 (Paul Irish)에서 배운 11 가지
• jQuery의 무대 뒤에서 (James Padolsey)
• REACT 16 : API 호환성의 깊은 곳에서 프론트 엔드 UI 라이브러리의 재 작성

이 게시물은 Jacob Jackson의 기여로 업데이트되었습니다. Jacob은 웹 개발자, 기술 작가, 프리랜서 및 오픈 소스 기고자입니다.

위 내용은 첫 번째 JavaScript 라이브러리를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!