揭示模块模式，未定义属性

Question

我有两个文件， app.js 和 utils.js ，它们通过Gulp在构建时连接在一起。

我在尝试在return语句中设置app.mapYear值时收到错误“无法读取未定义的属性'getUrlParam'。

在init函数中设置 app.mapYear 似乎有效。我想知道为什么我无法在我的return语句中设置 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。我在app.js中的return语句如下所示：

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

Answer 1

在app.js中，您在评估getMapYear的竞争并且已定义utils.js之前致电app.utils：

const mapYear = getMapYear();

因此，app.utils未定义，您无法调用它的任何方法。 getMapYear完成加载后，您必须致电utils.js：

// 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对象已存在。

注意：但是，在此方法中，app.mapYear仅在您调用app.init()后才存在。

Answer 2

按此顺序可行：

//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>