JavaScript関数は別の関数スコープの変数にアクセスできません

Question

javscriptでスライダを作成しようとしています。私は2つの関数、最初にparseDom()、DOMから要素を取得する責任がある必要があります。 2番目のものconfigureRange()は、minとmaxの値のような範囲属性を設定する必要があります。両方の関数は、window.onload変数に割り当てられた匿名関数の内部で呼び出されます。これらの関数内の変数が異なるスコープにあるため

function parseDom() { 
    var main = document.getElementById('main'); 
    main.classList.add('red'); 
    // red class added - main selector is ok 
    var rangeContainer = main.querySelector('.range-container'); 
    rangeContainer.classList.add('green'); 
    // green class added - rangeContainer selector is ok 
    var rangeInput = rangeContainer.querySelector('.range-input'); 
    rangeInput.classList.add('crosshair'); 
    // crosshair class added - rangeInput selector is ok 

} 

function configureRange(){ 
    rangeInput.classList.add('pointer'); 
    rangeInput.setAttribute('min', '0'); 
} 

window.onload = function(){ 
    parseDom(); 
    configureRange(); 
} 

はしかし、parseDom()からの変数は、configureRange()からaccesedすることはできません。だからconfigureRange()のコードが動作しません。私は2つではなく1つの機能ですべてを行うことができますが、これはコードを乱雑にするでしょう。優れたモジュールソリューションを作成するにはどうすればよいですか？

コードはここにある： https://codepen.io/t411tocreate/pen/oeKwbW?editors=1111

Answer 1

最も簡単なものはparseDomはそれを呼び出すことによって、それが必要configureRange情報を渡すために、おそらくです：

...またはコントローラ機能を有することにより、（ parseAndConfigure、どんなものでも）入力をルックアップし、両方の関数に渡します。

---

サイドノート：小さな機能を維持し、名前を確保するという点では、それが何をするかの指標である（あなたの目標のようだとして）、parseDomは何かを解析しませんし、それだけで特定するだけではありません関連するDOM要素（クラスも追加します）。おそらく3つの機能：getDom,addClasses、およびconfigureRangeまたはそれに類するもの。次に：

window.onload = function() { 
    var dom = getDom(); 
    addClasses(dom); 
    configureRange(dom); 
} 

...などです。

Answer 2

あなたが好きなように多くの関数に引数として渡す、その後、.onloadの内側にあなたの変数を宣言することができます：

function parseDom(main, rangeContainer, rangeInput) { // <= arguments 
    main.classList.add('red'); 
    rangeContainer.classList.add('green'); 
    rangeInput.classList.add('crosshair'); 
} 

function configureRange(rangeInput){ // <= argument 
    rangeInput.classList.add('pointer'); 
    rangeInput.setAttribute('min', '0'); 
} 

window.onload = function(){ 
    var main = document.getElementById('main'), 
    rangeContainer = main.querySelector('.range-container'), 
    rangeInput = rangeContainer.querySelector('.range-input'), 
    // other elements 
    parseDom(main, rangeContainer, rangeInput); // <= pass as arguments 
    configureRange(rangeInput); // <= pass as argument 
} 

Answer 3

は、あなたがオブジェクトに要素を維持し、その後であるためには、そのオブジェクトを返すことができますどこか他の再利用

function parseDom() { 
    var els = (function(d) { 
    var main   = d.getElementById('main'), 
     rangeContainer = main.querySelector('.range-container'), 
     rangeInput  = rangeContainer.querySelector('.range-input'); 

    return {main, rangeContainer, rangeInput}; 
    })(document); 

    els.main.classList.add('red'); 
    els.rangeContainer.classList.add('green'); 
    els.rangeInput.classList.add('crosshair'); 

    return els; 
} 

function configureRange(els) { 
    els.rangeInput.classList.add('pointer'); 
    els.rangeInput.setAttribute('min', '0'); 

    return els; 
} 

window.onload = function() { 
    var elems = parseDom(); 
    configureRange(elems); 
} 

Answer 4

最も簡単な方法は、多分、代わりにそのupdateDomを呼び出して、トップレベル関数などでセレクターを解析し、離れparseDom機能からセレクタ抽象的になります

function updateDom(main, rangeContainer, rangeInput) { 
    main.classList.add('red'); 
    // red class added - main selector is ok 

    rangeContainer.classList.add('green'); 
    // green class added - rangeContainer selector is ok 

    rangeInput.classList.add('crosshair'); 
    // crosshair class added - rangeInput selector is ok 

} 

function configureRange(rangeInput){ 
    rangeInput.classList.add('pointer'); 
    rangeInput.setAttribute('min', '0'); 
} 

window.onload = function(){ 
    var main = document.getElementById('main'), 
    rangeContainer = main.querySelector('.range-container'), 
    rangeInput = rangeContainer.querySelector('.range-input'); 

    updateDom(main, rangeContainer, rangeInput); 
    configureRange(rangeInput); 
}