Cinq conseils front-end qui font briller les gens

Afin de faciliter la programmation pour tous, ce livre sélectionne quelques techniques utiles mais relativement rares et utiles. Sans plus tarder, prenons la route.

1. Masquer rapidement

Pour masquer un élément DOM, aucun JavaScript n'est requis. Un attribut HTML natif suffit à se cacher. L'effet est similaire à l'ajout d'un style 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

Cette astuce ne fonctionne cependant pas avec les pseudo-éléments.

2. Positionnement rapide

🎜🎜Connaissez-vous la propriété CSS `inset` ? Il s'agit de la version abrégée de `top`, `left`, `right` et `bottom`. Semblable aux raccourcis `margin` et `padding`, nous pouvons définir tous les décalages d'un élément sur une seule ligne. 🎜rrreee🎜🎜3. Test de vitesse du réseau frontal🎜🎜🎜Le navigateur Chrome fournit l'API d'origine navigator.connection.downlink qui peut accéder à la bande passante réseau de l'environnement réseau actuel de l'utilisateur. 🎜rrreee🎜connection.downlink ne renvoie pas la vitesse de transmission du réseau affichée dans l'environnement actuel de l'utilisateur, mais la bande passante du réseau actuel. La déclaration officielle est la suivante : renvoie la bande passante effective en Mb/s, et. Conservez cette valeur au multiple entier le plus proche de 25 Ko/s. 🎜🎜Par exemple, j'ai exécuté la déclaration navigator.connection.downlink dans la console du navigateur Chrome à la maison, et le résultat renvoyé était 10, ce qui signifie que la bande passante de téléchargement est de 10 M. 🎜🎜🎜 🎜🎜4. Désactiver l'extraction pour actualiser🎜🎜🎜La propriété CSS overscroll-behavior permet aux développeurs de remplacer le comportement de défilement par défaut du navigateur lorsque le haut/le bas du contenu est atteint. Les cas d'utilisation pour cela incluent la désactivation de la fonction « tirer pour actualiser » sur les appareils mobiles, la suppression des effets de sur-défilement et d'élastique, et l'empêchement du défilement du contenu de la page sous les modaux/superpositions 🎜rrreee🎜Cette propriété est utile pour organiser le défilement au sein du modal. windows Également très utile - il empêche la page principale d'intercepter le défilement lorsqu'elle atteint la bordure. 🎜🎜🎜5. L'insertion de texte est interdite🎜🎜

Lorsque l'utilisateur lance une opération "coller" dans l'interface utilisateur du navigateur, l'événement coller sera déclenché.

🎜Parfois, je souhaite empêcher l'utilisateur de coller du texte copié quelque part dans la zone de saisie. Cela peut être facilement fait en écoutant l'événement Paste et en appelant sa méthode preventDefault(). 🎜rrreee🎜Il est impossible de connaître les BUG possibles après le déploiement du code en temps réel. Afin de résoudre ces BUG par la suite, beaucoup de temps a été consacré au débogage des journaux. D'ailleurs, je voudrais recommander un BUG utile. outil de surveillance Fundebug. 🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo CSS🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!