Как JS Libs выполняют действия с переменными в цепочке или по отдельности?
Как я могу создать свои собственные части или функции библиотеки JS, как в приведенных ниже примерах?
Как мне взять переменную и добавить к ней что-то вроде этого:
let x = document.createElement("p");
x.pickle();
//let's say ".pickle" turns the text green. I do not want to use a normal function to do this like `setAtrribute` I want to do it through my own custom thing like ".pickle"
let x = new Something().color("green");
//How Can I create a new addition or something like libraries? Potentially Chainable Methods.
Как мне сделать это, как это делают библиотеки JS? Даже если мой пример нужно изменить, чтобы он заработал.
@evolutionxbox — это не пользовательская функция, позволяющая делать все, что я захочу. Извини
@evolutionxbox Да, скажем так, да
@evolutionxbox Как мне его создать? Я просто пытаюсь создать небольшую библиотеку, и мне нужна вот эта вещь. Кроме того, я отредактировал свой экзамен для лучшего понимания.
Мы не разрешаем менять вопрос после того, как вы уже получили ответы.
@gre_gor, братан, чтобы повысить ценность? лол окей
Аннулирование существующих ответов не добавляет ценности.
Этот вопрос похож на: Методы последовательного подключения в JavaScript. Если вы считаете, что это другое, отредактируйте вопрос, поясните, чем он отличается и/или как ответы на этот вопрос не помогают решить вашу проблему.
@gre_gor на самом деле это другая терминология. Основным ответом был тот, кто опубликовал сообщение, этот вопрос не решает проблему.
Вы аннулировали принятый ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Есть свойство textContent, которое вы можете получить и установить.
JavaScript также позволяет добавлять элементы к любому объекту. Таким образом, вы можете создать нового члена под названием «добавить» с желаемым поведением.
Теоретически вы даже можете использовать .prototype, чтобы все объекты данного типа имели новое поведение.
Однако добавление свойств к объектам, которыми ваш код не «владеет», обычно не является хорошей идеей. Обычно лучше создать собственную функцию/объект/класс со своим собственным поведением, которое можно использовать для изменения значений других объектов. Вот почему такие библиотеки, как Prototype.js, вышли из моды и были заменены jQuery (до того, как фреймворки SPA захватили мир).
const div = document.querySelector(".example");
div.textContent += " | New Text";
div.add = (moreText) => div.textContent += " | " + moreText;
div.add("hi");
div.add("there");
HTMLElement.prototype.pickle = function() { this.textContent += "| I'm a pickle" };
div.pickle();<div class = "example">Original Text</div>вы видите часть «.textContent». Как я могу сделать все, что захочу, скажем «.pickle», который сделает текст зеленым. Плохой пример, я изменюсь
@WestbergPersonal Почему ты хочешь измениться .textContent?
Спасибо, а есть возможность добавить еще более сложные функции или нет?
@evolutionxbox Я изменил свой пример, чтобы посмотреть, имеет ли он больше смысла, но мой первоначальный пример, от которого этот парень отказался. Теперь мне интересно, стоит ли усложняться и делать больше, чем одно дело.
@WestbergPersonal: функция есть функция. Вы можете сделать его настолько сложным, насколько захотите. Но, пожалуйста, обратите внимание на мое предупреждение. Что бы вы ни пытались с этим сделать, вы, вероятно, используете неправильный подход.
@StriplingWarrior Я создаю простую в использовании библиотеку и в моем случае хочу иметь возможность просто использовать «.something», чтобы пользователю было проще. Я привел самый простой пример, чтобы попытаться найти ответ.
@WestbergPersonal Итак, вы создаете что-то вроде jQuery?
@Barmar Ха-ха, нет, я создаю библиотеку для удобной демонстрации веб-сайтов, например, React и jQuery, но с гораздо большим количеством данных, серверных бэкэндов и прочего. Так что да, но нет, совсем нет.
Похоже, вы хотите иметь свой собственный класс с методами, которые устанавливают атрибуты, свойства, CSS и т. д. элемента DOM. Вы могли бы также поручить этому классу создать элемент DOM и сделать методы цепочками.
Может быть, что-то вроде этого:
// Custom class that has methods that allow chaining.
class Element {
constructor(type) {
this.elem = document.createElement(type);
}
text(text) {
if (arguments.length) {
this.elem.textContent = text; // set
return this; // <-- make chainable
} else {
return this.elem.textContent; // get
}
}
append(...elems) {
this.elem.append(...elems.map(obj => obj.elem));
return this;
}
attr(name, value) {
if (arguments.length) {
this.elem.setAttribute(name, value); // set
return this;
} else {
return this.elem.getAttribute(name); // get
}
}
css(obj) {
Object.assign(this.elem.style, obj);
return this;
}
appendTo(target) {
document.querySelector(target).append(this.elem);
return this;
}
// ...add more methods...
static find(selector) {
const instance = Object.create(Element.prototype);
instance.elem = document.querySelector(selector);
return instance;
}
}
// Example use
const div = new Element("div").text("hello").css({background: "yellow"}).appendTo("body");
console.info(`the div has '${div.text()}' as text`);
const find = Element.find("div"); // Can I get it?
console.info(`found div. '${find.text()}'`);Спасибо, это тоже помогает с моей библиотекой.
Знаете ли вы jQuery? Он делает что-то подобное, и было бы жаль, если бы вы просто изобретали велосипед.
Ха-ха, нет, я создаю библиотеку для удобной демонстрации веб-сайтов, например React и jQuery, но с гораздо большим количеством данных, серверными бэкэндами и прочим. Так что да, но нет, совсем нет
Знаете ли вы, что jQuery имеет простую систему плагинов? Вы можете просто добавить все функции, которые хотите добавить, поверх того, что предлагает jQuery «из коробки».
То, как jQuery представляет это, теперь так, как я хочу, мне нравится, как React работает с DOM-манипуляциями, поэтому я использую его для такого рода использования. Мне нравятся данные jQuery, и они работают, но из-за того, что у меня их много, они просто не работают так, как нужно мне и моим клиентам. Три года назад я действительно хорошо разбирался в JS, пока не сделал перерыв, и сейчас я ничего не понимаю в некоторых вещах.
React — отличный фреймворк. Обратите внимание, что с React вы никогда этого не сделаете x = document.createElement("p")
Я поддерживаю совет Тринкота — использовать библиотеки, которые уже предназначены для подобных задач. Будет проще использовать jQuery и добавлять свои данные и серверную логику, чем писать все это самостоятельно.
Вы хотите добавить функцию «добавить» в x?