JavaScript: импортировать модуль или добавить функцию в «документ»? - PullRequest
Новая
       33

JavaScript: импортировать модуль или добавить функцию в «документ»?

0 голосов
/ 11 ноября 2019

Я хочу расширить ванильные DOM-объекты новыми методами, например, расширением document.createElement() путем определения нового метода createElementWithAttrs() или расширением Element, но какой из следующих двух методов является наилучшим?

Подход A

(например, как Chrome DevTools делает это , но это может произойти из-за того, что код был унаследован от WebKit задолго до ES2015)

Добавьте новый метод к существующим прототипам классов DOM. 

// dom.js
Document.prototype.createElementWithClass = (tagName, className) => { ... };
Element.prototype.findEnclosingShadowRoot = () => { ... };
// probably a few more

// someScriptName.js
const e1 = document.createElementWithClass(...);
...
const shadow = e2.findEnclosingShadowRoot();

Плюсы:

  • Краткие и интуитивно понятные, поскольку их можно использовать так, как если бы они были частью собственного DOM * 1020. *

Минусы:

  • Нужно вставить dom.js в HTML с тегом <script>
  • Иногда сбивает с толку читателей (включая меня, потому что после долгогопериод времени, который я мог бы забыть).

Подход B :

Определить их в модуле ES. 

// dom.js
export const createElementWithClass = (tagName, className) => { ... };
export const findEnclosingShadowRoot = (element) => { ... };
// probably a few more

// someScriptName.js
import * as dom from './dom.js';

const e1 = dom.createElementWithClass(...);
...
const shadow = dom.findEnclosingShadowRoot(e2);

Плюсы иМинусы являются противоположностью "Минусы" и "Плюсы" выше.

Есть ли лучшая практика? Я пропускаю некоторые плюсы / минусы, чтобы рассмотреть? Спасибо.

1 Ответ

0 голосов
/ 11 ноября 2019

Только что нашел углубленную статью, анализирующую, почему подход А не рекомендуется : http://perfectionkills.com/whats-wrong-with-extending-the-dom,, тогда основные моменты:

  1. Отсутствие спецификации,Стандарт не требует показа Document и Element и других.

  2. Хост-объекты не имеют правил (объекты DOM являются хост-объектами): их поведение зависит от реализации.

  3. Конфликты имен.

  4. Повышение производительности.

  5. Ошибки в браузерах, в основном в IE инекоторые версии Safari.

...