如何解决jquery与zepto冲突问题

Posted 2023-05-13

解决方法参考 ：
先引入zepto
jQuery.noConflict();
jQuery(function($)
//使用jquery $
);
$...//zepto的$

先引入jQuery
jQuery(function()
jQuery("tagname")..//jquery 方法
);
$..//zepto 参考技术A 估计是命名$()冲突吧。$是jQuery(注意第一个字母小写)的别名，所有使用$的地方也都可以使用JQuery来替换，
如$('#msg')等同于jQuery('#msg')的写法。另外：
var $j=JQuery.noConflict();
$j('#msg').hide();//此处$j就代表JQuery。 参考技术B 估计是命名$()冲突吧。$是jQuery(注意第一个字母小写)的别名，所有使用$的地方也都可以使用JQuery来替换， 如$('#msg')等同于jQuery('#msg')的写法。另外： var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery

如何从 Zepto 回退到 Google CDN jQuery 到本地 jQuery？

【中文标题】如何从 Zepto 回退到 Google CDN jQuery 到本地 jQuery？

【英文标题】：How to fallback from Zepto, to Google CDN jQuery, to local jQuery?

【发布时间】：2012-11-19 00:57:40

【问题描述】：

我看到过一些页面指导或询问如何从 Zepto 回退到 jQuery（尤其是 IE），如 here on SO 和 Zepto.js official page。 我还看到了有关如何从 Google 托管的 jQuery 回退到本地站点 jQuery 的示例，如 Modernizr.load doc page。

我的问题是，我如何将这两件事放在一起？也可能不使用 Modernizr.load，只使用正确的 <script> 块？

这是我想出的，但 IE 似乎永远找不到 Google 托管的版本。另外，我不确定Zepto = jQuery 分配是否正常工作。

<script>
    document.write('<script src=' +
        ('__proto__' in  ? 
            'js/vendor/zepto.min' : 
            'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min') +
        '.js><\/script>');
</script>
<script>
    if (window.jQuery)  
        window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    
    else
     /* here jQuery could be rightly undefined because Zepto is loaded, 
         so this could be wrong. */
        document.write('<script src=' +
            'js/vendor/jquery-1.8.0.min' +
            '.js><\/script>');
    
</script>
<script>
    if (window.jQuery)  
        window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    
    else
    
        /* same problem as before */
        console.error('Zepto nor jQuery available!');
    
</script>

有没有更好的方法？助教

编辑

@Ashfame 回答后，这是我用过的：

<!-- Load local Zepto.js or (as a fallback) jQuery from Google CDN or (as a fallback) local jQuery -->
<script>
    document.write('<script src="' + ('__proto__' in  ? 
        'js/vendor/zepto' : 
        'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery') + 
        '.min.js"><\/script>')
</script>
<script>
    window.Zepto || window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>');
</script>

我无法使用 Google CDN 的无协议/无方案 URL，因为某种原因它在我的本地 IE9 上不起作用（它等待了很多，然后总是回退到本地）。

我不再为Zepto 和jQuery 起别名：只是在JS 代码中使用了$。

我似乎没有遇到任何与 jQuery 加载乱序 w.r.t 相关的问题。依赖代码。

【问题讨论】：

我也试过//ajax.googleapis.com/...，没有协议前缀

也尝试了this snippet，可能是用户@Sébastien Grosjean - ZenCocoon：它似乎工作正常，但后来我不想使用 Cloudflare CDN，也不想使用任何其他 Zepto CDN。跨度>

也试过Modernizr.load，但不知何故，它似​​乎有点太多了。当然，我可能错了。

【参考方案1】：

为了尝试这种技术，我先试试这个：

我根据 jQuery CDN 关闭时 HTML5 Boilerplate 如何加载本地回退代码快速编写了这篇文章。

这可能行不通，但我看不出有什么理由现在不应该这样做。想试一试吗？

<script>document.write('<script src="' + ('__proto__' in  ? 'cdn/zepto.min' :  'cdn/jquery.min') + '.js">\x3Cscript>');</script>
<script>window.Zepto || window.jQuery || document.write('<script src="cdn/jquery.min.js">\x3C/script>')</script>
<script>window.Zepto || window.jQuery || document.write('<script src="local/jquery.min.js">\x3C/script>')</script>

唯一不能很好处理的情况是当用户使用非 Zepto 兼容的浏览器如 IE 并且同时 jQuery CDN 关闭时，它会尝试再次加载 jQuery CDN，然后最终回退到 jQuery 的本地副本。

---

但实际上，如果我要实现这一点，我只会有 1 个单一的后备到本地。比如尝试检查我们是否可以加载 Zepto 或 jQuery，如果它们都没有加载，则在下一步中加载本地库。最好有一些工作到位，而不是试图优化不会带来那么多收益的东西。明智地优化！上述技术 #1 很可能有自己的跨浏览器兼容性问题。

---

我刚刚发现了这个问题，即使这种技术（HTML5 Boilerplate & Modernizr 正在使用和推荐）也不可靠。检查这个问题 - document.write fallback causing jQuery to load out of order

该问题的另一个解决方案是关于 Yepnope 库。你可以检查它是如何工作的 - https://***.com/a/12323328/551713

最后，我要结束这个答案，除非您正在构建完全是您的代码的东西，例如不会因为用户在页面上添加更多内容的可能性而陷入困境，否则不要为此烦恼之所以如此，是因为您将很快遇到此类技术的问题，因为其他脚本可能会乱序加载并导致问题，而如果它是您的所有代码，您可能可以根据您的后备逻辑使所有内容加载和工作。

【讨论】：

感谢您的回答。最后我使用了你的版本，但只是删除了谷歌 CDN 上的双重尝试。在我的情况下：如果它第一次工作，很好，否则为了速度（使用 CDN 的主要目的），它只会使用本地 jQuery。