haizlin/fe-interview

[软技能] 第113天 shim和polyfill有什么区别？它们分别有什么用？

Opened this issue · 4 comments

haizhilin2013 commented

第113天 shim和polyfill有什么区别？它们分别有什么用？

HCLQ commented

首先 polyfill是shim的一种.目的都是在没有相关API的环境上顺利执行代码
区别是:
shim:是js库, 用库定义的api去执行一些操作, 如jquery,$.ajax,底层用ActiveXObject或XMLHttpRequest实现,用户不直接用标准API,而是用库定义的api,具体环境判断和实现交给库.
polyfill: 用js模拟标准api，抹平环境差异，用户仍是使用标准api
如发现window.requestAnimationFrame不存在,polyfill会用setTimeout覆写window.requestAnimationFrame
polyfill的好处在于，可以动态监测浏览器版本,低版本加载,而在高本版浏览器可以不加载这段js，用户代码不修改直接可用
shim则是无论浏览器版本都要加载这段js，因为用的api是库定义的

  • 👍12
  • 👀1
hsiaosiyuan0 commented

@HCLQ

用户不直接用标准API,而是用库定义的api,具体环境判断和实现交给库.

这里有个也叫做 shim 的包 es-shim，它里面直接在原型上做的 monkey-patch，比如这里。开发者用的时候也是直接作用的 the new APIs

首先问题模棱两可，是比较 shim 和 polyfill 的具体实现、还是就它们作为编程术语而言有什么不同。

如果从它们作为编程术语的角度而言，shim 和 polyfill 之间真的有明确的界限的话，那么 es-shim 估计要改名成 es-polyfill 了

gousern commented

不同概念

image

polifilla 是补墙的品牌，缝补老旧的浏览器提高可用性。

shim 像是鞋垫，依需求使用不同的鞋垫。

比如我使用的版本管理工具，将安装内安装的 node 称作 shim-versions，可以切换使用不同的版本。

t ) asdf shim-versions node                                                                     
nodejs 12.9.0
nodejs 13.13.0
bozaigao commented

polyfill作为js修补库是shim中的一种，主要用于处理不同浏览器对js的兼容性问题；
shim就跟 jQuery的 $.ajax 一样，主要磨平不同平台的差异性，提供一致对外的接口调用；