프런트엔드 JavaScript 프로그래밍 스타일에 대한 간략한 분석

머리말

자세한 내용은 jscs.info를 참조하세요. 다음 내용은 주로 Airbnb의 JavaScript 스타일 사양을 참조하세요. 물론 구글 등에서 프로그래밍 제안도 있습니다. 프로그래밍 스타일

이 장에서는 ES6의 새로운 구문을 기존 JavaScript 구문과 결합하여 합리적이고 쉽게 작성하는 방법에 대해 설명합니다. -코드를 읽고 유지 관리합니다.

프로그래밍 스타일

블록 수준 범위

(1) let replacement var

ES6에서는 두 가지 새로운 선언을 제안합니다. 변수 명령: 하자와 const. 그 중 let은 var를 완전히 대체할 수 있는데, 둘의 의미가 동일하고 부작용이 없기 때문입니다.

'use strict';
if (true) {
  let x = 'hello';
}
for (let i = 0; i < 10; i++) {
  console.log(i);
}

참고: 위 코드에서 let 대신 var를 사용하면 실제로 두 개의 전역 변수가 선언되는데 이는 의도한 바가 아닙니다. 변수는 선언된 코드 블록 내에서만 유효해야 합니다. var 명령은 이를 수행할 수 없습니다.

var 명령에는 변수 승격 효과가 있지만 let 명령에는 이 문제가 없습니다.

'use strict';

if(true) {
  console.log(x); // ReferenceError
  let x = 'hello';
}

참고: 위 코드에서 let 대신 var를 사용하는 경우 console.log 줄은 오류를 보고하지만 변수 선언이 코드 블록의 헤드로 끌어올려지기 때문에 정의되지 않은 결과가 출력됩니다. 이는 변수를 먼저 선언하고 나중에 사용하는 원칙에 위배됩니다.

(2) 전역 상수와 스레드 안전성

let보다 const가 더 나은 데에는 몇 가지 이유가 있습니다. 하나는 const가 프로그램을 읽는 사람들에게 이 변수가 변경되어서는 안 된다는 점을 상기시킬 수 있다는 것입니다. 다른 하나는 const가 함수형 프로그래밍의 개념에 더 부합한다는 것입니다. 이 작업은 값을 변경하지 않고 새 값만 생성합니다. 이는 향후 분산 작업에도 도움이 됩니다. 마지막 이유는 JavaScript 컴파일러가 const를 최적화하므로 더 많은 const를 사용하면 프로그램의 실행 효율성을 높이는 데 도움이 된다는 것입니다. 즉, let과 const의 본질적인 차이점은 실제로 차이입니다. 컴파일러의 내부 처리에서.

// bad
var a = 1, b = 2, c = 3;

// good
const a = 1;
const b = 2;
const c = 3;

// best
const [a, b, c] = [1, 2, 3];

참고: const 상수를 선언하면 두 가지 이점이 있습니다. 첫째, 코드를 읽는 사람은 값을 수정해서는 안 된다는 것을 즉시 깨닫게 됩니다. 둘째, 실수로 변수 값을 수정하여 발생하는 오류를 방지할 수 있습니다. JavaScript에는 다중 스레드 구현이 있을 수 있습니다(예: Intel의 River Trail 프로젝트). 이 경우 let으로 표시된 변수는 단일 스레드에서 실행되는 코드에만 나타나야 하며 여러 스레드에서 공유할 수 없습니다. 이는 스레드 안전을 보장하는 데 도움이 됩니다.

문자열

정적 문자열은 항상 작은따옴표나 백틱을 사용하지만 큰따옴표는 사용하지 마세요. 동적 문자열은 백틱을 사용합니다.

// bad
const a = "foobar";
const b = 'foo' + a + 'bar';
// acceptable
const c = `foobar`;
// good
const a = 'foobar';
const b = `foo${a}bar`;
const c = 'foobar';

구조 분해 할당

배열 멤버를 사용하여 변수에 값을 할당할 때는 구조 분해 할당이 선호됩니다.

const arr = [1, 2, 3, 4];
// bad
const first = arr[0];
const second = arr[1];
// good
const [first, second] = arr;

함수의 매개변수가 객체의 멤버인 경우 구조 분해 할당이 선호됩니다.

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}
// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}
// best
function getFullName({ firstName, lastName }) {
}

함수가 여러 값을 반환하는 경우 배열의 구조 분해 할당 대신 객체의 구조 분해 할당이 선호됩니다. 이렇게 하면 나중에 반환 값을 추가하고 반환 값의 순서를 변경하는 것이 더 쉬워집니다.

// bad
function processInput(input) {
  return [left, right, top, bottom];
}
// good
function processInput(input) {
  return { left, right, top, bottom };
}
const { left, right } = processInput(input);

객체

한 줄로 정의된 객체로, 마지막 멤버는 쉼표로 끝나지 않습니다. 여러 줄에 정의된 개체의 경우 마지막 멤버는 쉼표로 끝납니다.

// good
const a = { k1: v1, k2: v2 };
const b = {
  k1: v1,
  k2: v2,
};

객체는 가능한 한 정적이어야 합니다. 일단 정의되면 새 속성을 마음대로 추가하면 안 됩니다. 속성 추가가 불가피한 경우 Object.asset 메서드를 사용하세요.

// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;

객체의 속성 이름이 동적인 경우 객체 생성 시 속성 표현식을 사용하여 이를 정의할 수 있습니다.

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

배열

확산 연산자(…)를 사용하여 배열을 복사합니다.

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}
// good
const itemsCopy = [...items];

배열 유사 객체를 배열로 변환하려면 Array.from 메서드를 사용하세요.

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

함수

즉시 실행 함수는 화살표 함수 형태로 작성할 수 있습니다.

(() => {
  console.log('Welcome to the Internet.');
})();

함수 표현식을 사용해야 하는 상황에서는 대신 화살표 함수를 사용해 보세요. 왜냐하면 이것이 더 간결하고 이것을 묶기 때문입니다.

// bad
[1, 2, 3].map(function (x) {
  return x * x;
});
// good
[1, 2, 3].map((x) => {
  return x * x;
});
// best
[1, 2, 3].map(x => x * x);

화살표 함수는 Function.prototype.bind를 대체하며 이를 바인딩하기 위해 더 이상 self/_this/that을 사용해서는 안 됩니다.

// bad
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
}

// acceptable
const boundMethod = method.bind(this);

// best
const boundMethod = (...params) => method.apply(this, params);

단순하고 한 줄짜리이며 재사용이 불가능한 기능에는 화살표 기능을 사용하는 것이 좋습니다. 함수 본문이 복잡하고 줄 수가 많은 경우에는 전통적인 함수 작성 방법을 사용해야 합니다.

모든 구성 항목은 하나의 객체에 집중되어야 하며 부울 값을 매개변수로 직접 사용할 수 없습니다.

// bad
function pide(a, b, option = false ) {
}

// good
function pide(a, b, { option = false } = {}) {
}

함수 본문 내에서 인수 변수를 사용하지 말고 대신 나머지 연산자(…)를 사용하세요. 나머지 연산자는 매개변수를 가져오고 싶다고 명시적으로 명시하고 인수는 배열과 유사한 객체이므로 나머지 연산자는 실제 배열을 제공할 수 있습니다.

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

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

기본값 구문을 사용하여 함수 매개변수의 기본값을 설정합니다.

// bad
function handleThings(opts) {
  opts = opts || {};
}

// good
function handleThings(opts = {}) {
  // ...
}

맵 구조

객체는 실제 세계에서 엔터티 객체를 시뮬레이션할 때만 사용하세요. key: value 데이터 구조만 필요한 경우 Map 구조를 사용하세요. Map에는 순회 메커니즘이 내장되어 있기 때문입니다.

let map = new Map(arr);
for (let key of map.keys()) {
  console.log(key);
}
for (let value of map.values()) {
  console.log(value);
}
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

모듈 모듈

모듈 구문은 JavaScript 모듈을 작성하는 표준 방식이므로 이 방식을 고수하세요. require 대신 import를 사용하세요. 일반적인 작성 방법은 다음과 같습니다.

import { func1, func2 } from 'moduleA';

module.exports 대신 내보내기 사용

// commonJS的写法
var React = require('react');

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

module.exports = Breadcrumbs;

// ES6的写法
import React from &#39;react&#39;;

const Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

export default Breadcrumbs

모듈에 출력 값이 하나만 있는 경우 모듈에 출력 값이 여러 개 있는 경우 내보내기 기본값을 사용합니다. 내보내기 기본값을 사용하지 마십시오. 내보내기 기본값과 일반 내보내기를 동시에 사용하지 마십시오.

모듈 입력에 와일드카드 문자를 사용하지 마세요. 이는 모듈에 기본 출력(기본값 내보내기)이 있음을 보장하기 때문입니다.

import myObject from './importModule';

모듈이 기본적으로 함수를 출력하는 경우 함수 이름의 첫 글자는 소문자여야 합니다. 이는 낙타 표기법 명명의 코딩 스타일이기도 합니다.

function makeStyleGuide() {}
export default makeStyleGuide;

如果模块默认输出一个对象，对象名的首字母应该大写。

const StyleGuide = {
  es6: {
  }
};
export default StyleGuide;

ESLint

ESLint是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。和lint的使用差不多
首先，安装ESLint。

npm i -g eslint

然后，安装Airbnb语法规则。

npm i -g eslint-config-airbnb

最后，在项目的根目录下新建一个.eslintrc文件，配置ESLint。

{
  "extends": "eslint-config-airbnb"
}

比如：

var unusued = 'I have no purpose!';

function greet() {
    var message = 'Hello, World!';
    alert(message);
}

greet();

然后我们使用命令，就可以检查语法的问题，并给出相关建议。

eslint index.js

$ eslint index.js
index.js
  1:5  error  unusued is defined but never used                 no-unused-vars
  4:5  error  Expected indentation of 2 characters but found 4  indent
  5:5  error  Expected indentation of 2 characters but found 4  indent

x 3 problems (3 errors, 0 warnings)

 以上就是前端 JavaScript 编程风格浅析 的内容，更多相关内容请关注PHP中文网（www.php.cn）！