이 기사에서는 JavaScript의 일상적인 개발 사양에 대해 이야기하여 앞으로 JavaScript의 일상적인 개발에 종사하는 모든 사람이 작성하는 js 코드가 더 표준화될 수 있도록 관심 있는 학생들이 이 기사를 살펴볼 수 있습니다! 일일 개발 표준은 여전히 매우 중요합니다!
프런트 엔드 함정에 의존하기 전과 후에 여러 프로젝트를 작성했습니다. JavaScript로 대화형 논리를 작성할 때 전역 변수 오염, 코드 재사용성 저하, 단순성 저하 등과 같은 일부 쓰레기 코드를 직접 작성했습니다. 코드 유지 관리 후 약간의 혼란이 발생했습니다. 다음은 JS 코딩에서 개선해야 할 몇 가지 영역으로, 개발에 직접 적용할 수 있고 보다 우아한 코드를 작성하는 데 전념할 수 있습니다.
코드 사양에 관해 말하면 다음 사양에는 ESLint 규칙과 관련된 설명이 포함되어 있어 관련 오류 메시지가 표시될 수도 있습니다.
eslint: Prefer-const, no-const-Assign
var 사용을 피하면 전역 변수를 줄일 수 있습니다. 오염 문제가 있는 경우 const를 사용하세요. 선언된 변수가 고유하고 재할당될 수 없는지 확인하세요.
//bad var a = 1; //best const a = 1;
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)
를 선언하면 그룹화하여 코드 가독성을 높일 수 있습니다.
//bad let a = 1; const obj = {}; let num = 0; const page = 10; //best let a = 1; let num = 0; const obj = {}; const page = 10;
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; }, };
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));
// 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 }
// 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];
const list = document.getElementsByTagName("li"); const liNodes = Array.from(list);
// 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'); }; }
// 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);
// 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
가 포함됩니다.
这样更能够确保你只有一个模块被你import,而那些不必要的模块不会被import,减少代码体积。
// bad import * as webUI from './WEB'; // good import webUI from './WEB';
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;
===和!==不会进行强制类型转换,后者则会
对象都会被转为true
null、undefined、NaN被转为false
布尔值转为对应的布尔值
数字中+0 -0 0都被计算为false,否则为true
字符串 如果是“”空字符串,被计算为fasle,否则为true
相关推荐:
위 내용은 일일 js 개발 사양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!