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