바닐라 자바 ​​스크립트에서 라이브러리와 같은 JQuery 만들기

구문과 같은 jQuery에서 작동하는 바닐라 자바 ​​스크립트 라이브러리. jQuery의 $ 함수 대신 이 라이브러리는 $_를 사용합니다. [$도 사용할 수 있지만 차별화를 위해 $_를 사용합니다.]

참고: 라이브러리에는 아래 테스트 케이스를 처리하는 몇 가지 방법만 있습니다.

테스트 케이스 [파일: js/index.js]

$_(() => { // jQuery document ready equivalent
    console.log('This is from Dom Content loaded');

    $_('h1').css('color', 'red'); // jQuery css()
    $_('h2').css({'color': 'green', 'text-decoration': 'underline'});


    console.log($_('h1').html()); // jQuery html()
    console.log($_('h2').text());  // jQuery text()

    $_('#btnAlert').on('click', () => alert('Hai From Button')); // jQuey on()

    $_('ul>li').each(function (itx){ // jQuery each()
        if(itx%2 === 0) {
            $_(this).css('color', 'red');
        }
    })
});

샘플 라이브러리 구현

인수를 받는 함수 만들기

        const $_ = (argument) => {

        }; 

인수의 유형 가져오기

        const getArgumentType = option => typeof option;

        const $_ = (argument) => {
                const argumentType = getArgumentType(argument); 

        };

인수가 함수이면 jQuery 문서 준비 시나리오가 처리됩니다. 창의 DOMContentLoaded 이벤트에 인수 함수가 첨부되었습니다.

        const $_ = (argument) => {
                const argumentType = getArgumentType(argument); 
                if(argumentType === 'function') {
                        window.addEventListener("DOMContentLoaded", argument);
                        return;
                }
        };

인수가 문자열이면 document.querySelectorAll()에 대한 선택기로 사용 [예: $('#mainId'), $('.classname'), $(div), $(ul>li))]

        const $_ = (argument) => {
                const argumentType = getArgumentType(argument); 
                if(argumentType === 'function') {
                        ...
                }
                if(argumentType === 'string') {
                        const elements = document.querySelectorAll(argument);
                        return elements;
                }
        };

인수가 html 요소 객체인 경우 jQuery(this)가 처리됩니다.

        const $_ = (argument) => {
                const argumentType = getArgumentType(argument); 
                if(argumentType === 'function') {
                        ...
                }
                if(argumentType === 'string') {
                        ...
                }
                if(argumentType === 'object' && argument instanceof HTMLElement) {
                        const elements = [argument];
                        return elements;
                }
        };

메서드를 추가할 수 있도록 요소 개체가 배열에 추가됩니다.

css, html, text, on과 같은 메소드가 각각 string\object 인수 유형에서 재조정된 NodeList\array에 추가됩니다.

        const addEventToElements = (elements) => {
                addEvents(elements, "css", (...opts) =>
                        setPropertyCustomLogic(elements, "style", opts, (ele, prop, key, value) => {
                        ele[prop][key] = value;
                        })
                );

                addEvents(elements, "html", () => elements[0].innerHTML);
                addEvents(elements, "text", () => elements[0].textContent);

                addEvents(elements, "on", (...opts) =>
                        addListener(elements, opts[0], opts[1])
                );

                addEvents(elements, "each", (opts) => {
                        invokeCallbackForElements(elements, opts);
                });
        };
        const $_ = (argument) => {
                ...
                if(argumentType === 'string') {
                        ...
                        addEventToElements(elements);
                        ...
                }else if(argumentType === 'object' && argument instanceof HTMLElement) {
                        ...
                        addEventToElements(elements);
                        ...
                }
        };

addEventToElements 메소드는 선택된 요소에서 사용할 수 있도록 테스트 케이스에서 언급된 모든 이벤트를 추가하는 데 사용됩니다. 이 방법은 몇 가지 도우미 기능을 사용합니다. 모든 코드는 아래에 나와 있습니다

라이브러리 함수 코드 [js/lib.js 파일]

    const getArgumentType = option => typeof option;

    const createObjectFromArray = arr => Object.fromEntries([arr]);

    const addListener = (elements, action, listener) => {
        elements.forEach(ele => ele.addEventListener(action, listener));
    };

    const invokeCallbackForElements = (elements, callback) => {
        elements.forEach((ele, itx) => {
            const fn = callback.bind(ele);
            fn(itx);
        });
    };

    const setPropertyCustomLogicForElements = (elements, prop, options, customFn) => {
      elements.forEach((ele) => {
        for (const key in options) {
          customFn(ele, prop, key, options[key]);
        }
      });
    };

    const setPropertyCustomLogic = (elements, prop, data, customFn) => {
        const dataType = getArgumentType(data[0]); 
        if (dataType === "string") {
          setPropertyCustomLogicForElements(
            elements,
            prop,
            createObjectFromArray([data[0], data[1]]), 
            customFn
          );
        } else if (dataType === "object") {
          setPropertyCustomLogicForElements(elements, prop, data[0], customFn);
        }
    };

    const addEvents = (ele, prop, callback) => {
        ele[prop] = callback;
    };

    const addEventToElements = (elements) => {
        addEvents(elements, "css", (...opts) =>
          setPropertyCustomLogic(elements, "style", opts, (ele, prop, key, value) => {
            ele[prop][key] = value;
          })
        );

        addEvents(elements, "html", () => elements[0].innerHTML);
        addEvents(elements, "text", () => elements[0].textContent);

        addEvents(elements, "on", (...opts) =>
          addListener(elements, opts[0], opts[1])
        );

        addEvents(elements, "each", (opts) => {
          invokeCallbackForElements(elements, opts);
        });
    };

    const $_ = (argument) => {
        const argumentType = getArgumentType(argument); 
        if(argumentType === 'function') {
            window.addEventListener("DOMContentLoaded", argument);
            return;
        }
        if(argumentType === 'string') {
            const elements = document.querySelectorAll(argument);
            addEventToElements(elements);
            return elements;
        }else if(argumentType === 'object' && argument instanceof HTMLElement) {
            const elements = [argument];
            addEventToElements(elements);
            return elements;
        }
    };

lib.js 및 index.js가 index.html에 추가됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Library - Sample HTML</title>
</head>
<body>
    <div id="main">
        <h1>header</h1>
        <h2>Sub Header</h2>
        <button id="btnAlert" type="button">Alert JS</button>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script src="./js/lib.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>