人を輝かせる5つのフロントエンドのヒント

本書では、誰にとってもプログラミングを簡単にするために、比較的まれではあるものの便利なテクニックをいくつか取り上げます。早速、ドライブしてみましょう。

1. クイック非表示

DOM 要素を非表示にするには、JavaScript は必要ありません。非表示にはネイティブ HTML 属性で十分です。この効果は、スタイル display: none; を追加するのと似ています。

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

ただし、このトリックは擬似要素では機能しません。

2. 素早い配置

CSS プロパティ `inset` をご存知ですか?これは、`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. テキストの挿入は禁止されています

ユーザーがブラウザのユーザー インターフェイスで「貼り付け」操作を開始すると、貼り付けイベントがトリガーされます。

場合によっては、ユーザーがどこかからコピーしたテキストを入力ボックスに貼り付けることを禁止したいことがあります。これは、貼り付けイベントをリッスンし、そのメソッド preventDefault() を呼び出すことで簡単に実行できます。

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

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

</script>

コードをデプロイした後、リアルタイムでバグの可能性を知ることは不可能です。これらのバグを後から解決するために、ログのデバッグに多くの時間が費やされました。便利な BUG 監視ツール Fundebug を推奨します。

推奨学習: css ビデオ チュートリアル

以上が人を輝かせる5つのフロントエンドのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。