如何避免不同.js文件中的对象与函数命名冲突？

解决方案 #

方案1：控制脚本加载顺序（最推荐，从根源解决竞态问题） #

你已经验证过Google Analytics（以下简称GA）优先加载时无异常，所以只要强制GA加载完成后再加载leaflet.js即可完全规避冲突：

• 若你使用同步脚本加载，直接把GA的<script>标签放到leaflet.js的<script>标签之前即可，同步脚本会按书写顺序依次加载执行，不会出现竞态。
• 若你使用异步脚本加载，给GA添加加载完成回调，回调中再动态注入leaflet.js的脚本，示例代码如下：

// GA异步加载逻辑，加载完成后再加载leaflet
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.onload = function() {
  // 加载leaflet
  const leafletScript = document.createElement('script');
  leafletScript.src = '你的leaflet.js资源地址';
  document.body.appendChild(leafletScript);
};
m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

方案2：作用域隔离 #

如果不方便调整加载顺序，可以把GA的执行逻辑包裹在独立的闭包作用域中，避免内部变量被全局作用域的同名变量污染，同时开启严格模式禁止隐式全局变量声明：

(function() {
  'use strict';
  // 把你原本的GA初始化代码完整放到这个闭包内部
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
})();

方案3：全局错误捕获（兜底方案） #

如果前两种方案都无法落地，可以添加全局错误监听，过滤该特定报错避免影响页面其他功能执行：

window.addEventListener('error', (event) => {
  // 匹配GA抛出的特定错误
  if (event.message === 'Uncaught TypeError: a.slice is not a function' && event.filename.includes('google-analytics')) {
    event.preventDefault();
    event.stopImmediatePropagation();
    return false;
  }
}, true);

内容的提问来源于stack exchange，提问作者Troy Buerge