Блог

Главная - Вопросы по программированию - Как добавить два объекта в объекты элементы

Как добавить два объекта в объекты элементы

#javascript

#javascript

Вопрос:

Недавно я задал вопрос о том, как создать сокращенное имя для addEventListener, в результате чего:

 var dom = {
  id: function(elementId) {
    var element = document.getElementById(elementId);
    return Object.create(element, {
      on: {
        value(event, fn, options) {
          element.addEventListener(event, fn, options);
        }
      }
    })
  }
};

что, если бы я хотел добавить два объекта.create? Как мне его вернуть? Возможно ли это вообще?

Комментарии:

1. Если вы хотите добавить второй метод, добавьте его после on() . Если вы снова запустите Object.create, вы потеряете метод on().

2. означает ли это, что я должен сделать что-то вроде dom.id.funcName = function(param) {}?

3. @user14945188 Я не понимаю, как это должно работать. Когда я создаю div с id="el" помощью and do dom.id("el").on("click", doThis()); , он срабатывает doThis() немедленно, и событие щелчка не привязано. Можете ли вы добавить код, показывающий его реализацию?

4. Предположим, вы хотите изменить внутренний текст div, вам нужно сделать: dom.id('el').on('click', function() { this.innerText = 'text' });

5. @symlink не doThis() запускает функцию. Проходите doThis мимо () .

Ответ №1:

Если я правильно понимаю ваш вопрос, вы можете добавить несколько функций в dom и связать их, вернув это внутри каждой функции. Затем вызовите их следующим образом:

 dom.id("el").on("click",()=>console.log("clicked") ).changeText("replacement text");
 
 var dom = {
  id: function(elementId) {
    var element = document.getElementById(elementId);
    return Object.create(element, {
      on: {
        value(event, fn, options) {
          element.addEventListener(event, fn, options);
          return this;
        }
      },
      changeText: {
        value(text) {
          element.innerText = text;
          return this;
        }
      }
    })
  }
};

dom.id("el").on("click", () => console.log("clicked") ).changeText("replacement text"); 
 <div id="el">This text will be replaced</div>