Добавление нескольких детей в узел сразу


Это моя попытка ответа на вопрос так: добавить несколько элементов в JavaScript

Я хотел бы знать, если я сделал какие-либо ошибки как писать идиоматические ЕС6 на JavaScript (в основном по вопросам, касающимся конвенции и производительности).

Удовлетворяя, я уверена, добавив данное поведение напрямую Node.prototype Это, наверное, неправильный подход. Я также обеспокоен тем, что, возможно, она должна обрабатывать другие материалы (как прописаны?) и не просто массивы как один аргумент.

Node.prototype.appendChildren = function() {
  let children = [...arguments];

  if (
    children.length == 1 &&
    Object.prototype.toString.call(children[0]) === "[object Array]"
  ) {
    children = children[0];
  }

  const documentFragment = document.createDocumentFragment();
  children.forEach(c => documentFragment.appendChild(c));
  this.appendChild(documentFragment);
};

foo.appendChildren(bar1, bar2, bar3);
foo.appendChildren([bar1, bar2, bar3]);


4396
3
задан 7 февраля 2018 в 06:02 Источник Поделиться
Комментарии
1 ответ

Первый код

Некоторые изменения для улучшения функции.


Node.prototype.appendChildren = function() {
let children = [...arguments]; // old school

ES6 в сторону

 Node.prototype.appendChildren = function(...children) {

Следующее является слишком сложным


  if (
children.length == 1 &&
Object.prototype.toString.call(children[0]) === "[object Array]"
) {
children = children[0];
}

Для того чтобы проверить для массива

if(Array.isArray(children[0])){...

Но вам лучше сделать это в цикле, то вы можете обрабатывать массивы массивов


  const documentFragment = document.createDocumentFragment();
children.forEach(c => documentFragment.appendChild(c));

становится

  const documentFragment = document.createDocumentFragment();
children.forEach(child => {
if (Array.isArray(child)) {
child.forEach(child => documentFragment.appendChild(child))
} else {
documentFragment.appendChild(child);
}
});
this.appendChild(documentFragment);

// will handle
foo.appendChildren(bar, [bar1, bar2, bar3]);

Дизайн.

Есть некоторые, которые утверждают, что добавление в прототип приглашает катастрофы, другие будут утверждать его отличный способ расширить функциональные возможности интерфейса API.

Как я вижу, есть два типа сред.


  1. Вы поделитесь этой страницей со множеством 3-сторонних скриптов, рекламы, а что нет.

  2. На странице только ваша и никакой другой код, а ваш, никогда не увидит этой странице.

Корпус 1

Для случая 1 следует избегать добавления к прототипу, как вы не можете доверять ему. Кто-то может уже добавили, что название прототипа и ты убиваешь их код, или они могут бегать за вами и они колошматят твое.

Если вы должны сделать это, в первую очередь проверьте

if(typeof Node.prototype.appendChildren === "undefined"){

}else{
// someone already has added something with that name
}

И если вы добавите его зафиксировать, чтобы она не может быть перезаписана

Object.defineProperty(Node.prototype, 'appendChildren ', {
writable : false, // dont let them over write it
enumerable : true, // dont hide it
configurable : false, // dont let them change the config so that they
// can over write it
value : function(...children) {... the rest of the function
});

Что с другой проверить, помогут вам не наступить на мозоль, и ваш код является безопасным, а также. Хотя что делать, если эта функция уже приняты-это вопрос, который лучше решать не при помощи добавления к прототипу и просто создание функции

function appendChildrenToNode(node, ...children){
const documentFragment = document.createDocumentFragment();
children.forEach(child => {
if (Array.isArray(child)) {
child.forEach(child => documentFragment.appendChild(child))
} else {
documentFragment.appendChild(child);
}
});
node.appendChild(documentFragment);
}

Случай 2

Для случая 2. Делай, что хочешь его безопасным, но будьте уверены, вы не забывайте об этом и используйте его на публичную страницу. Другими словами сделать первые настройки случай, чтобы быть безопасным.

3
ответ дан 7 февраля 2018 в 01:02 Источник Поделиться