日々のjs開発仕様

この記事では、JavaScript の日常的な開発仕様について説明します。これにより、将来の JavaScript の日常的な開発で皆さんが作成する JS コードがより標準化されます。興味のある学生はこの記事を参照してください。日々の開発標準は依然として非常に重要です。

私はフロントエンドの落とし穴に依存する前後にいくつかのプロジェクトを書いてきました。JavaScript でインタラクティブなロジックを作成する際、グローバル変数の汚染、コードの再利用性の低さ、単純さの低さなど、多かれ少なかれゴミコードを作成しました。コードのメンテナンス後に混乱が生じました。以下に、JS コーディングで改善する必要があるいくつかの領域を示します。これらの領域は、開発に直接適用して、より洗練されたコードの作成に取り組むことができます。

コード仕様と言えば、ESLint ルールを思い浮かべるかもしれません。次の仕様には、ESLint ルールに関連する説明があり、おそらく ESLint を使用するときに表示される関連エラー メッセージも役立つでしょう。

1. 変数の宣言

1.1 変数の宣言には var を使用せず、const を使用するようにしてください

eslint:prefer-const, no-const-assign

var の使用を回避すると、グローバル変数を減らすことができます汚染の問題がある場合は、const を使用してください。宣言された変数が一意であり、再割り当てできないことを確認してください。

//bad
var a = 1;
//best
const a = 1;

1.2 可変参照を宣言する必要がある場合は、var

eslint: no-var jscs: disallowVar

let の代わりに let を使用し、現在の {} のブロックレベルのスコープに属し、かつvar は 関数スコープ

//bad
var count = 1;
if (true) {
	var count = 2;
}
console.log(count)


//best
let count = 1;
if (true) {
	let count = 2;
}
console.log(count)

1.3 に属します。宣言された let と const

をグループ化すると、コードの可読性が向上します。

//bad
let a = 1;
const obj = {};
let num = 0;
const page = 10;

//best
let a = 1;
let num = 0;
const obj = {};
const page = 10;

1.4 letとconstで宣言した変数を適切な場所に配置する

letとconstには【Temporary Dead Zones(TDZ)】という概念が与えられているため、それが決まっている 宣言した変数は変数昇格の対象にはならない。 var で宣言された変数はスコープの先頭に昇格されます。

2. オブジェクトを使用する

2.1 リテラルを使用する

eslint: no-new-object

//bad
const obj = new Object();

//good
const obj = {};

2.2 オブジェクトのメソッドは省略形です

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

2.3 オブジェクトのプロパティも省略形を使用します

eslint: object-shorthand jscs: requireEnhancedObjectLiterals

const hello = "你好";

//bad
const obj = {
	hello:hello
};

//best
const obj = {
	hello,
};

2.4 hasOwnProperty、propertyIsEnumerable、isPrototypeOf などの Object.prototype メソッドを直接使用しないでください。

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
const has = require('has');
…
console.log(has.call(object, key));

2.5 代わりにオブジェクトの浅いコピーを使用するのが最善です... Object.assign() の

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original`
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

Object.assign() を使用すると、予期しない問題が発生します。

3. 配列を使用する

3.1 リテラルを使用して配列を作成する

eslint: no-array-constructor

// bad
const arr= new Array();

// good
const arr= [];

3.2 スプレッド演算子を使用して配列をコピーする

// bad
const arr= new Array();

// good
const arr= [];

// bad
const len = arr.length;
const arrCopy = [];
let i;

for (i = 0; i < len; i++) {
  arrCopy[i] = arr[i];
}

// good
const arrCopy = [...arr];

3.3 Array.from を使用してクラス配列を変換する配列

const list = document.getElementsByTagName("li");
const liNodes = Array.from(list);

4. 関数

4.1

関数式の代わりに関数宣言を使用する

なぜですか?なぜなら、関数で宣言された関数が最初に認識されて変数が巻き上げられる（巻き上げられる）のに対し、関数式は関数の参照変数名を巻き上げるだけ（つまり変数巻き上げ）だからです。

// bad
  const fn= function () {
  };

  // good
  function fn() {
  }

4.2 関数を関数以外のコード ブロック (if、else、while など) で宣言せず、その関数を変数に割り当てます。前者はエラーを報告しませんが、ブラウザーの解析方法は異なります。

// bad
if (ifLogin) {
  function test() {
    console.log(' logged');
  }
}

// good
let test;
if (ifLogin) {
  test = () => {
    console.log(' logged');
  };
}

4.3 引数の使用を避け、残りの構文を使用します...代わりに

その理由は、引数がクラス配列であり、配列固有のメソッドがなく、そして...渡すパラメータを明確にすることができるためです。それらは実数配列です。

// bad
  function myconcat() {
    const args = Array.prototype.slice.call(arguments);
    return args.join('');
  }

  // good
  function myconcat(...args) {
    return args.join('');
  }

5. アロー関数

5.1 関数式を使用する必要がある場合 (または匿名関数を渡す必要がある場合)、代わりにアロー関数を使用できます。その理由は、新しい関数を使用すると新しい関数スコープが作成され、this の現在のポイントが変更され、アロー関数は新しい this 実行環境を作成し、現在の環境の this を引き続き渡すことができるためです。書き方もより簡潔になります。

関数がより複雑な場合、アロー関数を使用すると問題が発生しやすくなります。代わりに関数宣言を使用できます。

// bad
  [1, 3, 5].map(function (x) {
    return x * x;
  });

  // good
  [1, 3, 5].map((x) => {
    return x * x;
  });

5.2

関数が 1 行に収まり、引数が 1 つだけの場合は、中括弧、括弧、および return を省略します。そうでない場合は、省略しないでください。

 // good
  [1, 2, 3].map(x => x * x);

  // good
  [1, 2, 3].reduce((total, n) => {
    return total + n;
  }, 0);

6. コンストラクター

6.1 プロトタイプ属性を直接操作することを避けるために、常にクラスを使用します

このように書くとより簡潔になります。

// bad
  function Queue(contents = []) {
    this._queue = [...contents];
  }
  Queue.prototype.pop = function() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }


  // good
  class Queue {
    constructor(contents = []) {
      this._queue = [...contents];
    }
    pop() {
      const value = this._queue[0];
      this._queue.splice(0, 1);
      return value;
    }
  }

7. モジュール開発

7.1 モジュールのアイデアを使用してビジネスを作成します。

モジュールを使用して論理的なビジネスを記述すると、コードがより統合され、スケーラブルになります。同様のライブラリには、seaJS と requireJS があります

7.2少使用通配符import

这样更能够确保你只有一个模块被你import，而那些不必要的模块不会被import，减少代码体积。

  // bad
  import * as webUI from './WEB';

  // good
  import webUI from './WEB';

8.使用高阶函数如map()和reduce()代替for~of

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

  // bad
  let sum = 0;
  for (let num of arr) {
    sum += num;
  }

  sum === 15;

  // good
  let sum = 0;
  arr.forEach((num) => sum += num);
  sum === 15;

  // best (use the functional force)
  const sum = arr.reduce((total, num) => total + num, 0);
  sum === 15;

9.比较运算符

9.1优先使用===和！==而不是==和！=

===和！==不会进行强制类型转换，后者则会

9.2在做if条件判断时强制类型转换规则

• 对象都会被转为true

• null、undefined、NaN被转为false

• 布尔值转为对应的布尔值

• 数字中+0 -0 0都被计算为false，否则为true

• 字符串   如果是“”空字符串，被计算为fasle，否则为true

相关推荐：

Web 前端代码规范

JavaScript代码规范和性能整理

HTML(5) 代码规范

以上が日々のjs開発仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。