资讯专栏INFORMATION COLUMN

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

davidac / 1553人阅读

摘要:很快没在公司参考这么大的项目升级工作了。第二个是事件,这两个事件无法冒泡,而的事件系统是建立在事件代理的基石之上。最大的收获是,终于有高度可用的版本了,也有一个可以为自己代言的大项目,我们的调试技术又大大提高了二分法总是最有效的。

很快没在公司参考这么大的项目升级工作了。工作的内容听起来很简单,将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...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91931.html

相关文章

  • Java毕设项目-航空订票管理系统的设计与实现

    摘要:题目基于机票订购管理系统的设计与实现致力于商用项目毕业设计课程设计技术教学讲解答辩代码辅导技术栈安卓大数据。 题目:基于J2EE机票订购管理系统的设计与实现 致力于商用项目、毕业设计、课程设计、技术教学、讲解答辩、代码辅导  技术栈  JSP+Servlet、SSH、SSM、S...

    fuyi501 评论0 收藏0
  • EDM响应式邮件框架:MJML

    摘要:概述新课题研究响应式邮件框架官网姐妹篇响应式邮件框架介绍是一种标记语言,设计用于轻松实现一个响应式邮件。电子行程单将稍后发送,届时可凭借打印下来的电子行程单有效证件在机场值机柜台直接换去登机牌,之后通过安检,顺利登机。 概述 新课题研究:响应式邮件框架MJML(MJML官网:https://mjml.io/)姐妹篇: EDM响应式邮件框架:Formerly Ink 介绍 MJML是一种...

    yuanzhanghu 评论0 收藏0
  • Node.js 多模块共享数据库连接

    摘要:本文介绍了在项目中不同模块之间共享数据库连接的方法。专门负责和数据库交互,用户和航班这两个模块都需要连接数据库,一开始我的代码是这样的引用连接数据库引用连接数据库且不说这种写法一点都不,这种方式本身就是错误的。 本文介绍了在 Node.js 项目中不同模块之间共享数据库连接的方法。 这个标题本身就是一个命题,因为使用默认方式的情况下,一个 Node.js 应用里的各个模块都是共享的同一...

    zhouzhou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<