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

Question

我想优化项目，但遇到问题。我不知道如何解决这个问题。我想使用初始化IS_LOCALHOST属性和CONTEXT_PATH的立即调用函数，但我无法访问isLocalhost（）函数和常量属性（如端口号）。我尝试将this作为参数立即调用函数，但它在文档上也引用，我尝试保存像self: this这样的区分，并使用this.self，例如peremeter，甚至util。我不明白我如何解决这个问题。请帮助我了解工作解决方案。

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

我不知道为什么你需要使这些为IIFEs。

为什么不像第一个例子那样使它们变成正常的函数，或者只是像第二个例子那样在适当的时候设置属性？

示例1 - 正常功能

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 : ''); 
    } 
}; 

例2 - 事后使用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

不要创建你的对象是这样一组属性：

var util = { 
    foo: bar, 
    blah: stuff 

等等。这是冗长和繁琐的。取而代之的是，它包装在一个IIFE，并把所有的初始化逻辑在此功能：

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

例如：

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; 

})();