《机票航班列表》项目总结
|
很快没在公司参考这么大的项目升级工作了。工作的内容听起来很简单，将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，我们卡了好久。下面是我们找到的资料，但有纰漏，我们改了一下：
//最后找到的方案
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... （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |