javascript 如何提供 ECMAScript 5 (ES 5)-shim?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8732846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 04:24:46  来源:igfitidea点击:

How to provide ECMAScript 5 (ES 5)-shim?

javascripthtmlbrowserecmascript-5es5-shim

提问by ?ime Vidas

ECMAScript Fifth Edition (released December 2009) introduces a bunch of new methods (see this tablefor details). However, there still are older browsers out there which do not implement those new methods.

ECMAScript Fifth Edition(2009 年 12 月发布)引入了一系列新方法(有关详细信息,请参阅此表)。但是,仍然有一些较旧的浏览器没有实现这些新方法。

Luckily, there exists a convenient script (written in JavaScript) - ES5-shim- which implements those methods manually in environments where they don't exist.

幸运的是,有一个方便的脚本(用 JavaScript 编写)—— ES5-shim——它在这些方法不存在的环境中手动实现这些方法。

However, I am not sure how to provide ES5-shim... Should I just "give" it to all browsers, like so:

但是,我不确定如何提供 ES5-shim ......我是否应该将它“提供”给所有浏览器,如下所示:

<script src="es5-shim.js"></scipt>

Or should I include a check in order to only "bother" those browsers which really need it, like so:

或者我应该包括一个检查,以便只“打扰”那些真正需要它的浏览器,如下所示:

<script>
    if ( !Function.prototype.hasOwnProperty( 'bind' ) ) {
        (function () {
            var shim = document.createElement( 'script' );
            shim.src = 'es5-shim.js';
            var script = document.getElementsByTagName( 'script' )[0];
            script.parentNode.insertBefore( shim, script );
        }());
    }
</script>

(I'm using Function.prototype.bindto check if a browser implements all new ECMAScript 5 methods. According to the compatibility table which I linked above, bindis the "last bastion" when it comes to implementing ECMAScript 5 methods.)

(我Function.prototype.bind用来检查浏览器是否实现了所有新的 ECMAScript 5 方法。根据我上面链接的兼容性表,bind这是实现 ECMAScript 5 方法的“最后堡垒”。)

Of course, for this shim to be effective, it has to be executed beforeall other scripts, which means that we want to include the above mentioned SCRIPT elements early in the page (in the HEAD, before all other SCRIPT elements).

当然,为了使这个 shim 有效,它必须所有其他脚本之前执行,这意味着我们希望在页面的早期(在 HEAD 中,在所有其他 SCRIPT 元素之前)包含上述 SCRIPT 元素。

So, would this second example be a good way to provide ECMAScript 5-shim to browsers? Is there a better way to do it?

那么,第二个示例是向浏览器提供 ECMAScript 5-shim 的好方法吗?有没有更好的方法来做到这一点?

回答by tkone

ES5-Shim will only shim parts that the browsers don't implement, so just give it to all browsers. It'll handle the detection of what needs to be shimmed and what doesn't.

ES5-Shim 只会填充浏览器未实现的部分,因此只需将其提供给所有浏览器即可。它将检测哪些需要填充,哪些不需要。

But pay attention to the caveats listed on what shims don't work correctly in some instances. I've had issues with that in the past and it causes a ton of pain until you realize the answer was super simple...

但请注意在某些情况下垫片无法正常工作的注意事项。过去我遇到过这个问题,这会引起很多痛苦,直到您意识到答案非常简单......

回答by silversky

This seems to work for me:

这似乎对我有用:

<!--[if lt IE 9]><script src="java/es5-shim.min.js"></script><![endif]-->

回答by Kris Kowal

At present, the solution that works best with ES5-Shim is to use the library in all environments and allow it to detect which features it needs to patch at run-time. It would be even better to deliver it from a community CDN to maximize cross-site cache hits.

目前,最适合 ES5-Shim 的解决方案是在所有环境中使用该库,并允许它在运行时检测需要修补哪些功能。最好从社区 CDN 提供它以最大化跨站点缓存命中率。

That being said, there is an open opportunity to create systems that combines feature detection, agent fingerprinting, and dynamic bundling to automatically generate and deliver targeted shim subsets. The scope of the problem extends far beyond just ES5-Shim and could be applied to all sorts of shims.

话虽如此,但仍有机会创建结合特征检测、代理指纹识别和动态捆绑的系统,以自动生成和交付目标垫片子集。问题的范围远远超出 ES5-Shim,可以应用于各种 shim。