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

這篇文章主要記錄一些我在開發工做中踩過的一些坑或者新學到的一些知識。主要分紅‘事件’，‘瀏覽器調試小技巧’，‘其餘‘三部分。
==============================一.事件===========================
1.先來看一個有趣的問題。

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

<button onclick="onclick1()">按鈕1</button>
<button onclick="onclick()">按鈕2</button>
<button onclick="click()">按鈕3</button>
========這是js部分=======
function onclick1() {
    console.log('onclick1...');
}
function onclick() {
    console.log('onclick...');
}
function click() {
    console.log('click...');
}

分別點擊這三個按鈕，猜猜會是什麼結果。
答案揭曉：點擊按鈕1，會正常輸出onclick1... 點擊按鈕2，會報錯Uncaught RangeError: Maximum call stack size exceeded。棧溢出了。 點擊按鈕3，不會報錯，也沒有任何反應。
因此，若是要給DOM綁定onclick事件，函數名千萬別叫click和onclick。固然，若是你用addEventListener來綁定的話就不會存在這個問題了。

2.介紹一組頗有用的事件。compositionstart, compositionupdate, compositionend.用來監聽中文輸入法。顧名思義：一個用來監聽開始，一個用來監聽更新，一個用來監聽結束。若是輸入的都是英文不會觸發此事件，輸入拼音時會觸發。
我介紹這個的目的並非簡單的介紹這個事件，而是這裏有個小坑。咱們都知道，事件監聽經常使用的兩種方式，一種是直接給DOM加屬性，好比onclick,onblur.另外一種是用addEventListener來綁定事件。可是這組事件就很特殊。他們不能使用oncompositionstart，oncompositionupdate,oncompositionend來直接寫在DOM中。實測不會生效。只能經過addEventListener來進行綁定。
===========================二.瀏覽器調試小技巧========================
3.用debugger來代替在文件中打斷點的操做。當咱們想在某處打斷點的時候，每每會去瀏覽器中先找到這個文件，而後再找到具體哪一行。其實用debugger能夠徹底替代這個麻煩的操做。只須要在你想讓代碼停下的地方寫一句debugger便可。

4.打條件斷點，好比咱們想在一個for循環裏打斷點，我只想看第五次循環時各變量的值，若是我只是在那打個斷點的話，每次循環都會停下。那我怎麼能解決這個麻煩的問題呢。有兩個方法。一：用debugger，只須要在代碼中寫if (i ==5 ) debugger; 二： 在瀏覽器中打條件斷點。步驟以下圖所示：輸入完條件以後按回車鍵。最後會出現一個黃色斷點以下圖所示。

5.用$_來表示上一次的控制檯結果。咱們常常在控制檯寫一些簡單的測試代碼。當須要用到上一次的運行結果時，每每須要再將以前的表達式複製一遍。$_能夠完美解決這個問題。
=============================三.其餘=====================================
6.0/0結果是NaN。之前學C++時，碰到number/0這樣分母爲0的狀況，都會加try catch來處理。直到有一天我發現，在js中分母爲0不會拋出異常，而會獲得NaN的結果。

7.行內元素設置rotate無效，須要設置成display:inline-block.有一次我試圖給span標籤設置旋轉角度，發現怎麼都不成功。後來查閱資料發現，inline元素設置rotate無效。

8.用data- 給DOM擴展屬性。有時候咱們須要在節點上存儲信息，在js中獲取，（我之前幹過把信息存爲id或title）可是這樣違反了id和title原本的做用。H5提供了新的方法，data-XXX。能夠供咱們自定義，在存儲時這樣：<div data-name='hison'></div>在js中獲取時用div.getAttribute('data-name'),或者用jQuery:$(div).data('name')

9.最快捷的數組求最大值方法：

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

10.如何實現點擊任意地方選中某個區域中的文本。一般咱們要選中網頁中的一段文本，須要雙擊才能夠選中。但有時爲了交互體驗更好，要作成點擊一下便可選中某塊區域中的文本。再點擊一下便可對所選區域進行編輯。主要用到window.getSelection方法和range的一些方法。

<div id="box">
    <span>這是一段文字</span>
</div>
<button onclick="selectText()">點我選中文字</button>
<script>
if (window.getSelection) {
        //建立一個範圍
        var range = document.createRange();
        // 選擇一個node放入該範圍
        range.selectNode(document.getElementById('box'));
        // 把div變成和input同樣能夠編輯
        document.getElementById('box').setAttribute('contenteditable',true);
        // 移除掉以前選擇好的片斷
        window.getSelection().removeAllRanges();
        // 把新建的片斷加入到selection中。
        window.getSelection().addRange(range);
    }
</script>

PS:以爲還能夠？給點個贊吧！