Javascript。 从即时调用函数获取外部对象的引用

Question

I've wanted to optimize project but faced with problem. I don't know how resolve this problem. I want to use immediate call functoins which initialize IS_LOCALHOST property and CONTEXT_PATH, but I can't get access to isLocalhost() function and constant properties (like port number). I try to put this as a parameter immediate call function but it references on document also I try to save refence like self: this and use this.self like peremeter and even util . I don't understand how I can resolve this problem. Please, help me to understand working solution.

var util = {

            WAR_FILE_NAME : 'app-name/',
            DEFAULT_TOMCAT_PORT : 8080,
            DEFAULT_SECURE_TOMCAT_PORT : 8443,

            /*** Pre construct block ***/
            IS_LOCALHOST : ( function () {
                var isLocalhost = false, hostWithPort = location.host;
                if ( hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1 ) {
                    isLocalhost = true;
                }
                return isLocalhost;
            }() ),

            isLocalhost : function (){
                return this.IS_LOCALHOST;
            },

            CONTEXT_PATH : ( function (utilModule) {
                return location.hostname + ( location.port ? ':' + utilModule.DEFAULT_TOMCAT_PORT : '' ) + '/' + ( utilModule.isLocalhost() ? utilModule.WAR_FILE_NAME : '' );
            }(util) ),

            SECURE_CONTEXT_PATH : ( function (utilModule) {
                return location.hostname + ( location.port ? ':' + utilModule.DEFAULT_SECURE_TOMCAT_PORT : '' ) + '/' + ( utilModule.isLocalhost() ? utilModule.WAR_FILE_NAME : '' );
            }(util) )
    }

Answer 1

I'm not sure why you need to make these as IIFEs .

Why not make them normal functions as in the first example below, or simply set the properties at the appropriate time as in the second example?

Example 1 -- normal functions

var util = {

    WAR_FILE_NAME: 'app-name/',
    DEFAULT_TOMCAT_PORT: 8080,
    DEFAULT_SECURE_TOMCAT_PORT: 8443,

    /*** Pre construct block ***/
    IS_LOCALHOST: (function() {
        var isLocalhost = false,
            hostWithPort = location.host;
        if (hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1) {
            isLocalhost = true;
        }
        return isLocalhost;
    }()),

    isLocalhost: function() {
        return util.IS_LOCALHOST;
    },

    CONTEXT_PATH: function() {
        return location.hostname + (location.port ? ':' + util.DEFAULT_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
    },

    SECURE_CONTEXT_PATH: function() {
        return location.hostname + (location.port ? ':' + util.DEFAULT_SECURE_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
    }
};

Example 2 -- set properties afterwards using the IIFEs

var util = {

    WAR_FILE_NAME: 'app-name/',
    DEFAULT_TOMCAT_PORT: 8080,
    DEFAULT_SECURE_TOMCAT_PORT: 8443,

    /*** Pre construct block ***/
    IS_LOCALHOST: (function() {
        var isLocalhost = false,
            hostWithPort = location.host;
        if (hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1) {
            isLocalhost = true;
        }
        return isLocalhost;
    }()),

    isLocalhost: function() {
        return util.IS_LOCALHOST;
    }
};

util.CONTEXT_PATH = (function() {
    return location.hostname + (location.port ? ':' + util.DEFAULT_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
})();

util.SECURE_CONTEXT_PATH = (function() {
    return location.hostname + (location.port ? ':' + util.DEFAULT_SECURE_TOMCAT_PORT : '') + '/' + (util.isLocalhost() ? util.WAR_FILE_NAME : '');
})();

Answer 2

Don't create your object like this:

var util = {
    foo: bar,
    blah: stuff

etc. This is verbose and cumbersome. Instead, wrap it in a IIFE and put all initialization logic in this function:

var util = (function() {
   var t = {};
   t.foo = bar;
   t.blah = stuff;
   return t;
})();

For example:

var util = (function() {

    var t = {};

    t.WAR_FILE_NAME =  'app-name/';
    t.DEFAULT_TOMCAT_PORT = 8080;
    t.DEFAULT_SECURE_TOMCAT_PORT = 8443;

    t.IS_LOCALHOST = false;
    var hostWithPort = location.host;
    if ( hostWithPort.indexOf('localhost') !== -1 || hostWithPort.indexOf('127.0.0.1') !== -1 ) {
        t.IS_LOCALHOST = true;
    }

    t.CONTEXT_PATH = location.hostname
        + (location.port ? '=' + t.DEFAULT_TOMCAT_PORT : '')
        + '/'
        + ( t.IS_LOCALHOST ? t.WAR_FILE_NAME : '' );

    t.SECURE_CONTEXT_PATH = location.hostname
        + (location.port ? '=' + t.DEFAULT_SECURE_TOMCAT_PORT : '' )
        + '/'
        + ( t.IS_LOCALHOST ? t.WAR_FILE_NAME : '');

    return t;

})();