两个JS库之间的代码冲突

Question

我正在尝试在一个网页上使用两个不同的库-Materialize.css和JQuery EasyUI-但它们的代码似乎相互干扰，并且遇到了错误。我有什么办法可以确保它们的代码不会相互冲突并且可以分别运行？

我想在这里使用iframe可能是一个解决方案，但这会给我带来其他问题。我还有其他方法可以确保它们在同一页面上和谐运行吗？

编辑：我应该指出，我正在页面的两个不同部分中使用每个库的功能。更具体地说，Materialize.css用于导航栏，文本和页面的一般外观，而我使用JQuery EasyUI只是为了显示可编辑的数据网格。

Answer 1

通常，不可能防止您自己未编写/管理的库之间发生冲突。如果它们没有防止冲突的方法（例如jQuery的jQuery.noConflict()），那么您就会遇到问题，除非您使用Webpack之类的模块捆绑程序，该捆绑程序可以在不同的别名下加载模块，从而他们没有冲突。

Answer 2

Materialize和jQuery都使用$前缀。代替使用$.noConflict();，尝试将jQuery分配给新变量作为前缀：

var jq = $.noConflict();

然后，您将使用带有变量名作为前缀的jquery，例如：

jq("div").click(function(){
    //do something
});