JS Module Example

dope-module-es5.js

/**
 * DopeModule
 */
const DopeModule = (function() {
   
  // Module Constants 
  const ACTIVE_CLASS_NAME = 'is-active';
  
  // Module Vars
  const someEl = document.querySelector('.some-dope-el')
  
  // Module Flags
  let isActive = false

  return {
  
    /** 
     * Init method
     */
    init: function() {
      this.bindEvents()
    },
    
    /** 
     * Bind all our main events/methods
     */
    bindEvents: function() {
        
      window.addEventListener('scroll', function(event) {
        DopeModule.handleScroll(event)
      })
      
      someEl.addEventListener('click', function(event) {
        event.preventDefault()
        DopeModule.handleClick(event)
      })
    },

    /**
     * Do Stuff with Click Event
     * @param {Event}
     */
    handleClick: function(event) {
      console.log('clickin', event)
      
      // Call an internal Method 
      DopeModule.active(event.target)
    },

    /**
     * Do stuff with scroll event
     * @param {Event}
     */
    handleScroll: function(event){      
      console.log('scrollin', event)
    },

    /**
     * Helper to add active
     * @param {Element}
     */
    active: function(elem) {
      elem.classList.add(ACTIVE_CLASS_NAME);
    },
    
    /**
     * Helper to remove active
     * @param {Element}
     */
    inActive: function(elem) {
      elem.classList.remove(ACTIVE_CLASS_NAME)
    }
  }
})();

DopeModule.init()

dope-module.js

/**
 * DopeModule
 */
const DopeModule = (() => {
   
  // Module Constants 
  const ACTIVE_CLASS_NAME = 'is-active';
  
  // Module Vars
  const someEl = document.querySelector('.some-dope-el')
  
  // Module Flags
  let isActive = false

  return {
  
    /** 
     * Init method
     */
    init() {
      this.bindEvents()
    },
    
    /** 
     * Bind all our main events/methods
     */
    bindEvents() {
        
      window.addEventListener('scroll', event => {
        DopeModule.handleScroll(event)
      })
      
      someEl.addEventListener('click', event => {
        event.preventDefault()
        DopeModule.handleClick(event)
      })
    },

    /**
     * Do Stuff with Click Event
     * @param {Event}
     */
    handleClick(event) {
      console.log('clickin', event)
      
      // Call an internal Method 
      DopeModule.active(event.target)
    },

    /**
     * Do stuff with scroll event
     * @param {Event}
     */
    handleScroll(event){      
      console.log('scrollin', event)
    },

    /**
     * Helper to add active
     * @param {Element}
     */
    active(elem) {
      elem.classList.add(ACTIVE_CLASS_NAME);
    },
    
    /**
     * Helper to remove active
     * @param {Element}
     */
    inActive(elem) {
      elem.classList.remove(ACTIVE_CLASS_NAME)
    }
  }
})();

export default DopeModule


// import DopeModuel from './components/DopeModule.js'
// DopeModule.init()