モジュールのパターンを表示、未定義のプロパティ

Question

私はのapp.jsとのutils.jsという2つのファイルをGulpを介してビルド時に一緒に連結しています。

戻り値の中にapp.mapYear値を設定しようとすると、「未定義のgetUrlParamプロパティを読み取れません」というエラーが表示されます。

の設定機能の中にapp.mapYearが設定されているようです。私はなぜ私がapp.mapYear私のリターンステートメントに設定することができないのだろうかと思っています。

私はここで何かが欠けていますか？より良い方法がありますか？私は私のリターンでそれを行うことができれば、私のコード全体にわたってオブジェクトのプロパティを散発的に設定するのを避けることを望んでいます。

// app.js 
//***************** 
'use strict'; 

var app = app || {}; 
app = (function() { 

    const getMapYear =() => { 
     return app.utils.getUrlParam('year'); 
    }; 

    const mapYear = getMapYear(); 

    const init =() => { 
     //init offcanvas menu 
     $(document).foundation(); 

     // app.mapYear = mapYear(); 
    }; 

    return { 
     init, 
     mapYear 
    }; 

})(); 

$(function() { 
    app.init(); 
}); 


utils.js 
//***************** 

var app = app || {}; 

app.utils = (function() { 

    const getUrlParam =() => { 
     console.log(document.location.search); 
     return document.location.search; 
    } 

    return { 
     getUrlParam 
    }; 

})(); 

お時間をありがとうございました！

編集：同じ問題を抱えている人は、ここで回答があれば解決した方法があります。

コンパイルすると、utils.jsが先に続き、app.jsが続きます。

return { 
    init, 
    utils: app.utils, 
    mapYear: getMapYear() 
}; 

Answer 1

は動作します：あなたは `app.utils`を定義している

//utils.js 
 
//***************** 
 

 
var app = app || {}; 
 

 
app.utils = (function() { 
 

 
    const getUrlParam =() => { 
 
    console.log(document.location.search); 
 
    return document.location.search; 
 
    } 
 

 
    return { 
 
    getUrlParam 
 
    }; 
 

 
})(); 
 

 

 
// app.js 
 
//***************** 
 
'use strict'; 
 
//   |-- app contains the definition of (utils.js). 
 
var app = app || {}; 
 
app = (function() { 
 

 
    const getMapYear =() => { 
 
    return app.utils.getUrlParam('year'); // You can use «app.utils». 
 
    }; 
 

 
    const mapYear = getMapYear(); 
 

 
    const init =() => { 
 
    //init offcanvas menu 
 
    // $(document).foundation(); 
 

 
    // app.mapYear = mapYear(); 
 
    }; 
 

 
    return { 
 
    init, 
 
    mapYear, 
 
    app 
 
    }; 
 

 
})(); 
 

 
$(function() { 
 
    app.init(); 
 
    console.log(app); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

app.jsでは、あなたがutils.jsのcontetns前getMapYearを呼んでいることは評価されているとapp.utilsが定義されています：

const mapYear = getMapYear(); 

したがって、app.utils app.jsマイreturn文は次のようになります定義されておらず、そのメソッドを呼び出すことはできません。

// in the app.js closure 
const getMapYear =() => { 
    return app.utils.getUrlParam('year'); 
}; 

const init =() => { 
    //init offcanvas menu 
    $(document).foundation(); 

    app.mapYear = getMapYear(); // call getMapYear later  
}; 

はそれのメソッドを呼び出すときapp.utilsオブジェクトがすでに存在することを確認してください：utils.jsの読み込みが完了したときは、getMapYearを呼び出す必要があります。

注：：app.init()を呼び出すと、この方法ではapp.mapYearが存在します。このためには