Доступ к переменным javascript в пространстве имен из разных файлов

Question

Я пытаюсь написать «Загружаю стороннюю загрузку» Javascript, аналогичный Stripe, Disqus и другим. Идея состоит в том, чтобы получить доступ к переменной как конфигурации и иметь возможность взаимодействовать с ней.

Так, в голове моего приложения у меня есть 2 скрипта:

<script type="text/javascript" src="http:/domain/ks.js" async></script> 
<script type="text/javascript"> 
    Ks.setConfiguration("flow2"); 
</script> 

ks.js

if (document.readyState === 'interactive') { 
    // The document has finished loading. We can now access the DOM elements. 
    Kb.setup(); 
} 

var Kb = new function() { 
    // public 
    this.setConfiguration = function(key) { 
    var APP_KEY = key; 
    } 

    this.setup = function() { 
    checkConfiguration(APP_KEY); 
    internalFunction(); 
    }; 

    // private 
    var internalFunction = function() { 
    console.log("calling private function from namespace"); 
    }; 

    var checkConfiguration = function(key) { 
    // log message if key not set 
    console.log(key); 
    }; 
}; 

Проблема в том, что я не могу получить доступ к APP_KEY переменной в главном скрипте , То, что я ищу, - это асинхронный сценарий загрузки, настройка конфигурации, а затем взаимодействие с элементами конфигурации.

Answer 1

вы можете

Либо добавить this.getAppKey() но вы должны определить APP_KEY внутри var Kb = new function(), а не внутри крышки.

Он по-прежнему работает из-за способа var works, но для ясности кода добавьте его в область уровня «класс».

Или вы можете объявить его this.APP_KEY и получить к нему доступ от <instance>.APP_KEY.

Или вы можете сделать Kb() в модуль и havee в APP_KEY в сферу, где вы можете export it

Примеры:

somefile.js

var Kb = new function() { 
    var APP_KEY = null; // this is defined on a higher scope 
    this.PUBLIC_APP_KEY = null; // with this you can call directly the key if you need to access it 

    // public 
    this.setConfiguration = function(key) { 
    APP_KEY = key; 
    this.PUBLIC_APP_KEY = key; 
    } 

    this.getKey = function() { 
     return APP_KEY; 
    } 

    this.setup = function() { 
    checkConfiguration(APP_KEY); 
    internalFunction(); 
    }; 

    // private 
    var internalFunction = function() { 
    console.log("calling private function from namespace"); 
    }; 

    var checkConfiguration = function(key) { 
    // log message if key not set 
    console.log(key); 
    }; 
}; 

сейчас в какой-то другой файл, могут делать

if (document.readyState === 'interactive') { 
    var kb = Kb(); 
    kb.setConfiguration(<somekey>); 
    console.log(kb.getKey()); // <somekey> 
    console.log(kb.PUBLIC_APP_KEY) // <somekey> 
    // The document has finished loading. We can now access the DOM elements. 
    Kb.setup(); 
} 

Или, наконец, вы могли бы сделать что-то вроде этого

// somefile.js 
var key = "key"; 
// export it 
exports.API_KEY = key; 

и в каком-то другом файле

import { API_KEY } from "somefile.js" 

Answer 2

Попробуйте следующее:

<script type="text/javascript" src="http:/domain/ks.js?callback=setConfig" async></script> 
<script type="text/javascript"> 
    function setConfig() { 
    Ks.setConfiguration("flow2"); 
    } 
</script> 

setConfig должен вызываться один раз сценарий был загружен

Answer 3

Ваш APP_KEY локальна для function, поэтому вы не можете получить доступ.

var _AAP_KEY; //private 

this.setConfiguration = function(key) { 
    _AAP_KEY = key; 
} 

Вы должны иметь getter:

this.getConfiguration = function() { 
    return _AAP_KEY; 
}