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

資訊專欄INFORMATION COLUMN

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

loostudy / 1957人閱讀

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

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

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




========這是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。可以供我們自定義，在存儲時這樣：

在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的一些方法。


    這是一段文字

PS:覺得還可以？給點個贊吧！

作者：易企秀——Hison

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

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

相關文章

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

    摘要：主要分成事件，瀏覽器調試小技巧，其他三部分。一事件先來看一個有趣的問題。介紹一組很有用的事件。我介紹這個的目的并不是簡單的介紹這個事件，而是這里有個小坑。只能通過來進行綁定。二瀏覽器調試小技巧用來代替在文件中打斷點的操作。 這篇文章主要記錄一些我在開發工作中踩過的一些坑或者新學到的一些知識。主要分成‘事件’，‘瀏覽器調試小技巧’，‘其他‘三部分。====================...

    elarity 評論0 收藏0

  • 2017文章總結

    摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...

    dailybird 評論0 收藏0

  • 2017文章總結

    摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...

    hellowoody 評論0 收藏0

  • 2017文章總結

    摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...

    wwolf 評論0 收藏0

  • 前端資源系列（4）-前端學習資源分享&前端面試資源匯總

    摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

    princekin 評論0 收藏0

發表評論

0條評論

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