フロントエンド開発におけるあまり知られていないトリックは何ですか?

フロントエンド開発のためのあまり知られていない HTML/CSS/JS スキルをいくつか紹介します。何かを得ることができれば幸いです。

1.データリスト要素

何らかの理由で、この要素はあまり使用されません。タグは、要素に「オートコンプリート」機能を提供する<datalist>ために使用されます。<input>

例えば：

<input list="animals" name="animal" id="animal">
<datalist id="animals">
    <option value="Cat">
    <option value="Dog">
    <option value="Chicken">
    <option value="Cow">
    <option value="Pig">
  </datalist>

<datalist>2 つの要素をバインドできるように、入力の ID は入力の list 属性と一致している必要があります。

2. リンクされたラベルをクリックしてチェックボックスをオンにします

labelラベルがクリックされたときにチェックボックスにアクションを実行させたい場合は、通常、次のコードのように、要素の「for」属性を使用できます。

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">I agree</label>

実際、labelチェックボックスを要素で囲むこともでき、「同意する」をクリックして選択を完了するのと同じ効果を得ることができます。

<label><input type="checkbox" name="checkbox" id="checkbox_id" value="value">I agree</label>

3、CSS子セレクター

おそらく、これらの例では「サブセレクター」が最も一般的に使用されていますが、ほとんどの人はそれが実際にどれほど強力であるかを認識していません。子セレクターは、特定の要素のすべての要素を照合するために使用されます。それは 2 つの要素の関連付けです。

 /* 第一个子元素 */
 li:first-child { 
    color: red;
 }
/* 最后一个子元素 */
 li:last-child { 
     color: green;
 }
// 第4个以后的所有子元素 */
li:nth-child(n+4) {     
      color: yellow;    
}
/* 前3个子元素 */
li:nth-child(-n+3) {     
    color: green;    
}
/* 非段落（p）的子元素 */
.my-class:not(p) { 
    display: none;
}

作者：Django强哥
链接：https://juejin.cn/post/6886279040614236167
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

4. 出力モード（書き込みモード）

出力モードは CSS の非常に強力なプロパティですが、それについて知っている人はほとんどいません。テキストを垂直方向に表示できるようになります。

1行のコードwriting-mode: vertical-rl;

完全なコードは次のとおりです。

<style>
.sideway { 
   writing-mode: vertical-rl;
}
.normal {
   width: 5%;
   float: left;
}
</style>
<p class="normal">
     Hi some paragraph text
</p>
<p class="sideway"> 
     Hey I'm some sidway text 
</p>

writing-mode利用可能なプロパティは 5 つあります。

  writing-mode: horizontal-tb;
  writing-mode: vertical-rl;
  writing-mode: vertical-lr;
  writing-mode: sideways-rl;
  writing-mode: sideways-lr;

5、calc()メソッド

calc()は、CSS プロパティの値を計算する必要がある場合に使用する計算を実行できる CSS メソッドです。その最も強力な機能は、パーセンテージやピクセルなどの複数の単位を組み合わせて計算できることです。前処理は必要なく、レンダリング時に行われます。

width: calc(5px + 100px);
width: calc(6em * 8);
width: calc(100% - 50px);

6. Math.round と Math.floor を置き換えます

理解するのは簡単かもしれませんが、それでも実用的なテクニックです。

Math.floor()使用0|:

0|743.4343 // returns 743
Math.floor(743.4343) // returns 743

Math.round()使用+.5|0:

812.777+.5|0 // returns 813
Math.round(812.777) // returns 813

七、コンソール.テーブル

これを使用することについては聞いたことがあるかもしれませんconsole.log()が、配列やオブジェクトの出力console.table()に使用されることは。コンソール上にテーブルをエレガントに表示します。

配列：

let car1 = { name : "Audi", model : "A4" }
let car2 = { name : "Volvo", model : "XC90" }
let car3 = { name : "Ford", model : "Fusion" }
console.table([car1, car2, car3]);

8. コンソールタイム

console.time()タイマーを開始するもう 1 つの非常に便利なコンソール方法。呼び出された最初の引数をラベルとして扱います。同じラベルを使用して呼び出した場合cosnole.timeEnd()、コンソールにはconsole.time()呼び出し以降のconsole.timeEnd()ミリ秒数が表示されます。

// Starts the timer
console.time("MyTimer");
// Ends the timer and outputs the time in milliseconds
console.timeEnd("MyTimer");

9、In 演算子

in配列内のインデックスの存在を確認し、ブール値を返す演算子。

let cars = ['Audi', 'BMW', 'Mini', 'Bentley', 'Porsche'];
0 in cars        // returns true
3 in cars        // returns true
6 in cars        // returns false

オブジェクトに関連プロパティが含まれているかどうかを確認するためにも使用できます。

const person = { firstName : "Dave", surname: "Smith", age: 34 };
'firstName' in person  // returns true
'surname' in person    // returns true
'age' in person        // returns true
'gendar' in person     // returns false

10. Chromeをテキストエディタに変える

これはおそらく、これらのトリックの中で最もランダムなものです。URL バーに次のコードを入力すると、Chrome は数秒でエディターに変わります。

data:text/html, <html contenteditable>

著者: この機能の原理は HTML を編集可能に変更することであり、多くのオンラインリッチテキストエディターの基本原理はこの機能を適用することです。開発者ツールと併用すると、CSS と JS を入力して、いくつかの小さな機能を直接デバッグおよびテストできます。

11. if 内の複数行ステートメントは括弧を入力しない

通常、制作過程でこの方法を使用することはありませんが、多くの人が知らないことです。

if (1 === 1)
 alert("Alert 1"), alert("Alert 2");

要約する

これらのトリックやテクニックはすべてあまり実用的ではないかもしれませんが、そのうちのいくつかは間違いなくフロントエンド開発の経験を広げるでしょう。もっとたくさんのトリックがあると確信しています。読んでくれてありがとう。