《机票航班列表》项目总结

很快没在公司参考这么大的项目升级工做了。工做的内容听起来很简单，将React改为咱们平台事业部的迷你React框架Qreact（https://github.com/RubyLouvre...），让它能在IE8下跑起来。但事实上让咱们屡屡碰壁，这是一个很古老很庞大的项目，里面还有0.14以前的createClass API，须要临时为Qreact/anu添加支持。项目在打包时一共涉及到820个模块，里面有多少JS文件就更很差说了，你没法预先里面有多少怪异写法，必须让Qreact/anu能彻底支持这些写法，不管它是多偏门。

从7月31日到8月29日，从自信满满到愁肠寸断，开着飞机修引擎，不断修BUG发版本，里面的核心算法改了好几趟。更让人发愁的是，mac下的虚拟机太很差用了，卡得要命了，总在挑战咱们的耐性。IE下进行调试是很是痛苦，里面进行断点很是麻烦，console.log也比较弱智，不能分析对象里面有什么东西。

第一个遇到的大麻烦是React的更新机制，这是一个基于列队的异步操做，不一样于avalon/vue那样的基于mircotack（nextTick）的异步操做，也不一样于angular那样的基于Promise的异步操做，很具备迷惑性，文档上也没有说起到这个实现，只能翻源码。早期参考dio.js，搞了一个scheduler模块大抵能契合95％的场影，但咱们须要的是100％兼容。只要用到setTimeout, Promise, requestAnimationFrame这些API就是不正确的。

第二个是mouseenter/mouseleave事件，这两个事件没法冒泡，而react的事件系统是创建在事件代理的基石之上。所以你必须将它冒泡上去，在IE8下咱们想到事件冒充，经过mouseover/mouseout这两个事件。但在标准浏览器，光是事件捕获也不能模拟事件冒泡的效果，而且它们不是冒泡到顶端，所以事件的触发路径须要进行裁减，看一下React的源码是经过LAC算法实现的（最近公共祖先）。而且在IE8下，如何求取relatedTarget，咱们卡了很久。下面是咱们找到的资料，但有纰漏，咱们改了一下：

DOM经过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；

对于其余事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着一样信息的不一样属性。

在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。

但fromElement与toElement可能同时都有值!

//最后找到的方案
function getRelatedTarget(e) {
    if (!e.timeStamp) {
        e.relatedTarget = e.type === 'mouseover'?  e.fromElement: e.toElement 
    }
    return e.relatedTarget
}

https://github.com/RubyLouvre...

机票那边用了许多浮层，浮层用了mousenter来实现它们。为了搞清mouseenter的兼容问题，咱们可悲地卡了三个星期。咱们最后才明白，jQuery源码那个方案也是有问题的。

最后一个是打包上线的问题，在压缩的状况下IE下出BUG了，老是报anu的某个位置出问题，但将anu剥离出来，又报其余位置出问题。说明IE报BUG的位置是不对的，但有时是这处出错，有时是另外一处出错。咱们怀疑过uglify的压缩问题，怀疑过es5-shim、es6-sham乱打补丁的问题，怀疑过babel-polyfill的问题。最后给咱们查出是requestAnimationFrame的问题，因为这是一个DOM API，IE10才支持。而es5-shim，es6-sham，babel-polyfill都是针对JS语言自己，所以怎么也修复不了。还好，这只是卡了两星期。

其间，Qreact从1.0迭代到1.0.4，内部的开发版本更是多达7，8次，严重考虑人的心智与耐心。最大的收获是， Qreact终于有高度可用的版本了，也有一个能够为本身代言的大项目，咱们的调试技术又大大提升了（二分法老是最有效的）。最大特别感谢冯木地，蒲天依，祝鑫奔，周鑫珏等人的信赖与支持。

https://github.com/RubyLouvre...