前端開發技巧-那些不常見但十分有效的小玩意

      同學們在開發功能的時候可能會遇到這樣那樣的問題，但可能手中沒有什麼好的解決辦法，那麼不妨來看看小千下面介紹的幾個程式碼，說不準就有能夠解決你問題的哦。

      console.table()

      思考一下平時在開發過程中, 我們的程式碼中出現頻率比較高的一段程式碼是什麼 console.log('xxx')，因為各種各樣的原因, 我們的程式碼一旦在瀏覽器執行總是各種 紅色 所以很多小夥伴會選擇在控制檯列印一下看看。看看我遍歷的是個啥，看看我獲取的元素是個啥，看看我請求回來的東西是個啥，看看我算的數是不是 NaN。

      但是遇到類似下面這樣的程式碼

      在控制檯列印出來的可能不是我們想要的

      如果只有一兩個屬性, 那麼沒啥問題, 我不用開啟就能看到結果 但是一旦物件中屬性變得多了, 那麼我們展開以後看到的結果就會誤導我的程式碼了 這個時候, 我們可以選擇使用 console.table() 來進行控制檯展示

      contenteditable

      我們在頁面上寫的大部分標籤都是不可以編輯的 但是一旦你給元素加上 contenteditable 屬性以後, 就變成可以編輯的了。這個玩意有啥用呢, 也儲存不下來, 重新整理以後還是和以前一樣 可以幫我們玩一下 css 樣式的問題 我們可以寫一個內聯樣式, 寫在 body 標籤裡面。

      calc()

      我們再寫 css 的時候, 經常會遇到一個小問題 就是我已經寫了寬度 25% 了 然後發現, 你 ** 竟然有 margin 好吧, 我給你加一個 margin: 0 10px。

      好吧, 我認命了, 不寫 25% 了, 拉個計算器過來, 我算數還不行嗎 （1）歸零 ... 歸零 ... 歸零 ...

      我們也可以選擇使用一個 calc()

      li { width: calc(25% - 20px); }

      輕鬆解決問題。

      還有更多小技巧同學們感興趣的話不妨關注我，後期分享更多前端小技巧。