Consider factory functions

[simonwep]

Consider factory functions

[SaulDoesCode]

class vs factory function: general structure comparison

this is just for interest's sake.
note: this is my take on the matter and could be very wrong indeed, tread carefully.

classes

class X {
   constructor (props) {
      Object.assign(this, {...X.defaults}, props)
   }
   
   method () {
     // do something
     console.log(`state: a: ${this.a}, b: ${this.b}, c: ${this.c}`)
   }

   //  ... more methods ...
}
// static defaults
X.defaults = {a: 1, b: 2, c: 3}

// USE:
const myX = new X({a: 45, b: 32});
myX.method()
// > state: a: 45, b: 32, c: 3

factory function

const X = (props = {}) => {
      // create object (equivalent to a class's 'this')
      const x = {
          ...X.defaults,
          ...props,

          method () {
              // do something
             console.log(`state: a: ${x.a}, b: ${x.b}, c: ${x.c}`)
          }

         //  ... more methods ...
      }
    
     // constructor area
    // ...nothing to do here...

   // return object as if it would be a class instance
   return x
}

// static defaults
X.defaults = {a: 1, b: 2, c: 3}

// USE:
const myX = X({a: 45, b: 32});
myX.method()
// > state: a: 45, b: 32, c: 3

now super condensed

const X = (props = {}) => (props = {
   ...X.defaults,
   ...props,
   method () { 
     console.log (`state: a: ${props.a} b: ${props.b} c: ${props.c}`)
   }
})
X.defaults = {a: 1, b: 2, c: 3}

moveable.js as a factory function

import * as _ from './../lib/utils';

export default function Moveable(opt) {
    const M = {
        // Assign default values
        options: Object.assign({
            lockX: false,
            lockY: false,
            onchange: () => 0
        }, opt),

        _tapstart(evt) {
            _.on(document, ['mouseup', 'touchend', 'touchcancel'], M._tapstop);
            _.on(document, ['mousemove', 'touchmove'], M._tapmove);

            // Trigger move
            M.trigger(evt);

            // Prevent default touch event
            evt.preventDefault();
        },

        _tapmove(evt) {
            const element = M.options.element;
            const b = M.wrapperRect;

            let x, y;
            if (evt) {
                const touch = evt && evt.touches && evt.touches[0];
                x = evt ? (touch || evt).clientX : 0;
                y = evt ? (touch || evt).clientY : 0;

                // Reset to bounds
                if (x < b.left) x = b.left;
                else if (x > b.left + b.width) x = b.left + b.width;
                if (y < b.top) y = b.top;
                else if (y > b.top + b.height) y = b.top + b.height;

                // Normalize
                x -= b.left;
                y -= b.top;
            } else if (M.cache) {
                x = M.cache.x;
                y = M.cache.y;
            } else {
                x = 0;
                y = 0;
            }

            if (!M.options.lockX)
                element.style.left = (x - element.offsetWidth / 2) + 'px';

            if (!M.options.lockY)
                element.style.top = (y - element.offsetHeight / 2) + 'px';

            M.cache = {x, y};
            M.options.onchange(x, y);
        },

        _tapstop() {
            _.off(document, ['mouseup', 'touchend', 'touchcancel'], M._tapstop);
            _.off(document, ['mousemove', 'touchmove'], M._tapmove);
        },

        trigger(evt) {
            M.wrapperRect = M.options.wrapper.getBoundingClientRect();
            M._tapmove(evt);
        },

        update(x = 0, y = 0) {
            M._tapmove(new MouseEvent('mousemove', {
                clientX: M.wrapperRect.left + x,
                clientY: M.wrapperRect.top + y
            }));
        },

        destroy() {
            _.off([M.options.wrapper, M.options.element], 'mousedown', M._tapstart);
            _.off([M.options.wrapper, M.options.element], 'touchstart', M._tapstart, {
                passive: false
            });
        }
    }

    M.wrapperRect = M.options.wrapper.getBoundingClientRect();

    _.on([M.options.wrapper, M.options.element], 'mousedown', M._tapstart);
    _.on([M.options.wrapper, M.options.element], 'touchstart', M._tapstart, {
        passive: false
    });

    return M;
}

[simonwep]

Okay, (finally) I've borrowed it :)
It has proven itself to be very useful, was able to go down from 23,7 KB (24.303 bytes) to 22,6 KB (23.242 bytes). With some other changes even to 22,6 KB (23.177 bytes) 🎉 Altogether an awesome idea :D

[simonwep]

Yeah, that's true... would simplify a lot. I personally prefer ES6 classes 'cause I use babel anyway and it will be transpiled to ES5 constructor functions. And they are more legible IMO. But you're basically right, I will take this in consideration / try it out.

[simonwep]

Hahaha, thank's 😄, I will have!
Also thank's for being so active, your improvements / suggestions are awesome! Helps a lot to improve this library!

[SaulDoesCode]

I agree factories are not as clean looking as classes, that's fair 😐.
Thanks for giving it a try though 👍.
But either way happy coding! 😃

[simonwep]

Reminds me of the Java-Factory-Pattern :D. Basically a very clean style, and can be better minified!