国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端基本功之從大型項目中迅速定位修改位置

rubyshen / 3190人閱讀

摘要:前端開發,有一項很重要的基本功,就是在大型項目中,比如幾萬行代碼中,迅速找到新增功能或調試的切入點。猜測輸入框大小跟這個字號有關系。通過觀察分析和斷點技巧,我們很容易地就從一個大型項目幾萬行代碼中迅速定位到我們要修改的地方。

前端開發,有一項很重要的基本功,就是在大型項目中,比如幾萬行js代碼中,迅速找到新增功能或調試bug的切入點。特別是你只是接手這個項目,并不了解其中每一個功能點所在的位置,也沒有時間一行行讀代碼的情況,這個基本功顯得尤其重要?!?/p>

這項能力除了嫻熟的調試工具使用技巧,更重要的還是對變化的觀察力和總結歸納的能力。本文用一個講一個功能案例的實現。

功能背景

一款大型canvas應用。我們使用了一些開源庫實現canvas上的文字與html文字的互轉。使我們可以在一個輸入框中輸入文字然后繪制到canvas上去。也可以點擊canvas上的文字然后通過開源庫進行文字編輯。

要實現功能

我們的canvas應用有整體放大縮小的功能。但是文本輸入與我們的canvas應用是兩個不同的體系,現在我們要對這個文本輸入相關的庫進行對應的放大縮小的調整。在canvas應用處于放大縮小的場景,text輸入框對應放大縮小。并且在放大縮小的場景下對輸入框中的字體的放大縮小,在回歸到正常大小的時候。顯示與100%時設置的字體大小相同。

目前的情況是應用處于放大狀態時,輸入內容以及轉化到canvas上的大小依然是畫布100%時的大小。然后當畫布變回正常大小,之前繪制到canvas上的的文本就小的沒法看了。

canvas應用放到大300%時文本組件的情況:

canvas應用放到大300%時繪制到canvas上的文本:

canvas應用回到正常100%時繪制到canvas上的文本情況:

實現

首先觀察輸入框的大小什么決定。要先觀察輸入框的組成結構。查看elements,發現它是dom結構,沒有在iframe中,也不是canvas繪制,先松一口氣,看來僅僅是dom上的變換。

然后我們在輸入框中輸入,同時觀察右邊dom結構有什么變化。發現輸入到第二個字符的時候多了一個帶內聯屬性的font-size的span,我們輸入的內定到這個span標簽中。

然后通過輸入組件的工具欄把輸入的字體調整到其他字號。發現內聯的font-size有變化。字體變大。輸入框變大。

猜測輸入框大小跟這個字號有關系。

在不同的縮放比例下,按照我們的縮放比例乘以100%狀態下的的字體大小。就是在該比例下的大小了。

首先看span是怎么加入進去的,監聽p的子節點變化。加一個dom斷點。

監聽到了appendChild。然后查看調用棧。

定位到這個位置,看到是在這里給span設置了14px的默認大小,修改它:

var scaleValue = $("#zoomIn-container").attr("data-float")||1;
me.mark("fontsize", 14*scaleValue);

刷新,發現打開輸入框,輸入框大小跟之前一樣,輸入第一個字時還跟之前一樣,輸入第二個字母,span出來之后,字體和輸入框就變成當前比例下我們想要的大小了。

另外,發現那句代碼有一句注釋 16 to 14。
猜測之前有一次默認字體大小從16到14的整體改動。如果我們全局搜索一下16 to 14這個改動,也許會有意想不到的發現。

那么第一個字母的大小由什么決定?用chrome一看,由css決定。父元素的font-size決定。所以現在我們父元素的css要動態修改。在初始化輸入框的時候就要設置好內聯的css。如何知道在哪里初始化的文本dom,哪里改?

觀察,發現輸入框消失之后,整個輸入框相關的節點都消失了。猜測整個輸入相關的節點由js動態生成。于是全局搜索class名。

果然搜到,然后在dom初始化之后的代碼中加入以下代碼,設置字體大小。

// ls20180523 把傳入的字體大小。根據當前比例做一個縮放。
var scaleValue = $("#zoomIn-container").attr("data-float") || 1;
$container.find(id).css("font-size",14*scaleValue);

刷新。初始框變大。第一個字母變大。繼續輸入字體依然變大。

然而輸入第一個字母,點出去,發現繪制到canvas上的依然是100%狀態下的14px。而輸入多個字符的時候,字體是該比例下的大小。因為上面的觀察我們知道只有一個字母的時候是沒有span生成的,所以可能對產生的canvas字體有影響。 那么我們txt轉canvas的函數可能也需要修改。

這個函數在哪里?是不是有這樣一個函數?有什么辦法知道?由前面的觀察我們發現點出去的時候文本組件相關dom是會消失的。于是,斷點它。

在調用棧里發現這樣一個函數。果斷進去看一看。

然后在這個函數里設置斷點。重新操作,在里面一步步走一下。
很容易地,我們找到這個函數,并最終定位到這行代碼。修改之。

//ls20180524 根據縮放比例調整。
var scaleValue = $("#zoomIn-container").attr("data-float")||1;
result = "

" + matchTarget[1] + "

";

再測試。發現只輸入一個字。到canvas上大小正確。

然而出現了新的問題。如圖。這個字號設置的地方。顯示變成了我們實際的大小值。實際應該顯示的是我們dom上設置的大小值除以當前頁面比例的值,才是我們100%比例時候的值。我們要找到它在哪里修改的。觀察這個節點是何時從14變成這個值的。然后設置斷點觀察節點變動。到這個賦值的地方給值進行一個換算就可以了。

然后剩下最后一個功能。修改字號。修改字號后我們框里的字體大小應該是縮放后的比例下的這個字號的大小。只要監測相關節點的變動,然后切換一下字號,就可以找到設置span大小的節點。都很好修改了。

到這里這個功能就基本完成,哪怕是一個剛接手的項目,整個功能修改過程也不超過2小時。當然,后續還有問題要考慮,比如高分屏設備像素比的問題。
修改后,canvas應用放大300%時的字體組件:

總結

到這我們就基本實現了我們的功能,代碼量很小。要注意修改其他人代碼的時候,要考慮修改的地方的方法的作用,使用范圍等。盡量保證自已寫的東西不會影響到其他可能的邏輯,要從代碼編寫者的角度進行多方面的思考。對于第三方庫的使用,我們首先要考慮庫原有接口的組合使用,在原有接口不足的情況下才考慮修改源碼。

通過觀察分析和斷點技巧,我們很容易地就從一個大型項目幾萬行代碼中迅速定位到我們要修改的地方。

github地址:https://github.com/liusaint/l...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/95265.html

相關文章

  • 前端進階之路: 前端架構設計(3) - 測試核心

    摘要:而測試驅動開發技術并不只是單純的測試工作。需求向來就是軟件開發過程中感覺最不好明確描述易變的東西。這里說的需求不只是指用戶的需求,還包括對代碼 可能很多人和我一樣, 首次聽到前端架構這個詞, 第一反應是: 前端還有架構這一說呢? 在后端開發領域, 系統規劃和可擴展性非常關鍵, 因此架構師備受重視, 早在開發工作啟動之前, 他們就被邀請加入到項目中, 而且他們會跟客戶討論即將建成的平臺的...

    Karuru 評論0 收藏0
  • 前端進階之路: 前端架構設計(3) - 測試核心

    摘要:而測試驅動開發技術并不只是單純的測試工作。需求向來就是軟件開發過程中感覺最不好明確描述易變的東西。這里說的需求不只是指用戶的需求,還包括對代碼 可能很多人和我一樣, 首次聽到前端架構這個詞, 第一反應是: 前端還有架構這一說呢? 在后端開發領域, 系統規劃和可擴展性非常關鍵, 因此架構師備受重視, 早在開發工作啟動之前, 他們就被邀請加入到項目中, 而且他們會跟客戶討論即將建成的平臺的...

    宋華 評論0 收藏0
  • ESLint 在大型團隊的應用實踐

    摘要:自動化接入和升級方案通過命令行工具提供一鍵接入升級能力,同時集成到團隊腳手架中,大大降低了工程接入和維護的成本。原始代碼經過解析器的解析,在管道中逐一經過所有規則的檢查,最終檢測出所有不符合規范的代碼,并輸出為報告。 引言 代碼規范是軟件開發領域經久不衰的話題,幾乎所有工程師在開發過程中都會遇到,并或多或少會思考過這一問題。隨著前端應用的大型化和復雜化,越來越多的前端工程師和團隊開始重...

    alogy 評論0 收藏0
  • 讀lodash源碼之從slice看稀疏數組與密集數組

    摘要:例如其中的為,但是數組中沒有元素,是稀疏數組而每個位置都是有元素的,雖然每個元素都為,為密集數組。那稀疏數組和密集數組有什么區別呢在中最主要考慮的是兩者在迭代器中的表現。截取并返回新數組為新數組容器。 卑鄙是卑鄙者的通行證,高尚是高尚者的墓志銘。 ——北島《回答》 看北島就是從這兩句詩開始的,高尚者已死,只剩卑鄙者在世間橫行。 本文為讀 lodash 源碼的第一篇,后續文章會更新到...

    lijy91 評論0 收藏0

發表評論

0條評論

rubyshen

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<