Destructuring many methods on imported module

[rpg_digital]

Just wondering if this is bad practice, and whether there is a better alternative?

import { domHelpers } from './helpers/dom-helpers.js'

const {
  getElem,
  getElems,
  nextSibling,
  prevSibling,
  addEvent,
  removeEvent,
  hasClass,
  toggleClass,
  addClass,
  removeClass,
  debounce
} = domHelpers

Thanks

edit: this is the module I am importing, if it’s helpful

const doc = window.document

// helper Properties
const __isDesktop = doc.body.classList.contains('desktop')

const __touchtype = __isDesktop ? 'click' : 'touchend'

/* selector methods */
const getElem = (selector, root) => (root || doc).querySelector(selector)

const getElems = (selector, root) => Array.from((root || doc).querySelectorAll(selector))

const nextSibling = elem => elem.nextElementSibling

const prevSibling = elem => elem.previousElementSibling

/* class methods */
const hasClass = (elem, className) => elem.classList.contains(className)

const addClass = (elem, className) => elem.classList.add(className)

const removeClass = (elem, className) => elem.classList.remove(className)

const toggleClass = (elem, className) => elem.classList.toggle(className)

/* event methods */
const addEvent = (elem, type, fn, capture = false) => elem.addEventListener(type, fn, capture)

const removeEvent = (elem, type, fn, capture = false) => elem.removeEventListener(type, fn, capture)

const addEventAll = (elems, type, fn, capture = false) => {
  Array.from(elems).forEach(elem => elem.addEventListener(type, fn, capture))
}

const removeEventAll = (elems, type, fn, capture = false) => {
  Array.from(elems).forEach(elem => elem.removeEventListener(type, fn, capture))
}

const debounce = (func, wait) => {
  let timeout = null

  return (...args) => {
    const later = () => {
      timeout = null
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

export const domHelpers = {
  /* selector methods */
  getElem,
  getElems,
  nextSibling,
  prevSibling,
  /* event methods */
  addEvent,
  removeEvent,
  addEventAll,
  removeEventAll,
  debounce,
  /* class methods */
  hasClass,
  addClass,
  removeClass,
  toggleClass,
  /* properties */
  __isDesktop,
  __touchtype
}

[dresden_phoenix]

I have certainly not thought of using import that way. Doing it this way seems like the long way around. It seems to me, if you are going to import that many FUNCTIONS why not put them in their own .js file and do an external script?

Sidenote. I could see exporting the object as a way to encapsulate the methods and not polute the namescape of the target scripts ( keeping your calls as: domHelpers.getElems(), for example), but then why destructure the obj?

[rpg_digital]

@dresden_phoenix

I have certainly not thought of using import that way.

Looking at various scripts on github and the like, I’m not seeing this approach either, which is why I am having doubts.

Sidenote. I could see exporting the object as a way to encapsulate the methods and not polute the namescape of the target scripts ( keeping your calls as: domHelpers.getElems(), for example), but then why destructure the obj?

This was what I was thinking. Shortening it to something like ‘dom’ and dom.getElems(). These functions aren’t dependent on their left-hand parent for context, but maybe it is better to be clearer that they are part of a helper module — I don’t know?

[m3g4p0p]

@rpg_digital

Shortening it to something like ‘dom’ and dom.getElems().

Hi @rpg_digital, yes if that’s a lot of small helper functions I’d keep them namespaced. Actually, rather than exporting a single domHelpers object you might export them separately:

export const getElem = (selector, root) => (root || doc).querySelector(selector)
export const getElems = (selector, root) => Array.from((root || doc).querySelectorAll(selector))
export const nextSibling = elem => elem.nextElementSibling
// ...

Then the consumer can decide how to import them – if we only need one or two of those helpers, we might pick them individually:

import { getElem } from './helpers/dom-helpers.js'

const el = getElem('.foo')

This wouldn’t require additional destructuring, or suggest they were methods which require the domHelpers context. If we need more helpers however, we can still import the entire module:

import * as $ from './helpers/dom-helpers.js'

const el = $.getElem('.foo')

[rpg_digital]

That’s brilliant m3g4p0p. Perfect solution, thank you.