0

I found this widget online that I am trying to learn how to write in the latest ES6 style. The javascript was minified but I imagine it was originally written in ES6.

So the basic structure of it looks like this:

Some_config = {};

(function() {
    var t, e = function(t, e) {
            return function() {
                return t.apply(e, arguments)
            }
        },
        i = [].slice;
    t = function() {
        function t() {
            this.log = e(this.log, this);
            var t;
            t = "undefined" != typeof Some_config && null !== Some_config ? Some_config : {},
            "undefined" != typeof Some_config && null !== Some_config && this.init(t)
        }
        return t.prototype.pushMessage = function(t, e) {
            return null == e && (e = {}), this.elements.frame.contentWindow.postMessage([t, e], "*")
        },
        t.prototype.log = function() {
            if (this.localOptions.debug)
                return console.log("[Debug]", arguments)
        },
        t.prototype.warn = function(t) {
            return console.warn("[Error]", t)
        },
        t.prototype.init = function(t) {
            var e;
            try {
                this.nextInit(t)
            } catch (t) {
                e = t, this.warn(e)
            }
            return this
        },
        t.prototype.nextInit = function(t) {
            console.log('calling nextInit');
        },
        t
    }(), window.SomeApi = new t
}).call(this);

So this javascript runs in a browser, so it looks like it is a immediately invoked but then it calls call(this). What exactly is going on in the last 2 lines?

   }(), window.SomeApi = new t
}).call(this); 

The style in general looks very foreign to me, is this because it was minified from the original ES6 style?

If this was written as a ES6 class, what would it look like structure wise? I'm hoping it would look cleaner and it would be easier for me to learn/build from.

class SomeApi {
    constructor() {

    }

    log() {
        if (this.localOptions.debug)
            return console.log("[Debug]", arguments)
    }

    init(t) {
        var e;
        try {
            this.nextInit(t)
        } catch (t) {
            e = t, this.warn(e)
        }
        return this
    }
}
Blankman
  • 259,732
  • 324
  • 769
  • 1,199
  • "*I found this widget online - the javascript was minified*" - so did you try to find the unminified source code? – Bergi Sep 12 '18 at 17:54
  • @Bergi no, it is the general pattern I am need to learn/understand anyhow. – Blankman Sep 12 '18 at 18:08
  • No, you should not try to learn the structure of minified code. And often you cannot get the original structure from the minified code - we would need to learn from comments in the source what it should accomplish. – Bergi Sep 12 '18 at 18:17

1 Answers1

1

I do not think trying to infer the meaning out of minified code is very efficient way to work the original code out.

However, this article could help you

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

What really happens here, is that the outer variable t is being assigned IIFE return value, which is again marked as t. Then the parser moves on and simply assign global variable someApi to the new t. Which is the previous outer t called as constructor.

The following could also be useful to clarify things:

What is the (function() { } )() construct in JavaScript?

https://www.w3schools.com/js/js_function_call.asp