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

ECMAScript第五版(2009年12月发布)引入了一些新的方法(详见本表 )。 但是,那里还有一些旧的浏览器没有实现这些新的方法。

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

但是,我不知道如何提供ES5的垫片…我应该只是“给”它的所有浏览器,如下所示:

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

还是应该包含一个支票,以便仅仅“打扰”那些真正需要它的浏览器,如下所示:

 <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> 

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

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

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

ES5-Shim只会筛选浏览器不执行的部分,所以只需将其提供给所有浏览器即可。 它会处理检测什么需要被扫描,什么不是。

但要注意在某些情况下垫片不能正常工作的问题。 我过去遇到过这个问题,直到你意识到答案是非常简单的,这会导致很多的痛苦。

这似乎为我工作:

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

目前,ES5-Shim最适合的解决scheme是在所有环境中使用该库,并允许它在运行时检测它需要修补哪些function。 从社区CDN提供它可能会更好,从而最大限度地提高跨站点caching命中率。

这就是说,有一个开放的机会来创build系统,结合function检测,代理指纹和dynamic绑定,自动生成和提供有针对性的垫片子集。 问题的范围远远超出了ES5-Shim,可以应用于各种垫片。