나와 함께 고민하다 : mitt.js

이 기사에서는 이 작은 라이브러리에서 찾은 몇 가지 빛나는 선과 그로부터 배울 수 있는 내용을 설명할 것입니다.
이 줄에 뛰어들기 전에 typescript와 javascript의 기초가 있어야 합니다.

mitt.js가 무엇인가요?

mitt는 자신을 작은 200바이트 기능 이벤트 방출기/pubsub라고 설명합니다.
그리고 이것이 미트를 멋지게 만드는 이유입니다. 왜냐하면 미트 크기의 우선 순위는 작성자가 라이브러리를 작고 멋지게 유지하는 동시에 솔루션을 찾도록 만들기 때문입니다.

우리의 자료

이것이 우리가 설명할 코드입니다. 계속 읽기 전에 무엇을 하고 있는지 잘 확인하십시오.

/**
 * Remove an event handler for the given type.
 * If `handler` is omitted, all handlers of the given type are removed.
 * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
 * @param {Function} [handler] Handler function to remove
 * @memberOf mitt
 */
off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
    const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
    if (handlers) {
        if (handler) {
            handlers.splice(handlers.indexOf(handler) >>> 0, 1);
        }
        else {
            all!.set(type, []);
        }
    }
},

널이 아닌 어설션 연산자 !.

const handlers: Array<GenericEventHandler> | undefined = all!.get(type);

이 연산자!.를 보십시오. 저를 좋아하신다면 이전에 TypeScript에서 이 연산자를 처음 본 것 같습니다.
이 연산자는 컴파일러에게 "이 식은 여기에서 null 또는 undefined일 수 없으므로 null 또는 undefined일 가능성에 대해 불평하지 마십시오"라고 말하는 방법입니다. 경우에 따라 유형 검사기가 스스로 결정을 내릴 수 없습니다.

.splice 메서드를 사용하는 비트 연산자

handlers.splice(handlers.indexOf(handler) >>> 0, 1);

.splice 메서드와 함께 비트 연산자를 사용한 이유를 알기 전에 .splice 메서드가 어떻게 작동하는지 알아야 합니다.

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice().

let list1 = [1, 2, 3, 4, 5];

list.splice(list1.indexOf(2), 1) // [2]

console.log(list1) // [1, 3, 4, 5]

let list2 = [1, 2, 3, 4, 5]

list.splice(list.indexOf(6), 1) // []

console.log(list) // [1, 2, 3, 4] Why ?

그러나 "indexOf"함수가 여기에 반환-1하기 때문에 .splice 마지막 함수를 제거하므로 간단하지만 문제는 이러한 일이 발생하지 않도록 방지해야 한다는 것입니다. 하지만 어떻게 해야 할까요?
여기에 ">>>"연산자가 있습니다. 이 연산자는 Unsigned Right Shift Operator라고 합니다(여기서는 설명하지 않음). 이 연산자에 대해 알아야 할 사항은 -1를 4294967295로 변환할 수 있으며 모든 나머지 숫자는 그대로.

console.log(-1 >>> 0) // 4294967295
console.log(1 >>> 0) // 1
console.log(4 >>> 0) // 4

그리고 이것은 속임수입니다. 항목이 if(여기서 undefined는 .splice를 반환합니다)인 경우 연산자는 이를 이 거대한 숫자-1로 변환합니다. 동일하며 실수로 삭제할 가능성을 줄이거나 때로는 불가능하게 만듭니다.

드디어

빨리 끝난 건 알지만 제 눈에 띈 건 이런 것들이고 설명을 해주셔서 너무 재미있었어요.
저처럼 빛나는 라인을 통해 배우셨다면 아름다움은 항상 디테일에 있다는 것을 기억하세요.

자원

In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member? - stackoverflow.com

Unsigned right shift (>>>) - developer.mozilla.org

이 기사와 같은 것을 더 원하면 아래 의견에 알려주십시오. 안녕👋