Zepto 和 jQuery 有条件地加载 IE答案

【问题标题】：Zepto and jQuery conditionally loading for IEZepto 和 jQuery 有条件地加载 IE
【发布时间】：2013-07-13 21:23:24
【问题描述】：

好的，所以我现在这样调用我的 Zepto -

<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/zepto.js"><\/script>')</script>

当然，Zepto 不是为 IE 工作的，所以我需要为这个浏览器回退到 jQuery。

我猜我的 IE 回退将与此类似 -

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/***/1.9.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.js"><\/script>')</script>

Zepto 建议这样做 -

<script>
  document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>

如何将两者联系在一起？

【问题讨论】：

标签： jquery internet-explorer zepto fallback

【解决方案1】：

可能最容易使用像 yepnope.js 这样的脚本加载器。我试了一下：

<script>
    var fallback;
    if ('__proto__' in {}) {
        document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"><\/script>');
        fallback = 'zepto';
    } else {
        document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
        fallback = 'jquery';
    }
</script>
<script>
    window.$ || document.write('<script src="js/vendor/' + fallback + '.js"><\/script>');
</script>

不幸的是，我不得不创建一个全局变量并分离出脚本，以便第一个 document.write() 被阻塞。也可以只使用document.createElement('script')，然后在script.onerror上执行回退语句

【讨论】：

【解决方案2】：

对赫尔曼的回答有所改进：

<script>
  if ( '__proto__' in {} ) {
    document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"><\/script>');
    selfHosted = 'zepto';
  } else {
    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>');
    selfHosted = 'jquery';
  }
</script>
<script>
  window.$ || document.write('<script src="js/vendor/' + selfHosted + '.js"><\/script>');
  delete selfHosted;
</script>

这会清理全局变量。

这种方法有一个问题：CDNJS 的 Zepto 不包含 Foundation 使用的附加模块（请参阅：https://github.com/madrobby/zepto#readme）。这将破坏工具提示 - 并且很可能会破坏其他 JS 插件。所以请使用 Foundation 自己的 Zepto，它带有所有必要的模块：

<script>
  if( '__proto__' in {} ) {        
    selfHosted = 'zepto';
  } else {
    document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>');
    selfHosted = 'jquery';
  }
</script>
<script>
  window.$ || document.write('<script src="js/vendor/' + selfHosted + '.js"><\/script>');
  delete selfHosted;
</script>

【讨论】：