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

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

這項能力除了嫻熟的調(diào)試工具使用技巧，更重要的還是對變化的觀察力和總結(jié)歸納的能力。本文用一個講一個功能案例的實現(xiàn)。

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

我們的canvas應(yīng)用有整體放大縮小的功能。但是文本輸入與我們的canvas應(yīng)用是兩個不同的體系，現(xiàn)在我們要對這個文本輸入相關(guān)的庫進(jìn)行對應(yīng)的放大縮小的調(diào)整。在canvas應(yīng)用處于放大縮小的場景，text輸入框?qū)?yīng)放大縮小。并且在放大縮小的場景下對輸入框中的字體的放大縮小，在回歸到正常大小的時候。顯示與100%時設(shè)置的字體大小相同。

目前的情況是應(yīng)用處于放大狀態(tài)時，輸入內(nèi)容以及轉(zhuǎn)化到canvas上的大小依然是畫布100%時的大小。然后當(dāng)畫布變回正常大小，之前繪制到canvas上的的文本就小的沒法看了。

canvas應(yīng)用放到大300%時文本組件的情況：

canvas應(yīng)用放到大300%時繪制到canvas上的文本：

canvas應(yīng)用回到正常100%時繪制到canvas上的文本情況：

首先觀察輸入框的大小什么決定。要先觀察輸入框的組成結(jié)構(gòu)。查看elements，發(fā)現(xiàn)它是dom結(jié)構(gòu)，沒有在iframe中，也不是canvas繪制，先松一口氣，看來僅僅是dom上的變換。

然后我們在輸入框中輸入，同時觀察右邊dom結(jié)構(gòu)有什么變化。發(fā)現(xiàn)輸入到第二個字符的時候多了一個帶內(nèi)聯(lián)屬性的font-size的span，我們輸入的內(nèi)定到這個span標(biāo)簽中。

然后通過輸入組件的工具欄把輸入的字體調(diào)整到其他字號。發(fā)現(xiàn)內(nèi)聯(lián)的font-size有變化。字體變大。輸入框變大。

猜測輸入框大小跟這個字號有關(guān)系。

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

首先看span是怎么加入進(jìn)去的，監(jiān)聽p的子節(jié)點變化。加一個dom斷點。

監(jiān)聽到了appendChild。然后查看調(diào)用棧。

定位到這個位置，看到是在這里給span設(shè)置了14px的默認(rèn)大小，修改它：

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

刷新，發(fā)現(xiàn)打開輸入框，輸入框大小跟之前一樣，輸入第一個字時還跟之前一樣，輸入第二個字母，span出來之后，字體和輸入框就變成當(dāng)前比例下我們想要的大小了。

另外，發(fā)現(xiàn)那句代碼有一句注釋　16 to 14。
猜測之前有一次默認(rèn)字體大小從16到14的整體改動。如果我們?nèi)炙阉饕幌?6 to 14這個改動，也許會有意想不到的發(fā)現(xiàn)。

那么第一個字母的大小由什么決定？用chrome一看，由css決定。父元素的font-size決定。所以現(xiàn)在我們父元素的css要動態(tài)修改。在初始化輸入框的時候就要設(shè)置好內(nèi)聯(lián)的css。如何知道在哪里初始化的文本dom，哪里改？

觀察，發(fā)現(xiàn)輸入框消失之后，整個輸入框相關(guān)的節(jié)點都消失了。猜測整個輸入相關(guān)的節(jié)點由js動態(tài)生成。于是全局搜索class名。

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

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

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

然而輸入第一個字母，點出去，發(fā)現(xiàn)繪制到canvas上的依然是100%狀態(tài)下的14px。而輸入多個字符的時候，字體是該比例下的大小。因為上面的觀察我們知道只有一個字母的時候是沒有span生成的，所以可能對產(chǎn)生的canvas字體有影響?！∧敲次覀僼xt轉(zhuǎn)canvas的函數(shù)可能也需要修改。

這個函數(shù)在哪里？是不是有這樣一個函數(shù)？有什么辦法知道？由前面的觀察我們發(fā)現(xiàn)點出去的時候文本組件相關(guān)dom是會消失的。于是，斷點它。

在調(diào)用棧里發(fā)現(xiàn)這樣一個函數(shù)。果斷進(jìn)去看一看。

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

//ls20180524 根據(jù)縮放比例調(diào)整。
var scaleValue = $("#zoomIn-container").attr("data-float")||1;
result = "
" + matchTarget[1] + "
";

再測試。發(fā)現(xiàn)只輸入一個字。到canvas上大小正確。

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

然后剩下最后一個功能。修改字號。修改字號后我們框里的字體大小應(yīng)該是縮放后的比例下的這個字號的大小。只要監(jiān)測相關(guān)節(jié)點的變動，然后切換一下字號，就可以找到設(shè)置span大小的節(jié)點。都很好修改了。

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

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

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

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