0

Мне нравится JSX... но так или иначе, после компиляции элементы JSX превращаются в объекты JS. Отсюда и родилась идея разминать свои пальцы и мозг в нативном JS, создавая для себя задачи, связанные с работой, к примеру, в DOM.

Эти занятия не имеют практического преимущества над уже существующими практиками. Скорее они направлены на укрепление знаний синтаксиса нативного JS.

Одна из таких задач - создание объекта, который имел бы ряд всевозможных методов для работы с DOM: построение и удаление тега, работа с CSS классами и многое другое, что может стать полезным. Всего лишь добавить новый метод в объект...

Сначала для создания объекта с методами я решил использовать просто функцию... Конечно, функция еще "сырая" и имеет минимальный функционал: placeIn(parent) для внесения тега в DOM в определенного родителя, addClass(className) для внесения класса или классов CSS, а также putText(Str) для внесения текста в тег.

Я прошу опытных "джедаев" не сильно судить меня "зеленого", но всегда буду рад Вашим советам...

/**@description it comprises the methods of creating DOM elements;
 * @param {object} node which exists in DOM. Needs to be parent;
 * @return {object} with own methods and pars;
 * */
function initTag(node = "div") {
    if (typeof node !== "string") {
        throw new Error('the given node is not String');
    }
    const tag = document.createElement(node);

    return {
        tag,
        placeIn: (parent) => {
            if (parent.parentNode) {
                parent.appendChild(tag);
            } else throw new Error("given Parent is not in DOM");
        },
        addClass: (className) => {
            if (typeof className !== "string") {
                throw new Error('the given classname is not String');
            }
            if (~className.indexOf(' ')) {  //space inside
                (className.split(" ")).forEach((cls) => {
                    tag.classList.add(cls);
                })
            } else {
                tag.classList.add(className);
            }
        },
        putText: (value) => {
            tag.textContent = String(value);
        }
    };
}

Теперь инициируем три объекта, каждый со своим значением "tag". Далее мы добавляем классы и текстовый контент для "детей" родительского контейнера. Причем, не важно поместим мы сразу "детей" в "родителя" или сначала дадим им классы CSS и текст. Главное, чтобы родитель был в DOM.

container.addClass("flex-box center");
    block_1.addClass("block");
    block_2.addClass("block");
    block_1.putText("block - 1");
    block_2.putText("block - 2");

    container.placeIn(plate);
    block_1.placeIn(container.tag);
    block_2.placeIn(container.tag);

Проблема началась, когда вместо обычной функции я решил использовать Классы, создающие экземпляры с прототипными функциями. А в прототипных функциях стал прописывать вот так:

function Tag(node="div") {
    if (typeof node !== "string") {
        throw new Error('the given node is not String');
    }
    this.nodeEl = document.createElement(node);
}

Tag.prototype.placeIn = (parent) => {
    if (parent && parent.parentNode) {
        parent.appendChild(this.nodeEl);
    } else throw new Error("given Parent Obj is not in DOM or not given");
};

и так далее....

В итоге, я получал ругательства: "given Parent Obj is not in DOM".

Все пересмотрел.... не могу понять, почему так происходит...

1 ответ 1

0

Очень долго мучался, пока не понял, что стрелочная функция не имеет своего this и ищет утерянный this.nodeEl совсем не в контексте this экземпляра...

Итак:

Tag.prototype.placeIn = function(parent) {
    if (parent.parentNode) {
        parent.appendChild(this.nodeEl);
    } else throw new Error("given Parent Obj is not in DOM");
};

Теперь мы получили внутренний this и легко находим его.

Отсюда запомнилась важность this при поиске this.nodeEl, примененяя функцию через prototype, а также особенности применения стрелочных функций.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.