如何不使用箭头函数重写JS方法，适配不支持该语法的旧版Chromium 40浏览器

适配Chromium 40的改写代码 #

核心方法改写 #

var animateCSS = function(element, animation, prefix) {
  // 兼容处理默认参数
  prefix = prefix || 'animate__';
  return new Promise(function(resolve, reject) {
    var animationName = prefix + animation;
    var node = document.querySelector(element);

    node.classList.add(prefix + 'animated', animationName);

    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(prefix + 'animated', animationName);
      // 手动移除监听器，替代不兼容的once配置
      node.removeEventListener('animationend', handleAnimationEnd);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd);
  });
};

调用方法改写 #

animateCSS('.my-element', 'bounce');

// 带回调的调用写法
animateCSS('.my-element', 'bounce').then(function(message) {
  // 动画结束后执行的逻辑
});

主要修改说明 #

• 所有箭头函数全部替换为ES5标准的普通function声明
• 移除了函数参数默认值语法，改为函数内部判断赋值兼容默认参数
• 替换ES6模板字符串为普通字符串拼接方式
• 移除addEventListener的{once: true}配置，改为手动移除监听器适配旧版浏览器
• 把const声明替换为var，兼容更严格的旧版ES标准环境

内容的提问来源于stack exchange，提问作者Newton Cazzaro