哥们儿，今天想聊聊一个老生常谈，但是每次碰上都让人挠头的问题——`layui` 和 `jQuery` 冲突了，这玩意儿真能把人搞疯。我之前有个小项目，一个后台管理系统，本来想着随便搞搞，快点上线完事儿。前端部分，我图省事，直接就上了`layui`，因为它自带一套样式和组件，用起来方便。结果，好日子没过几天，问题就来了。
本站为89游戏官网游戏攻略分站，89游戏每日更新热门游戏，下载请前往主站地址:www.gm89.icu
刚开始，页面上有些交互功能，像什么弹窗、表格排序，都能正常跑。后来项目需求变了，要加一些比较复杂的图表，`layui`自带的图表功能不太够用，我就想着，干脆直接引入一个独立的`jQuery`库，然后配合一些图表插件来搞定。心想，这不就是加个JS文件的事儿嘛能有啥大问题？结果，这一加，就把我直接推进坑里了。
文件都引好了，页面一刷新，图表倒是出来了，但是，之前`layui`好多功能开始罢工了！你点那个弹窗按钮，没反应；表格里的复选框，点上去跟没点一样；就连那个导航菜单，鼠标放上去都没动静了。我当时就懵了，赶紧打开浏览器控制台，一看，一堆红字报错，好多地方都提示说`$`未定义，或者`$ is not a function`。我当时脑子嗡嗡的，心里想，这特么搞什么鬼？我`jQuery`都引了！
我从头到尾仔细检查代码，是不是哪个地方手抖写错了变量名。来来回回看了好几遍，没看出毛病。然后开始怀疑是不是引用的顺序错了，就把我自己加的`jQuery`文件和`layui`的JS文件各种调换顺序，一会儿把`jQuery`放前面，一会儿放后面。试来试去，还是不行，要么是我的图表出问题，要么是`layui`的功能废了，就没有同时都好使的时候。那几天，真是头疼欲裂，项目进度也卡住了。
后来我实在没办法了，硬着头皮去网上各种搜资料，看别人的经验分享。当时就看到了好多人说`layui`本身就带了一个它自己精简版的`jQuery`，如果再单独引入一个完整的`jQuery`，就容易造成冲突。这俩“大哥”都想霸占那个全球唯一的`$`符号，结果就打起来了。看到这儿，我心里一下就明白了，这不就是“一山不容二虎”嘛
解决冲突，我主要分了两步走：
- 第一步：调整引入顺序和使用 `noConflict`。 我把我自己单独引入的那个完整版`jQuery`放在了``标签的最前面加载，确保它最先被浏览器解析。紧跟在我的`jQuery`文件后面，我立即使用了一个关键的函数：`*()`。这个函数的作用就是，把`$`这个符号的控制权，“让”给其他需要它的库，然后把`jQuery`对象本身赋值给一个我自己定义的新变量，比如我当时就直接给了一个`myJQuery`。这样一来，我的那个完整版`jQuery`就可以用`myJQuery`来操作DOM了，而`$`这个符号，就可以放心地留给`layui`去用了。
- 第二步：明确指定`layui`模块的使用方式。 当我加载完`*`之后，在我的代码里，凡是涉及到调用`layui`模块的地方，我就不再直接用`$`来操作了。`layui`自己会用它内部的`jQuery`来处理这些。而我那些需要完整`jQuery`功能的地方，就统一都用`myJQuery`来写。比如，如果我要用`layui`的弹窗，就直接`*(['layer'], function(){ var layer = *; *(...); });`。如果我要用我的`myJQuery`来操作DOM，比如给某个按钮绑定点击事件，就是`myJQuery('#myButton').click(function(){ ... });`。
这一通操作下来，我小心翼翼地保存文件，然后再次刷新页面。奇迹出现了！我的图表，好端端地显示着，一点问题没有。然后我再去点`layui`的弹窗按钮，它也咻地弹出来了；表格的排序、复选框，一切都恢复正常了。当时那种感觉，真叫一个如释重负，感觉把心头一块大石头给搬走了。整个世界都清净了。
从那以后，我再遇到这种多框架共存的情况，都会第一时间去考虑它们内部的`jQuery`版本和冲突问题。这个`noConflict()`，真是个救命稻草。很多时候，我们觉得是自己的代码写错了，可能只是这些库之间的小脾气没搞明白。分享出来，希望能给遇到同样问题的朋友一点启发，少走一些弯路，别再像我一样头疼。