Fünf Frontend-Tipps, die Menschen zum Strahlen bringen

Um das Programmieren für alle einfacher zu machen, wählt dieses Buch einige nützliche, aber relativ seltene und nützliche Techniken aus. Ohne weitere Umschweife, los geht’s.

1. Schnell ausblenden

Um ein DOM-Element auszublenden, ist kein JavaScript erforderlich. Zum Ausblenden reicht ein natives HTML-Attribut. Der Effekt ähnelt dem Hinzufügen eines Stils display: none;. display: none;。

<p hidden>该段落在页面上是不可见的，它对HTML是隐藏的。</p>

不过，这个技巧对伪元素不起作用。

2. 迅速定位

熟悉`inset` CSS 属性吗？它是`top`、`left`、`right`和`bottom`的缩写版本。与简写的`margin`和`padding`类似，我们可以在一行中设置一个元素的所有偏移量。

// Before
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// After
div {
  position: absolute;
  inset: 0;
}

3.前端测网速

Chrome浏览器提供了原始的API navigator.connection.downlink 可以访问用户当前网络环境的网络带宽。

navigator.connection.downlink;

connection.downlink返回的并不是用户当前环境的展示的网络传输速度，而是当前网络的带宽，官方说法是：返回以Mb/s为单位的有效带宽，并保留该值为25kb/s的最接近的整数倍。

例如，我在我家里Chrome浏览器控制台跑一下navigator.connection.downlink这段语句，结果返回的是10, 表示下载带宽是10M的。

4.禁止拉动刷新

CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为。使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动

body {
 overscroll-behavior-y: contain;
}

这个属性对于组织模态窗口内的滚动也非常有用--它可以防止主页面在到达边界时拦截滚动。

5. 禁止插入文字

当用户在浏览器用户界面发起“粘贴”操作时，会触发paste事件。

有时间，我想禁止用户从某个地方复制的文本粘贴到输入框中。通过监听paste事件并调用其方法preventDefault()，这可以很容易做到。

<input type="text"></input>
<script>
  const input = document.querySelector(&#39;input&#39;);

  input.addEventListener("paste", function(e){
    e.preventDefault()
  })

</script>

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebugrrreee

Dieser Trick funktioniert allerdings nicht mit Pseudoelementen.

2. Schnelle Positionierung

🎜🎜Kennen Sie die CSS-Eigenschaft „inset“? Es ist die abgekürzte Version von „top“, „left“, „right“ und „bottom“. Ähnlich wie bei den Abkürzungen „margin“ und „padding“ können wir alle Offsets eines Elements in einer Zeile festlegen. 🎜rrreee🎜🎜3. Front-End-Netzwerkgeschwindigkeitstest🎜🎜🎜Der Chrome-Browser stellt die Original-API navigator.connection.downlink bereit, die auf die Netzwerkbandbreite der aktuellen Netzwerkumgebung des Benutzers zugreifen kann. 🎜rrreee🎜connection.downlink gibt nicht die in der aktuellen Umgebung des Benutzers angezeigte Netzwerkübertragungsgeschwindigkeit zurück, sondern die Bandbreite des aktuellen Netzwerks. Die offizielle Aussage lautet: Gibt die effektive Bandbreite in Mb/s zurück Halten Sie diesen Wert auf das nächste ganzzahlige Vielfache von 25 kb/s. 🎜🎜Zum Beispiel habe ich die Anweisung navigator.connection.downlink in der Chrome-Browserkonsole zu Hause ausgeführt und das zurückgegebene Ergebnis war 10, was bedeutet, dass die Download-Bandbreite 10 MB beträgt. 🎜🎜🎜 🎜🎜4. Pull zum Aktualisieren deaktivieren🎜🎜🎜Mit der CSS-Eigenschaft overscroll-behavior können Entwickler das standardmäßige Overscroll-Verhalten des Browsers überschreiben, wenn der obere/untere Rand des Inhalts erreicht ist. Zu den Anwendungsfällen hierfür gehören das Deaktivieren der Funktion „Zum Aktualisieren ziehen“ auf Mobilgeräten, das Entfernen des Overscroll-Glühens und der Gummibandeffekte sowie das Verhindern des Scrollens von Seiteninhalten unter Modalen/Overlays 🎜rrreee🎜Diese Eigenschaft ist nützlich, um das Scrollen innerhalb von Modalen zu organisieren Windows Auch sehr nützlich – es verhindert, dass die Hauptseite das Scrollen abfängt, wenn sie den Rand erreicht. 🎜🎜🎜5. Das Einfügen von Text ist verboten🎜🎜

Wenn der Benutzer einen „Einfüge“-Vorgang in der Browser-Benutzeroberfläche initiiert, wird das Einfügeereignis ausgelöst.

🎜Manchmal möchte ich den Benutzer daran hindern, von irgendwoher kopierten Text in das Eingabefeld einzufügen. Dies lässt sich leicht bewerkstelligen, indem man auf das Paste-Ereignis lauscht und seine Methode preventDefault() aufruft. 🎜rrreee🎜Es ist unmöglich, die möglichen Fehler zu erkennen, nachdem der Code in Echtzeit bereitgestellt wurde. Um diese Fehler anschließend zu beheben, wurde viel Zeit in das Debuggen von Protokollen investiert. Ich möchte übrigens einen nützlichen Fehler empfehlen Überwachungstool Fundebug. 🎜🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonFünf Frontend-Tipps, die Menschen zum Strahlen bringen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!