你可能不知道，前端這五個(gè)有用的技術(shù)可以這么酷！
為了讓大家編程更輕松一些，本挑選一些有用的但相對(duì)比較少見(jiàn)有用的技巧。廢話不多說(shuō)，開(kāi)車(chē)了。
1.快速隱藏
要隱藏一個(gè)DOM元素，不需要JavaScript。一個(gè)原生的HTML屬性就足以隱藏。其效果類(lèi)似于添加一個(gè)style display: none;。
- <p hidden>該段落在頁(yè)面上是不可見(jiàn)的，它對(duì)HTML是隱藏的。</p>
該段落在頁(yè)面上是不可見(jiàn)的，它對(duì)HTML是隱藏的。
不過(guò)，這個(gè)技巧對(duì)偽元素不起作用。
2. 迅速定位
熟悉 inset` CSS 屬性嗎?它是`top`、`left`、`right`和bottom的縮寫(xiě)版本。與簡(jiǎn)寫(xiě)的margin和padding`類(lèi)似，我們可以在一行中設(shè)置一個(gè)元素的所有偏移量。
- // Before
- div {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- }
- // After
- div {
- position: absolute;
- inset: 0;
- }
3.前端測(cè)網(wǎng)速
Chrome瀏覽器提供了原始的APInavigator.connection.downlink 可以訪問(wèn)用戶當(dāng)前網(wǎng)絡(luò)環(huán)境的網(wǎng)絡(luò)帶寬。
- navigator.connection.downlink;
connection.downlink返回的并不是用戶當(dāng)前環(huán)境的展示的網(wǎng)絡(luò)傳輸速度，而是當(dāng)前網(wǎng)絡(luò)的帶寬，官方說(shuō)法是：返回以Mb/s為單位的有效帶寬，并保留該值為25kb/s的最接近的整數(shù)倍。
例如，我在我家里Chrome瀏覽器控制臺(tái)跑一下navigator.connection.downlink這段語(yǔ)句，結(jié)果返回的是10, 表示下載帶寬是10M的。
具體場(chǎng)景看這篇文章：https://www.zhangxinxu.com/wordpress/2021/04/navigator-connection-downlink/
4.禁止拉動(dòng)刷新
CSS overscroll-behavior屬性允許開(kāi)發(fā)人員在達(dá)到內(nèi)容的頂部/底部時(shí)覆蓋瀏覽器的默認(rèn)溢出滾動(dòng)行為。使用該案例包括禁用移動(dòng)設(shè)備上的“拉動(dòng)到刷新”功能，消除過(guò)度滾動(dòng)發(fā)光和橡皮筋效果，并防止頁(yè)面內(nèi)容在模態(tài)/疊加層下滾動(dòng)
- body {
- overscroll-behavior-y: contain;
- }
這個(gè)屬性對(duì)于組織模態(tài)窗口內(nèi)的滾動(dòng)也非常有用--它可以防止主頁(yè)面在到達(dá)邊界時(shí)攔截滾動(dòng)。
具體場(chǎng)景參考這篇文章：https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/
5. 禁止插入文字
當(dāng)用戶在瀏覽器用戶界面發(fā)起“粘貼”操作時(shí)，會(huì)觸發(fā)paste事件。
有時(shí)間，我想禁止用戶從某個(gè)地方復(fù)制的文本粘貼到輸入框中。通過(guò)監(jiān)聽(tīng)paste事件并調(diào)用其方法preventDefault()，這可以很容易做到。
- <input type="text"></input>
- <script>
- const input = document.querySelector('input');
- input.addEventListener("paste", function(e){
- e.preventDefault()
- })
- </script>
~完，我是小智。
作者：Shadeed 譯者：前端小智 來(lái)源：dev
原文：https://dev.to/ra1nbow1/6-useful-frontend-techniues-that-you-may-not-know-about-47hd
【編輯推薦】
