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

Question

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

尝试在我的 return 语句中设置 app.mapYear 值时出现错误 "Cannot read property 'getUrlParam' of undefined"。

在 init 函数中设置 app.mapYear 似乎有效。我想知道为什么我无法在 return 语句中设置 app.mapYear。

我是不是漏掉了一些简单的东西？有没有更好的办法？如果我可以在我的 return.

中做到这一点，我希望防止在我的代码中偶尔设置对象属性

// 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 中，您在计算 utils.js 的内容和定义 app.utils 之前调用 getMapYear：

const mapYear = getMapYear();

因此，app.utils 是未定义的，您不能调用它的任何方法。当 utils.js 完成加载时，您必须调用 getMapYear：

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

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

Revealing module pattern, undefined property

javascript

revealing-module-pattern

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

Revealing module pattern, undefined property

javascript

revealing-module-pattern

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