フロントエンドコードガイド(三)

フロントエンドコードガイド(一)フロントエンドコードガイド(二)フロントエンドコードガイド(三)
javascript
注:`下のES 6の文法.
パフォーマンス
性能の中で最も重要なのは可読性と正確性と表現性です.JavaScriptは基本的にいつまでもあなたの性能のボトルネックになりません.画像圧縮、ネットワークアクセス、リフローなどによって性能を最適化できます.文章を読んだら一つしか覚えられません.これを覚えてください.

//     (albeit way faster)
const arr = [1, 2, 3, 4];
const len = arr.length;
var i = -1;
var result = [];
while (++i < len) {
  var n = arr[i];
  if (n % 2 > 0) continue;
  result.push(n * n);
}

//    
const arr = [1, 2, 3, 4];
const isEven = n => n % 2 == 0;
const square = n => n * n;

const result = arr.filter(isEven).map(square);

領域なし
できるだけピュアな関数を維持します.理想的には、副作用のない、外部データを使用しない、新しいオブジェクト(既存のものを変更するのではなく)の関数を作成します.

//    
const merge = (target, ...sources) => Object.assign(target, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

//    
const merge = (...sources) => Object.assign({}, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

原生
できるだけ原生に頼る方法.

//    
const toArray = obj => [].slice.call(obj);

//    
const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

強制
必要でない時は隠し強制をしないでください.

//    
if (x === undefined || x === null) { ... }

//    
if (x == undefined) { ... }

ループ
サイクルを使わないでください.彼らはあなたに可変のオブジェクトを使うように強制します.array.prototype方法に依存することができます.

//    
const sum = arr => {
  var sum = 0;
  var i = -1;
  for (;arr[++i];) {
    sum += arr[i];
  }
  return sum;
};

sum([1, 2, 3]); // => 6

//    
const sum = arr =>
  arr.reduce((x, y) => x + y);

sum([1, 2, 3]); // => 6

循環を避けることができない場合、またはarray.prototype方法を使用することは、あなたにとって虐待された行為であり、再帰的な方法を使用することができます.

//    
const createDivs = howMany => {
  while (howMany--) {
    document.body.insertAdjacentHTML("beforeend", "<div></div>");
  }
};
createDivs(5);

//    
const createDivs = howMany =>
  [...Array(howMany)].forEach(() =>
    document.body.insertAdjacentHTML("beforeend", "<div></div>")
  );
createDivs(5);

//    
const createDivs = howMany => {
  if (!howMany) return;
  document.body.insertAdjacentHTML("beforeend", "<div></div>");
  return createDivs(howMany - 1);
};
createDivs(5);

パラメータ
オブジェクトを忘れました.残りのパラメータを使うのがより良い選択です.

の残りのパラメータは名前が付けられていますので、この関数のパラメータにもっと注意してください.

の残りのパラメータは本物の配列であり、それがより使いやすくなる.

//    
const sortNumbers = () =>
  Array.prototype.slice.call(arguments).sort();

//    
const sortNumbers = (...numbers) => numbers.sort();

Apple
Apple()関数を忘れ、代わりに拡張機能を使います.

const greet = (first, last) => `Hi ${first} ${last}`;
const person = ["John", "Doe"];

//    
greet.apply(null, person);

//    
greet(...person);

結合
bind関数を忘れました.ここにもっと慣用的な方法があります.

//    
["foo", "bar"].forEach(func.bind(this));

//    
["foo", "bar"].forEach(func, this);

//    
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = function() {
      return `${this.first} ${this.last}`;
    }.bind(this);
    return `Hello ${full()}`;
  }
}

//    
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = () => `${this.first} ${this.last}`;
    return `Hello ${full()}`;
  }
}

トップレベルの関数
必要でない時は入れ子関数を使用しないでください.

//    
[1, 2, 3].map(num => String(num));

//    
[1, 2, 3].map(String);

構造
関数のマルチレベル呼び出しを回避し、構造を合理的に使用して問題を解決します.

const plus1 = a => a + 1;
const mult2 = a => a * 2;

//    
mult2(plus1(5)); // => 12

//    
const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val);
const addThenMult = pipeline(plus1, mult2);
addThenMult(5); // => 12

キャッシュ
キャッシュ機能テスト、大データ構造、および任意の高価な動作.

//    
const contains = (arr, value) =>
  Array.prototype.includes
    ? arr.includes(value)
    : arr.some(el => el === value);
contains(["foo", "bar"], "baz"); // => false

//    
const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false

変数argumentsはconstより優れています.letより優れています.

//    
var me = new Map();
me.set("name", "Ben").set("country", "Belgium");

//    
const me = new Map();
me.set("name", "Ben").set("country", "Belgium");

条件varはif+return とif...else if...elseより優れています.

//    
var grade;
if (result < 50)
  grade = "   ";
else if (result < 90)
  grade = "   ";
else
  grade = "excellent";

//    
const grade = (() => {
  if (result < 50)
    return "   ";
  if (result < 90)
    return "   ";
  return "excellent";
})();

オブジェクトの繰り返しswitchの使用を避ける

const shared = { foo: "foo" };
const obj = Object.create(shared, {
  bar: {
    value: "bar",
    enumerable: true
  }
});

//    
for (var prop in obj) {
  if (obj.hasOwnProperty(prop))
    console.log(prop);
}

//    
Object.keys(obj).forEach(prop => console.log(prop));

対象をmapsとする
オブジェクトは合法的な用例ですが、mapはより強力な選択です.

//    
const me = {
  name: "Ben",
  age: 30
};
var meSize = Object.keys(me).length;
meSize; // => 2
me.country = "Belgium";
meSize++;
meSize; // => 3

//    
const me = new Map();
me.set("name", "Ben");
me.set("age", 30);
me.size; // => 2
me.set("country", "Belgium");
me.size; // => 3

コリ化
多くの開発者にとって、コリー化は海外の風格を持つ強力な形式です.合理的に使うのはとてもいいですが、乱用しないでください.

//    
const sum = a => b => a + b;
sum(5)(3); // => 8

//    
const sum = (a, b) => a + b;
sum(5, 3); // => 8

可読性
表面が巧妙に見える技術を使って、コードの意味が曖昧にならないようにしてください.

//    
foo || doSomething();

//    
if (!foo) doSomething();

//    
void function() { /* IIFE */ }();

//    
(function() { /* IIFE */ }());

//    
const n = ~~3.14;

//    
const n = Math.floor(3.14);

コード多重化
いくつかの小型、高さの組み合わせ、再利用可能な関数を作成することに抵抗しないでください.

//    
arr[arr.length - 1];

//    
const first = arr => arr[0];
const last = arr => first(arr.slice(-1));
last(arr);

//    
const product = (a, b) => a * b;
const triple = n => n * 3;

//    
const product = (a, b) => a * b;
const triple = product.bind(null, 3);

依存性
依存を減らす.第三者のコードはあなたが知らないので、コピー可能な関数のいくつかのために第三者ファイル全体をロードしないでください.

//    
var _ = require("underscore");
_.compact(["foo", 0]));
_.unique(["foo", "foo"]);
_.union(["foo"], ["bar"], ["foo"]);

//    
const compact = arr => arr.filter(el => el);
const unique = arr => [...Set(arr)];
const union = (...arr) => unique([].concat(...arr));

compact(["foo", 0]);
unique(["foo", "foo"]);
union(["foo"], ["bar"], ["foo"]);

本文がいいと思ったら、下のオススメをクリックしてください.