javascript - 如何使用 JavaScript get 和 set 进行 polyfill

Question

我正在尝试弄清楚如何为 dataset 制作 polyfill|我想我需要使用 get和 set定义函数。尝试将 get/set 添加到 Element.prototype 时，get/set 的语法会怎样？ MDN 上的示例显示了一个局部变量，但是如何使用它们添加到 Element.prototype 中？

Object.defineProperty {Element.prototype, "dataset", 
   get: function() { /* return value */ }
 , set: function(newVal) { /* set somehow w/ setAttribute or jQuery */ }
}

我想将 getter/setter 方法路由到 $.attr()上面的示例我只是将它们与 .data() 相关联或者(更好)原生的 setAttribute 和 getAttribute。有一个 polyfill for dataset here但它只支持符合标准的浏览器(不支持 IE8 或更低版本)。我想做一个避免使用 __defineGetter__ 的方法(我认为这是 IE8 中的问题)。我想defineProperty可能是合适的方法，我可以使用 ES5 Shim填充它。我将如何使用 defineProperty做这个？

Answer 1

是的，Object.defineProperty 在可用的地方工作。我有 made such a polyfill基于 Eli Grey 的原创，通过避免全局/非标准原型(prototype)覆盖和使用 CamelCasing 正常工作(并在缺少 defineProperty 支持的地方使用他的 Xccessors polyfill)进行了一些增强。

更新:虽然在这种情况下对您来说无关紧要，但我可能会提到 defineProperty polyfill 仅适用于 IE8 中的 DOM 对象。它在 IE8 之前不起作用，因为在那之前不能覆盖 DOM 原型(prototype)——除非你真的想亲自动手并且 build your own ，但要彻底做到这一点将是一项艰巨的任务。此外，dataset polyfill(我的和原始的)目前只能以 polyfill、标准友好的方式从 Element.prototype.getAttribute( ) 并从那里开始工作。 Element.prototype.getAttribute 还需要 polyfilling 以确保它获得最新的数据集更新版本等。