일일 js 개발 사양

이 기사에서는 JavaScript의 일상적인 개발 사양에 대해 이야기하여 앞으로 JavaScript의 일상적인 개발에 종사하는 모든 사람이 작성하는 js 코드가 더 표준화될 수 있도록 관심 있는 학생들이 이 기사를 살펴볼 수 있습니다! 일일 개발 표준은 여전히 ​​매우 중요합니다!

프런트 엔드 함정에 의존하기 전과 후에 여러 프로젝트를 작성했습니다. JavaScript로 대화형 논리를 작성할 때 전역 변수 오염, 코드 재사용성 저하, 단순성 저하 등과 같은 일부 쓰레기 코드를 직접 작성했습니다. 코드 유지 관리 후 약간의 혼란이 발생했습니다. 다음은 JS 코딩에서 개선해야 할 몇 가지 영역으로, 개발에 직접 적용할 수 있고 보다 우아한 코드를 작성하는 데 전념할 수 있습니다.

코드 사양에 관해 말하면 다음 사양에는 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 대신 let을 사용하세요. no-var jscs: disallowVar

let은 현재 {}의 블록 수준 범위에 속합니다. var는 Function 범위

//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에는 [TDZ(Temporary Dead Zones)]라는 개념이 부여되어 있기 때문에 그들이 선언하는 변수는 변수 승격 대상이 아닙니다. . 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 대신 객체의 얕은 복사본을 사용하는 것이 가장 좋습니다... of Object .ass()

// 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.sign()을 사용하면 예상치 못한 문제가 발생할 수 있습니다.

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를 계속 전달할 수 있는 새로운 실행 환경을 생성하기 때문입니다. 작성 방법도 더 간결합니다.

함수가 더 복잡할 경우 화살표 함수를 사용할 때 문제가 발생하기 쉽습니다. 함수 선언을 대신 사용할 수 있습니다.

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

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

5.2

함수가 한 줄에 들어가고 매개변수가 하나만 있는 경우 중괄호, 괄호 및 반환을 생략하세요. 그렇지 않다면 생략하지 마십시오.

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

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

6. Constructor

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!