重构箭头函数以兼容 IE答案

【问题标题】：Refactor arrow function to be IE compatible重构箭头函数以兼容 IE
【发布时间】：2019-07-21 03:58:34
【问题描述】：

我有一个脚本来检查验证码的外观，但箭头函数在 IE 上是否失效。

function initListener() {

              // set a global to tell that we are listening
              window.recaptchaCloseListener = true

              // find the open reCaptcha window
              HTMLCollection.prototype.find = Array.prototype.find
              var recaptchaWindow = document
                  .getElementsByTagName('iframe')
                  .find(x=>x.src.includes('google.com/recaptcha/api2/bframe'))
                    .parentNode.parentNode



              // and now we are listening on CSS changes on it
              // when the opacity has been changed to 0 we know that
              // the window has been closed
              new MutationObserver(x => recaptchaWindow.style.opacity == 0 && onClose())
                  .observe(recaptchaWindow, { attributes: true, attributeFilter: ['style'] })

            }

有两行有问题：

.find(x=>x.src.includes('google.com/recaptcha/api2/bframe'))
                    .parentNode.parentNode

和：

new MutationObserver(x => recaptchaWindow.style.opacity == 0 && onClose())

如何重构这两行？

【问题讨论】：

IE 不仅会阻止箭头功能，它们还会停止includes()，甚至更多。不确定我会重构它们，而是编译它们以支持您的 IE 版本。你在捆绑你的客户端代码吗？网络包？吞咽？咕噜声？无论您使用什么，我都会通过 Babel 运行您的所有 js，并为 ie >= 10 设置 Babel（如果您支持那么久。MS 不再支持）。 Babel 将为您处理所有重构，使其向后兼容旧版浏览器。
@Steve-Cutter-Blades，我也不使用，它是一个 worpress 安装，所以 js 被编写，以及原始 js，然后排队。我下面的解决方案解决了所有问题，只需要稍微重构和两个 polyfill。
所以，等等。这些是你的js文件，对吧？你正在注入一个wordpress网站？您仍然可以先编译文件，如果您必须支持旧版浏览器，那么我强烈建议您这样做。
@Steve-Cutter-Blades，我对这一切都很陌生。我做过的唯一编译是从 Materialize 中剔除未使用的 JS 组件（这是我使用的 css 框架）。否则我从不需要（或知道为什么需要）编译。
除了允许您使用现代 ES 代码之外，编译还可以帮助您管理多个依赖项并避免重复，将您的 js 代码缩减到在目标浏览器中使用所需的最低限度，并减少整体下载文件的占用空间，以加快加载和渲染时间。（在移动设备中尤其重要）

标签： function internet-explorer ecmascript-6

【解决方案1】：

此解决方案需要 .include() 和 Array.from() 的 polyfill，如下所示：

Array.from on the Internet Explorer

ie does not support 'includes' method

以及更新后的代码：

函数 initListener() {

              // set a global to tell that we are listening
              window.recaptchaCloseListener = true

              // find the open reCaptcha window

                    var frames = Array.from(document.getElementsByTagName('iframe'));
                    var recaptchaWindow;

                    frames.forEach(function(x){

                        if (x.src.includes('google.com/recaptcha/api2/bframe') ){
                            recaptchaWindow = x.parentNode.parentNode;
                        };

                    });

              // and now we are listening on CSS changes on it
              // when the opacity has been changed to 0 we know that
                // the window has been closed

                new MutationObserver(function(){
                    recaptchaWindow.style.opacity == 0 && onClose();
                })
                  .observe(recaptchaWindow, { attributes: true, attributeFilter: ['style'] })

            }

【讨论】：