資訊專欄INFORMATION COLUMN
摘要：很快沒(méi)在公司參考這么大的項(xiàng)目升級(jí)工作了。第二個(gè)是事件，這兩個(gè)事件無(wú)法冒泡，而的事件系統(tǒng)是建立在事件代理的基石之上。最大的收獲是，終于有高度可用的版本了，也有一個(gè)可以為自己代言的大項(xiàng)目，我們的調(diào)試技術(shù)又大大提高了二分法總是最有效的。
很快沒(méi)在公司參考這么大的項(xiàng)目升級(jí)工作了。工作的內(nèi)容聽(tīng)起來(lái)很簡(jiǎn)單，將React改成我們平臺(tái)事業(yè)部的迷你React框架Qreact（https://github.com/RubyLouvre...），讓它能在IE8下跑起來(lái)。但事實(shí)上讓我們屢屢碰壁，這是一個(gè)很古老很龐大的項(xiàng)目，里面還有0.14之前的createClass API，需要臨時(shí)為Qreact/anu添加支持。項(xiàng)目在打包時(shí)一共涉及到820個(gè)模塊，里面有多少JS文件就更不好說(shuō)了，你無(wú)法預(yù)先里面有多少怪異寫法，必須讓Qreact/anu能完全支持這些寫法，無(wú)論它是多偏門。
從7月31日到8月29日，從自信滿滿到愁腸寸斷，開(kāi)著飛機(jī)修引擎，不斷修BUG發(fā)版本，里面的核心算法改了好幾趟。更讓人發(fā)愁的是，mac下的虛擬機(jī)太不好用了，卡得要命了，總在挑戰(zhàn)我們的耐性。IE下進(jìn)行調(diào)試是非常痛苦，里面進(jìn)行斷點(diǎn)非常麻煩，console.log也比較弱智，不能分析對(duì)象里面有什么東西。
第一個(gè)遇到的大麻煩是React的更新機(jī)制，這是一個(gè)基于列隊(duì)的異步操作，不同于avalon/vue那樣的基于mircotack（nextTick）的異步操作，也不同于angular那樣的基于Promise的異步操作，很具有迷惑性，文檔上也沒(méi)有提及到這個(gè)實(shí)現(xiàn)，只能翻源碼。早期參考dio.js，搞了一個(gè)scheduler模塊大抵能契合95％的場(chǎng)影，但我們需要的是100％兼容。只要用到setTimeout, Promise, requestAnimationFrame這些API就是不正確的。
第二個(gè)是mouseenter/mouseleave事件，這兩個(gè)事件無(wú)法冒泡，而react的事件系統(tǒng)是建立在事件代理的基石之上。因此你必須將它冒泡上去，在IE8下我們想到事件冒充，通過(guò)mouseover/mouseout這兩個(gè)事件。但在標(biāo)準(zhǔn)瀏覽器，光是事件捕獲也不能模擬事件冒泡的效果，并且它們不是冒泡到頂端，因此事件的觸發(fā)路徑需要進(jìn)行裁減，看一下React的源碼是通過(guò)LAC算法實(shí)現(xiàn)的（最近公共祖先）。并且在IE8下，如何求取relatedTarget，我們卡了好久。下面是我們找到的資料，但有紕漏，我們改了一下：
DOM通過(guò)event對(duì)象的relatedTarget屬性提供了相關(guān)元素的信息。這個(gè)屬性只對(duì)于mouseover和mouseout事件才包含值；
對(duì)于其他事件，這個(gè)屬性的值是null。IE不支持realtedTarget屬性，但提供了保存著同樣信息的不同屬性。
在mouseover事件觸發(fā)時(shí)，IE的fromElement屬性中保存了相關(guān)元素；在mouseout事件出發(fā)時(shí)，IE的toElement屬性中保存著相關(guān)元素。
但fromElement與toElement可能同時(shí)都有值!
//最后找到的方案
function getRelatedTarget(e) {
if (!e.timeStamp) {
e.relatedTarget = e.type === "mouseover"? e.fromElement: e.toElement
}
return e.relatedTarget
}
https://github.com/RubyLouvre...
機(jī)票那邊用了許多浮層，浮層用了mousenter來(lái)實(shí)現(xiàn)它們。為了搞清mouseenter的兼容問(wèn)題，我們可悲地卡了三個(gè)星期。我們最后才明白，jQuery源碼那個(gè)方案也是有問(wèn)題的。
最后一個(gè)是打包上線的問(wèn)題，在壓縮的情況下IE下出BUG了，總是報(bào)anu的某個(gè)位置出問(wèn)題，但將anu剝離出來(lái)，又報(bào)其他位置出問(wèn)題。說(shuō)明IE報(bào)BUG的位置是不對(duì)的，但有時(shí)是這處出錯(cuò)，有時(shí)是另一處出錯(cuò)。我們懷疑過(guò)uglify的壓縮問(wèn)題，懷疑過(guò)es5-shim、es6-sham亂打補(bǔ)丁的問(wèn)題，懷疑過(guò)babel-polyfill的問(wèn)題。最后給我們查出是requestAnimationFrame的問(wèn)題，由于這是一個(gè)DOM API，IE10才支持。而es5-shim，es6-sham，babel-polyfill都是針對(duì)JS語(yǔ)言本身，因此怎么也修復(fù)不了。還好，這只是卡了兩星期。
其間，Qreact從1.0迭代到1.0.4，內(nèi)部的開(kāi)發(fā)版本更是多達(dá)7，8次，嚴(yán)重考慮人的心智與耐心。最大的收獲是， Qreact終于有高度可用的版本了，也有一個(gè)可以為自己代言的大項(xiàng)目，我們的調(diào)試技術(shù)又大大提高了（二分法總是最有效的）。最大特別感謝馮木地，蒲天依，祝鑫奔，周鑫玨等人的信賴與支持。
https://github.com/RubyLouvre...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91931.html
摘要：題目基于機(jī)票訂購(gòu)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)致力于商用項(xiàng)目畢業(yè)設(shè)計(jì)課程設(shè)計(jì)技術(shù)教學(xué)講解答辯代碼輔導(dǎo)技術(shù)棧安卓大數(shù)據(jù)。 題目：基于J2EE機(jī)票訂購(gòu)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 致力于商用項(xiàng)目、畢業(yè)設(shè)計(jì)、課程設(shè)計(jì)、技術(shù)教學(xué)、講解答辯、代碼輔導(dǎo)? 技術(shù)棧? JSP+Servlet、SSH、SSM、S...
摘要：概述新課題研究響應(yīng)式郵件框架官網(wǎng)姐妹篇響應(yīng)式郵件框架介紹是一種標(biāo)記語(yǔ)言，設(shè)計(jì)用于輕松實(shí)現(xiàn)一個(gè)響應(yīng)式郵件。電子行程單將稍后發(fā)送，屆時(shí)可憑借打印下來(lái)的電子行程單有效證件在機(jī)場(chǎng)值機(jī)柜臺(tái)直接換去登機(jī)牌，之后通過(guò)安檢，順利登機(jī)。 概述 新課題研究：響應(yīng)式郵件框架MJML（MJML官網(wǎng)：https://mjml.io/）姐妹篇： EDM響應(yīng)式郵件框架：Formerly Ink 介紹 MJML是一種...
摘要：本文介紹了在項(xiàng)目中不同模塊之間共享數(shù)據(jù)庫(kù)連接的方法。專門負(fù)責(zé)和數(shù)據(jù)庫(kù)交互，用戶和航班這兩個(gè)模塊都需要連接數(shù)據(jù)庫(kù)，一開(kāi)始我的代碼是這樣的引用連接數(shù)據(jù)庫(kù)引用連接數(shù)據(jù)庫(kù)且不說(shuō)這種寫法一點(diǎn)都不，這種方式本身就是錯(cuò)誤的。 本文介紹了在 Node.js 項(xiàng)目中不同模塊之間共享數(shù)據(jù)庫(kù)連接的方法。 這個(gè)標(biāo)題本身就是一個(gè)命題，因?yàn)槭褂媚J(rèn)方式的情況下，一個(gè) Node.js 應(yīng)用里的各個(gè)模塊都是共享的同一...
閱讀 3089·2021-11-25 09:43
閱讀 2266·2021-09-07 10:28
閱讀 3605·2021-08-11 11:14
閱讀 2788·2019-08-30 13:49
閱讀 3556·2019-08-29 18:41
閱讀 1174·2019-08-29 11:26
閱讀 1983·2019-08-26 13:23
閱讀 3382·2019-08-26 10:43
