javascript - Magento 2 : How to call js Function that is in my Require. phtml 文件中的 js 文件

Question

我的主要问题是使用 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">

Answer 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 值的代码中存在对 .toString() 的隐式调用，因此 RequireJS 在相同的情况下看到您的数组就好像您只是放置了它包含的单个字符串而不是数组。如果您尝试使用包含多个元素的数组，则会遇到麻烦。