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

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

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

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

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

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

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

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

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

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

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

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

猜測(cè)輸入框大小跟這個(gè)字號(hào)有關(guān)系。

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

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

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

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

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

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

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

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

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

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

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

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

然而輸入第一個(gè)字母，點(diǎn)出去，發(fā)現(xiàn)繪制到canvas上的依然是100%狀態(tài)下的14px。而輸入多個(gè)字符的時(shí)候，字體是該比例下的大小。因?yàn)樯厦娴挠^察我們知道只有一個(gè)字母的時(shí)候是沒有span生成的，所以可能對(duì)產(chǎn)生的canvas字體有影響。　那么我們txt轉(zhuǎn)canvas的函數(shù)可能也需要修改。

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

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

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

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

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

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

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

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

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

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

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