ジャバスクリプト — ブラウザの違い、パフォーマンスと詳細

アマゾンで私の本をチェックしてくださいhttps://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
今すぐ私の電子メールリストを購読http://jauyeung.net/subscribe/
他のプログラミング言語と同様に、JavaScriptはプログラムを読みやすく維持するためにベストプラクティスの独自のリストを持っています.JavaScriptにトリッキーな部分がたくさんあるので、コードの品質を低下させないようにするべきことがあります.ベストプラクティスに従うことによって、我々は誰でも簡単に動作するようにエレガントで扱いやすいコードを作成することができます.
この記事では、古いブラウザーを優雅にサポートする方法を見てみます.

累進的強化

進歩の強化は、いくつかの技術が利用できないときに優雅に私たちのアプリを悪化させる必要があることを意味します.これは、いくつかの技術をサポートするすべてのブラウザでサポートされている場合、いくつかの方法で我々のアプリの作業を維持するかどうかチェックする必要があることを意味します.
また、私たちがサポートしていない古いブラウザを持っていない新しい技術のサポートを追加するには、ポリフィルを追加することができます.
たとえば、我々がInternet Explorer 11で利用できない新しい配列メソッドを使用したいならば、我々のアプリはまだブラウザを支持します、そして、我々はそれのためにポリフィルを加えるか、その存在をチェックしなければならなくて、衝突の代わりに何か異なることをしなければなりません.

ヘビを避ける

コードの入れ子をたくさん持っている彼らは非常に読むことを混乱させる.これは、コードのロジックに従うのはとても難しいからです.
入れ子条件文とループを最小限に保つ必要があります.
例えば、書く代わりに

const items = {
  foo: [1, 2, 3],
  bar: [1, 2, 3],
  baz: [1, 2, 3]
};

const parentUl = document.createElement('ul');
for (const item of Object.keys(items)) {
  const parentLi = document.createElement('li');
  const childUl = document.createElement('ul');
  for (const num of items[item]){
    const childLi = document.createElement('li');
    childLi.textContent = num;
    childUl.appendChild(childLi);
  }
  parentLi.textContent = item;
  parentLi.appendChild(childUl);
  parentUl.appendChild(parentLi);
}
document.body.appendChild(parentUl);

これは入れ子になったリストを作成します.リスト作成を関数に分離して代わりに関数を呼び出すことでネストを減らす必要があります.

const items = {
  foo: [1, 2, 3],
  bar: [1, 2, 3],
  baz: [1, 2, 3]
};

const createUl = (items) => {
  const ul = document.createElement('ul');
  for (const item of items) {
    const li = document.createElement('li');
    li.textContent = item;
    ul.appendChild(li);
  }
  return ul;
}

const parentUl = createUl(Object.keys(items));
const parentLis = parentUl.querySelectorAll('li');
for (const parentLi of parentLis) {
  const childUl = createUl(items[parentLi.textContent]);
  parentLi.appendChild(childUl);
}
document.body.appendChild(parentUl);

見ることができるように、上記のコードには入れ子状のループがなく、コードを読みやすくします.また、我々はcreateUl 関数を作成するul 内部のエントリを持つ要素を返します.ui 要素オブジェクト.
これは、ドキュメントまたはHTML要素の後に私たちがそれを添付することができることを意味します.

ループを最適化する

すべてのリテラルで使用される値を単一の変数にキャッシュする必要があります.
これは私たちがこれをするたびに、CPUはメモリ内の項目に何度もアクセスして結果を計算する必要があるからです.
したがって、我々はできるだけ少しこれをしなければなりません.
例えば、ループがあれば、次のように書くべきではありません.

for (let i = 0; i < arr.length; i++) {

}

代わりに

let length = arr.length;
for (let i = 0; i < length; i++) {

}

このようにarr.length は、すべての反復でアクセスするのではなく、ループ内で一度だけ参照されます.
写真でAdrien CÉSARD をUnsplash

DOMアクセスを最小値に保つ

DOM操作はCPUとメモリ集中操作です.したがって、我々は最小限に保つために努力する必要があります.
これは、ページをできるだけシンプルにしなければならず、必要に応じてDOM操作を行うだけです.どんな静的なスタイルもCSSでなければならなくて、Javascriptでその場で加えられません.
また、HTMLに静的要素を保持し、DOMを操作することでそれらを作成する必要はありません.
また、コードの最上位レベルでDOM操作を連続的に実行するのではなく、要素を作成し、それらを呼び出す関数を作成する必要があります.

すべてのブラウザーのコードを書く

すべてのブラウザは、我々のコードで同じ処置を得なければなりません.ブラウザがバージョンを変えるとき、これらのハックが速く壊れてしまうので、いろいろなブラウザーに対応するためにハックを書くべきではありません.
標準として受け入れられているコードや、Moderizizrのようなライブラリを使って、別のブラウザの問題に対処する必要があります.
また、さまざまなブラウザで不足しているすべての機能を追加するには、ポリフィルを追加することができますので、私たちのアプリを別のブラウザで実行し続けることができますが、彼らはボックスのいくつかの機能をサポートしていない可能性があります.

任意のデータを信頼しないでください

ユーザが入力したデータをチェックしてください.HTML 5には有効な入力をチェックするフォーム検証機能がたくさんあります.HTML 5とプレーンのJavaScriptでそれを行うことができます.
入力データをチェックすると、変数のデータをチェックし、関数から返される必要があります.JavaScriptは動的にタイプされた言語であるので、これらのことをチェックしなければなりません.
プリミティブ値については、typeof 演算子はデータ型をチェックします.例えば、

let x = 1;

Then typeof x は'number' ○○.Boolean、String、Undefinedなどの他のプリミティブデータ型は同じです.
唯一の例外はnull これは型オブジェクトを持つ.
常に値をチェックしてくださいnull or undefined 彼らは私たちのプログラムをクラッシュさせる可能性がありますので.書くことでそれができるx === null and typeof x === 'undefined' それぞれ.
また、条件文と関数呼び出しのように、JavaScriptで行われた型強制に注意する必要があります.例えば、Math.min メソッドは引数を呼び出したときにその引数を数値に変換します.The == 演算子は結果を返す前にすべてのオペランドを同じ型に変換します.
オブジェクトについては、instanceof 演算子を作成します.たとえば、配列が存在する場合、

let arr = [];

Then [] instanceof Array はtrue ○○.配列も静的isArray データ型をチェックする方法.
JavaScriptコードでは、我々は、我々は我々のアプリをサポートしている別のブラウザの違いを認識する必要があります書いてください.これは、我々が使用したいメソッドが存在するかどうかをチェックし、古いブラウザーに欠落している機能を追加するためにPolyFillsを追加するかどうかを示します.
ループ内で繰り返しアクセスされる変数とプロパティをキャッシュする必要があります.
深い入れ子も、コードをクリアし、従うことを容易にするために回避する必要があります.
また、DOM操作が高価な操作であるので、それは最小限に保たれなければなりません.静的なスタイルと要素はそれぞれCSSとHTMLにあるべきです.
最後に、我々は我々のアプリのデータを信頼すべきではない.入力は形式と妥当性のためにチェックされなければなりません、そして、我々の変数と値のデータはタイプ(例えば含む)をチェックされなければなりませんnull or undefined ○○.