Соответствует ли мой первый пакет npm лучшим практикам?

Я создал свой первый пакет npm: https://github.com/sunnysideup/stretched-bg-image.

Цель пакета – добавить класс в div (или любой другой элемент блока в HTML) в зависимости от соотношения ширины / высоты div (панорама / пейзаж / портрет / небоскреб).

Ниже приведен код. Он работает нормально, но соответствует ли он лучшим практикам?

Кроме того, как лучше всего включить ванильный css

Вот основной код:

'use strict';

(
  function (root, factory) {
    if (typeof define === 'function' && define.amd) {
      define(factory)
    } else if (typeof exports === 'object') {
      module.exports = factory()
    } else {
      root.StretchedBgImages = factory()
    }
  }(
    typeof window !== 'undefined' ? window : this,
    function () {
      if (typeof window === 'undefined') {
        return null
      }

      /**
       *
       * @type {Function}
       * @constructor
       */
      const StretchedBgImages = function () {}
      StretchedBgImages.apply = function (opt) {
        // defaults ...
        const defaultClassRanges = [
          {
            max: '8',
            min: '2',
            className: 'panorama'
          },
          {
            max: '2',
            min: '1',
            className: 'landscape'
          },
          {
            max: '1',
            min: '0.5',
            className: 'portrait'
          },
          {
            max: '0.5',
            min: '0.125',
            className: 'skyscraper'
          }
        ]

        const defaultQueryString = '.stretched-bg-images'
        const defaultErrorClass="stretched-bg-images-error"

        // set options
        opt = opt || {}
        const classRanges = opt.classRanges || defaultClassRanges
        const queryString = opt.queryString || defaultQueryString
        const errorClass = opt.errorClass || defaultErrorClass

        // observer method
        const ro = new window.ResizeObserver(
          entries => {
            for (const entry of entries) {
              if (entry.target.handleResize) {
                entry.target.handleResize(entry)
              }
            }
          }
        )

        // find elements...
        const entries = document.querySelectorAll(queryString)

        // loop elements
        for (let i = 0; i < entries.length; ++i) {
          const entry = entries[i]
          ro.observe(entry)
          // set resize Method
          entry.handleResize = entry => {
            const height = entry.target.clientHeight
            const width = entry.target.clientWidth
            const ratio = width / height
            let hit = false
            for (let j = 0; j < classRanges.length; ++j) {
              const range = classRanges[j]
              if (ratio >= range.min && ratio <= range.max) {
                entry.target.classList.add(range.className)
                hit = true
              } else {
                entry.target.classList.remove(range.className)
              }
            }
            if (hit === false) {
              entry.target.classList.add(errorClass)
            } else {
              entry.target.classList.remove(errorClass)
            }
          }
        }
      }
      return StretchedBgImages
    }
  )
)
```

0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *