部分手机浏览器不支持ES6

摘要：本文仅是记录在开发某个项目时遇到问题的一些调试思路及其解决方法，不足以道也。

最近在开发一个响应式的网站并且链到商户后台，主要采用Bootstrap3、Jquery、foundation-datepicker、SweetAlert2来开发。
主要功能有功能介绍、产品购买、订单查询、商户后台管理等，PC端测试良好，当开启局域网在移动上面测试时，点击立即购买毫无反应，这下就有点尴尬了。

想着在js文件开头加句alert(111);，再次点击非常给力，还是依然尴尬。

是不是bootstrap的button元素和某些东西冲突，点击事件没触发，那就换上<a></a>、<input type='button' name='' />标签，依然尴尬。

是不是没有事件委托，元素DOM加载出来后事件没有监听，点击事件也不会触发，那就换上$("parent").on("click","child",function(){...})写法，还是尴尬。

是不是手机浏览器不支持click事件，那就单独对浏览器Touch事件判断并触发：

var hasTouch=function(){
  var touchObj={};
  touchObj.isSupportTouch = "ontouchend" in document ? true : false;
  touchObj.isEvent=touchObj.isSupportTouch?'touchstart':'click';
  return touchObj.isSupportTouch;
  // ture or false
}

判断浏览器是否支持Touch事件，如需了解Touch事件详情请移步站内相关文章，当返回ture时，再做下一步操作，依旧无效。

我开始怀疑人生了，因为在上一个项目中也是类似的写法，华为自带浏览器兼容良好，而这次既然挂了，从天上到地下的感觉。于是在HTML页面底部加上script脚本，调用alert弹出窗，竟然可以弹出窗口，
差不多可以定位是js文件除了问题，其实在上面alert无法弹出时也是可以定位的，再进一步思考，可能有js报错导致js文件终止执行，既然是报错为什么PC端可以执行，而且之后用手机360浏览器、手机百度
测试正常，这时候可以考虑兼容问题了，兼容问题导致js文件终止执行。

通过比对上一个项目和这个项目的js写法，发现这个项目在采用SweetAlert2插件时用了如下的ES6写法，导致【华为】和【苹果】自带浏览器无法执行js文件。

swal({
        html: "<p>这是p段落标签</p>",
        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then((result)=>{
        if(result.value){
           window.location.href = "uri...";
        }
    })

箭头函数改成ES5写法：

swal({
        html: "<p>这是p段落标签</p>",
        showCancelButton: true,
        focusConfirm: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(function (result) {
        if(result.value){
            window.location.href = "uri...";
        }
    })

问题解决，也不用怀疑人生了。

因为上面写法采用的是ES6的Promise对象提供的方法。补充一下关于某些手机浏览器不支持ES6 Promise的解决方法。

1. 复写Promise函数，把ES6的Promise写法转换成ES5的写法，这里提供一个Google在线转换链接http://google.github.io/traceur-compiler/demo/repl.html#。
2. 使用bluebird.js兼容Promise函数。
3. 可以使用babel转换代码。