如何避免javascript命名空间冲突？

Posted 2023-02-22

【中文标题】如何避免javascript命名空间冲突？

【英文标题】：How to avoid javascript namespace conflict?

【发布时间】：2013-03-17 23:50:41

【问题描述】：

我有一个企业应用程序，它在全局命名空间中导入了一些带有一些函数的 java 脚本库（比如说 A）。

我们的客户可以扩展我们的平台并导入 jquery，这将导致命名空间冲突。

由于 jquery 非常流行并且每个客户都会使用它，因此我可以帮助客户避免命名空间冲突的最佳方法是什么。

如何更改库 A 的命名空间？什么是最方便和最安全的方法。

【参考方案1】：

如果您想使用第三方 javascript 库的组合，您也可以这样做： 基本上为每个对象创建另一个命名空间；

if(window.jQuery && !(window.MyjQuery))
  var window['MyjQuery'] =  window.jQuery;
  var j$ = window['MyjQuery']; //alias

  j$(document).ready(function()
    //code goes here...
  );

【参考方案2】：

使用这个结构：

(function ($, a, b) 
   // ... place your code here   
)(jQuery, myLibraryA, otherLibraryB);

这就是所谓的“匿名函数”，它创建一个局部作用域（在内部声明的所有变量和函数都是局部的，不会干扰其他代码）。它导入三个库，jQuery、myLiberayA 和 otherLibraryB，并且在本地范围内，它们在名称 $、a 和 b 下可见。

【讨论】：

所以看看这对于使用不同的 jQuery 版本是如何工作的，看看这个post

【参考方案3】：

AdSafe 可能对您来说也很有趣，请参阅 http://www.adsafe.org/ 了解更多信息。

祝你好运

【参考方案4】：

您应该构建一个不允许您的客户影响全局空间的界面。

将客户的代码封装在自己的函数中。

(function () 
  var window, global;  // Keep these private to this function
  // Customer code here
])();

您将需要为他们提供一个接口来访问您的功能，但您如何做到这一点取决于您的应用程序，因此我无法提供示例。它可能就像传入一个参数一样简单，该参数可以访问包含需要由该客户代码操作的对象的对象。

现在，这并不适用于所有情况。显然，您极大地限制了他们的代码可以访问的内容。您需要自己提供对该功能的访问权限。

【讨论】：

在匿名函数中声明窗口和全局有什么意义？难道本地作用域还不能看到window等全局属性吗……？

【参考方案5】：

对于 jQuery，最简单的方法是使用jQuery.noConflict() 来获取新的选择器变量而不是 $。

var j$ = jQuery.noConflict();

j$('#test-id')