Magento 2：如何从 phtml 文件调用我的 Require.js 文件中的 js 函数答案

【问题标题】：Magento 2: How to call js Function that is in my Require.js file from phtml fileMagento 2：如何从 phtml 文件调用我的 Require.js 文件中的 js 函数
【发布时间】：2017-07-06 17:25:11
【问题描述】：

我的主要问题是使用 require.js 时，我的函数不再是全局的。因此，当我从我的 phtml 文件中调用它时，找不到它。知道在我的 js 文件中创建全局函数的正确方法是什么吗？我尝试了多种在网上找到的方法/答案，但似乎没有任何效果。有什么建议吗？

这是我的 js 文件

define([
  'jquery'
], function ($) {

  return function (config) { 
    console.log(config);
  }

  function initMap() {
    console.log('initMap is being called');
  }
});

我的 requirejs-config.js 文件：

var config = {
    map: {
        '*': {
            'gslMap': ['Gauge_StoreLocator/js/app']
        }
    }
};

我的 phtml 文件：回调函数“initMap”在最后被调用

<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $this->getGoogleApi(); ?>&callback=initMap">

【问题讨论】：

标签： javascript magento requirejs magento2

【解决方案1】：

如果你必须让你的initMap函数全局化，你可以故意将它泄漏到全局空间中：

define([
  'jquery'
], function ($) {

  return function (config) { 
    console.log(config);
  }

  function initMap() {
    console.log('initMap is being called');
  }

  // Deliberately leak initMap into the global space.
  window.initMap = initMap;
});

请注意，RequireJS 在浏览器中使用时总是异步操作。因此，如果您只是将script 标签放在某处并希望获得最好的结果，那么您将遇到麻烦。如果它是由首先使用initMap 加载您的模块的代码动态添加的，那么您会没事的。

请注意，map 不接受数组。另一方面，paths 确实接受数组作为值，但我没有看到只有一个元素的数组的意义。（数组旨在提供后备。）由于您在map 中提供的数组，RequireJS 不会大声失败的原因是在 JavaScript 中 ["foo"].toString() === "foo" 并且在处理map 的值，因此 RequireJS 以相同的方式查看您的数组，就好像您刚刚放置了它包含的单个字符串而不是数组一样。如果您尝试使用包含多个元素的数组，则会遇到麻烦。

【讨论】：