ジャバスクリプト — DOM操作と機能

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

DOM操作を避ける

JavaScriptでは、動的に何かを表示したいなら、DOMを操作するのを避けるべきです.JavaScriptで直接操作するのではなく、CSSでスタイリングコードを簡単に置くことができます.
例えば、入力が無効になったときに入力を赤色にする場合は、次のHTMLコードを書くことができます.

<form>
  <input type='text' required>
  <button type='submit'>
    Submit
  </button>
</form>

次のJavaScriptコードとともに

const input = document.querySelector('input');
const form = document.querySelector('form');

form.onsubmit = (e) => {
  e.preventDefault();
}

input.oninvalid = () => {
  input.style.borderColor = 'red';
  input.style.borderStyle = 'solid';
  input.style.borderWidth = '1px';
}

私たちが見ることができるように、イベントハンドラで我々はoninvalid 入力のプロパティは、JavaScriptとの境界線を設定します.
しかし、代わりにクラスを作成し、代わりにJavaScriptでクラス名を設定することで、CSSでそれを行うことができます.
同じHTMLコードを保持しますが、次のCSSコードを追加します.

.invalid {
  border: 1px solid red;
}

JavaScriptのコードでは、以下のように置き換えます.

const input = document.querySelector('input');
const form = document.querySelector('form');

form.onsubmit = (e) => {
  e.preventDefault();
}

input.oninvalid = () => {
  input.className = 'invalid';
}

我々が見ることができるように、それははるかに短い方法で同じことを行います.これは、スタイルを動的に設定していないため、より少ない処理能力が必要です.
また、私たちは他のHTML要素で再利用することができるクラスとスタイルを持っています.

ショートカットの使用

JavaScriptでは、開発者が読むにはまだ明確なショートカットがたくさんあります.
例えば、オブジェクトを作成するときには、Object コンストラクタまたはオブジェクトリテラル表記.
とObject コンストラクタは、次のようにオブジェクトを作成できます.

let obj = new Object();
obj.foo = '1';
obj.bar = '2';
obj.baz = function() {
  console.log('baz');
}

あるいは、オブジェクトリテラル表記で同じことを書くことができます.

let obj = {
  foo: '1',
  bar: '2',
  baz() {
    console.log('baz');
  }
}

私たちは、同じ数の行を持っていますが、最初の例の各行のオブジェクト名を繰り返す必要があります.しかし、我々はオブジェクトリテラルでそれをする必要はありません.
オブジェクトリテラルはまた、明快さを向上させるので、Object オブジェクトを作成するコンストラクタです.両方とも同じことをしますが、オブジェクトを作成することによってコードを繰り返す必要はありませんObject コンストラクタ.
同様に、次のように配列を定義する代わりに

let arr = new Array();
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr[4] = 5;

書くことによって、より短い方法で定義できます.

let arr = [1, 2, 3, 4, 5];

見ることができるように、配列リテラルでそれを定義するのは短くなりますArray コンストラクタ.またArray コンストラクタは2つの署名を持っているので混乱しています.つの引数を渡すと、引数によって設定された長さの配列が得られます.さもなければ、我々は内容として渡された引数を持つ配列を得ます.
もう一つの便利なショートカットは三項演算子です.
例えば、書く代わりに

const x = 100;
let foo;
if (x === 100) {
  foo = 'bar';
} else {
  foo = 'baz';
}

書くことができます.

const x = 100;
let foo = (x === 100) ? 'bar' : 'baz';

上のコードで

let foo;
if (x === 100) {
  foo = 'bar';
} else {
  foo = 'baz';
}

と同じです.

let foo = (x === 100) ? 'bar' : 'baz';

両方ともx では、次に100'bar' to foo を返します.'baz' を返します.
このコードは、三項演算子を使用して、より短くなります.また、コードを読みにくくすることはありません.
写真でAustin Distel をUnsplash

タスク当たり1つの関数

一般的に、関数は一つだけを行うべきです.これは、各機能を短く、読みやすいです.
また、それぞれの関数で機能の競合が少なくなるため、再利用を容易にします.
また、共通のタスクのヘルパー機能を作成するのは良いアイデアです.
たとえば、ページ上のいくつかの要素をその場で作成したい場合.書くこともできます.

const createPage = () => {
  const items = ['foo', 'bar', 'baz'];
  const ul = document.createElement('ul');
  let li;
  for (const item of items) {
    li = document.createElement('li');
    li.textContent = item;
    ul.appendChild(li);
  }
  document.body.appendChild(ul);

  const googleLink = document.createElement('a');
  googleLink.href = '[http://www.googole.com'](http://www.googole.com%27);
  googleLink.textContent = 'Google';
  document.body.appendChild(googleLink);

  const yahooLink = document.createElement('a');
  yahooLink.href = '[http://www.yahoo.com'](http://www.yahoo.com%27);
  yahooLink.textContent = 'Yahoo';
  document.body.appendChild(yahooLink);
}

createPage();

または書くことができます.

const createLink = (textContent, href) => {
  const link = document.createElement('a');
  link.href = href;
  link.textContent = textContent;
  return link;
}

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

const items = ['foo', 'bar', 'baz'];
const ul = createUl(items);
const googleLink = createLink('Google', '[http://www.google.com'](http://www.google.com%27));
const yahooLink = createLink('Google', '[http://www.yahoo.com'](http://www.yahoo.com%27));
document.body.appendChild(ul);
document.body.appendChild(googleLink);
document.body.appendChild(yahooLink);

私たちは、同じ入力を与えられた同じものを常に返す関数にコードを分割するので、2番目の方法を書くべきです.
また、どこでも呼び出すことができます.それで、我々が我々が呼ぶことができるもう一つの関連を望むならばcreateLink 例えば、再び.
また、要素を返すので、関数の外側にアタッチすることができます.これは、すぐにアタッチせずにオンザフライで要素を作成することができます.

結論

クライアント側のJavaScriptコードを扱うときには、DOMの操作をできるだけ高速にし、コードの複雑さを減らすのを避けるべきです.
また、JavaScriptのショートカットの多くは、コンストラクタの代わりにリテラルを使用するように意味をなします.
最後に、コードを分割して1つのタスクを行い、物事を読みやすく維持する機能を分割する必要があります.また、機能を競合する機能を持っていない再利用を容易にします.