你可能不知道的前端小技巧

elarity 發(fā)布于2019-08-26 10:18 / 2906人閱讀

摘要：主要分成事件，瀏覽器調(diào)試小技巧，其他三部分。一事件先來看一個(gè)有趣的問題。介紹一組很有用的事件。我介紹這個(gè)的目的并不是簡(jiǎn)單的介紹這個(gè)事件，而是這里有個(gè)小坑。只能通過來進(jìn)行綁定。二瀏覽器調(diào)試小技巧用來代替在文件中打斷點(diǎn)的操作。

這篇文章主要記錄一些我在開發(fā)工作中踩過的一些坑或者新學(xué)到的一些知識(shí)。主要分成‘事件’，‘瀏覽器調(diào)試小技巧’，‘其他‘三部分。
==============================一.事件===========================
1.先來看一個(gè)有趣的問題。

=======這是html=======




========這是js部分=======
function onclick1() {
    console.log("onclick1...");
}
function onclick() {
    console.log("onclick...");
}
function click() {
    console.log("click...");
}

分別點(diǎn)擊這三個(gè)按鈕，猜猜會(huì)是什么結(jié)果。
答案揭曉：點(diǎn)擊按鈕1，會(huì)正常輸出onclick1... 點(diǎn)擊按鈕2，會(huì)報(bào)錯(cuò)Uncaught RangeError: Maximum call stack size exceeded。棧溢出了。點(diǎn)擊按鈕3，不會(huì)報(bào)錯(cuò)，也沒有任何反應(yīng)。
所以，如果要給DOM綁定onclick事件，函數(shù)名千萬別叫click和onclick。當(dāng)然，如果你用addEventListener來綁定的話就不會(huì)存在這個(gè)問題了。

2.介紹一組很有用的事件。compositionstart, compositionupdate, compositionend.用來監(jiān)聽中文輸入法。顧名思義：一個(gè)用來監(jiān)聽開始，一個(gè)用來監(jiān)聽更新，一個(gè)用來監(jiān)聽結(jié)束。如果輸入的都是英文不會(huì)觸發(fā)此事件，輸入拼音時(shí)會(huì)觸發(fā)。
我介紹這個(gè)的目的并不是簡(jiǎn)單的介紹這個(gè)事件，而是這里有個(gè)小坑。我們都知道，事件監(jiān)聽常用的兩種方式，一種是直接給DOM加屬性，比如onclick,onblur.另一種是用addEventListener來綁定事件。但是這組事件就很特殊。他們不能使用oncompositionstart，oncompositionupdate,oncompositionend來直接寫在DOM中。實(shí)測(cè)不會(huì)生效。只能通過addEventListener來進(jìn)行綁定。
===========================二.瀏覽器調(diào)試小技巧========================
3.用debugger來代替在文件中打斷點(diǎn)的操作。當(dāng)我們想在某處打斷點(diǎn)的時(shí)候，往往會(huì)去瀏覽器中先找到這個(gè)文件，然后再找到具體哪一行。其實(shí)用debugger可以完全替代這個(gè)麻煩的操作。只需要在你想讓代碼停下的地方寫一句debugger即可。

4.打條件斷點(diǎn)，比如我們想在一個(gè)for循環(huán)里打斷點(diǎn)，我只想看第五次循環(huán)時(shí)各變量的值，如果我只是在那打個(gè)斷點(diǎn)的話，每次循環(huán)都會(huì)停下。那我怎么能解決這個(gè)麻煩的問題呢。有兩個(gè)方法。一：用debugger，只需要在代碼中寫if (i ==5 ) debugger; 二：在瀏覽器中打條件斷點(diǎn)。步驟如下圖所示：輸入完條件之后按回車鍵。最后會(huì)出現(xiàn)一個(gè)黃色斷點(diǎn)如下圖所示。

5.用$_來表示上一次的控制臺(tái)結(jié)果。我們經(jīng)常在控制臺(tái)寫一些簡(jiǎn)單的測(cè)試代碼。當(dāng)需要用到上一次的運(yùn)行結(jié)果時(shí)，往往需要再將之前的表達(dá)式復(fù)制一遍。$_可以完美解決這個(gè)問題。
=============================三.其他=====================================
6.0/0結(jié)果是NaN。以前學(xué)C++時(shí)，碰到number/0這樣分母為0的情況，都會(huì)加try catch來處理。直到有一天我發(fā)現(xiàn)，在js中分母為0不會(huì)拋出異常，而會(huì)得到NaN的結(jié)果。

7.行內(nèi)元素設(shè)置rotate無效，需要設(shè)置成display:inline-block.有一次我試圖給span標(biāo)簽設(shè)置旋轉(zhuǎn)角度，發(fā)現(xiàn)怎么都不成功。后來查閱資料發(fā)現(xiàn)，inline元素設(shè)置rotate無效。

8.用data- 給DOM擴(kuò)展屬性。有時(shí)候我們需要在節(jié)點(diǎn)上存儲(chǔ)信息，在js中獲取，（我以前干過把信息存為id或title）但是這樣違反了id和title本來的作用。H5提供了新的方法，data-XXX。可以供我們自定義，在存儲(chǔ)時(shí)這樣：

在js中獲取時(shí)用div.getAttribute("data-name"),或者用jQuery:$(div).data("name")

9.最快捷的數(shù)組求最大值方法：

let arr = [1,2,3,5,5,6,3,4];
let max = Math.max(...arr);

10.如何實(shí)現(xiàn)點(diǎn)擊任意地方選中某個(gè)區(qū)域中的文本。通常我們要選中網(wǎng)頁中的一段文本，需要雙擊才可以選中。但有時(shí)為了交互體驗(yàn)更好，要做成點(diǎn)擊一下即可選中某塊區(qū)域中的文本。再點(diǎn)擊一下即可對(duì)所選區(qū)域進(jìn)行編輯。主要用到window.getSelection方法和range的一些方法。