고품질 JS 코드를 작성하는 12가지 방법(고품질 코드 작성 방법 안내)-JS 튜토리얼-php.cn

이 글은 고품질의 JS 코드를 작성하는 12가지 방법을 알려줍니다. 이것이 필요한 친구들은 참고할 수 있습니다.

고품질의 JS 코드를 작성하면 프로그래머가 보기 편할 뿐만 아니라 프로그램의 실행 속도도 향상됩니다. 편집자의 정리 방법은 다음과 같습니다.

1. 유지 관리 가능한 코드 작성 방법

버그가 발생하면 즉시 수정할 수 있는 것이 가장 좋습니다. 이 때 문제를 해결하는 네 가지 방법은 여전히 마음속에 명확하게 남아 있습니다. 그렇지 않으면 일정 시간이 지나면 다른 작업으로 이동하거나 버그가 나타나고 해당 특정 코드를 잊어버립니다. 잠시 후 코드를 보면 다음이 필요합니다.

1. 문제를 배우고 이해하는 데 시간을 투자합니다. 가장 좋은 때는 해결해야 할 문제 코드를 이해하는 것입니다

또 다른 문제가 있습니다. 특히 대규모 프로젝트나 회사의 경우 버그를 수정하는 사람은 코드를 작성한 사람(그리고 버그를 발견한 사람과 버그를 수정한 사람은 동일인이 아닙니다.) 그러므로, 자신이 얼마 전에 작성한 코드이든, 다른 팀원이 작성한 코드이든, 코드를 이해하는 데 걸리는 시간을 줄이는 것이 중요합니다. 이는 레거시 코드를 유지 관리하는 데 몇 시간과 며칠을 소비하는 대신 새롭고 흥미로운 것을 구축해야 하기 때문에 수익(수익)과 개발자 행복에 관한 것입니다. 따라서 유지 관리 가능한 코드를 작성하는 것이 중요합니다. 일반적으로 유지 관리 가능한 코드에는 다음 원칙이 있습니다.

가독성

일관성

예측 가능성

동일한 사람이 작성한 것으로 보입니다.

기록

2 . 전역 변수의 문제점

전역 변수의 문제점은 JavaScript 애플리케이션과 웹 페이지의 모든 코드가 이러한 전역 변수를 공유하고 동일한 전역 네임스페이스에 있다는 것입니다. 따라서 프로그램의 서로 다른 두 부분이 전역 변수를 정의할 때 이름은 같지만 기능이 다른 변수의 경우 이름 충돌이 불가피합니다. 또한 웹 페이지에는 페이지 개발자가 작성하지 않은 코드가 포함되어 있는 경우가 많습니다. 예:

타사 JavaScript 라이브러리

광고주의 스크립트 코드

타사 사용자 추적 및 분석 스크립트 코드

다양한 유형의 위젯, 로고 및 버튼

예를 들어, 타사 스크립트는 A라는 전역 변수를 정의한 다음 함수에서 A라는 전역 변수도 정의합니다. 결과적으로 나중 변수가 이전 변수를 덮어쓰게 되고 타사 스크립트가 갑자기 무효화됩니다! 그리고 디버깅도 어렵습니다.

그래서: 네임스페이스 모드나 자동으로 즉시 실행되는 함수 등 전역 변수를 최대한 적게 사용하는 것도 중요하지만, 전역 변수를 최소화하는 데 가장 중요한 것은 항상 var를 사용하여 변수를 선언하는 것입니다.

3. var의 부작용은 잊어버리세요.

암시적 전역 변수와 명시적으로 정의된 전역 변수 사이에는 약간의 차이가 있습니다. 즉, 삭제 연산자를 통해 변수를 정의되지 않은 상태로 두는 기능입니다. 자세한 내용은 다음과 같습니다.

var를 통해 생성된 전역 변수(함수 이외의 프로그램에서 생성)는 삭제할 수 없습니다.

var를 통해 생성되지 않은 암시적 전역 변수(함수에서 생성 여부와 관계없음)는 삭제할 수 있습니다.

그러므로 암시적 전역 변수는 실제 전역 변수는 아니지만 전역 개체의 속성입니다. 속성은 삭제 연산자를 통해 삭제할 수 있지만 변수는 삭제할 수 없습니다.

4. 전역 개체에 액세스

브라우저에서 창 속성을 통해 코드의 어느 곳에서나 전역 개체에 액세스할 수 있습니다(로컬 변수라는 창을 선언하는 등의 터무니없는 작업을 수행하지 않는 한). 그러나 다른 상황에서는 이 편의 속성을 다른 이름으로 부를 수도 있습니다(또는 프로그램에서 사용할 수 없는 경우도 있음). 하드 코딩된 창 식별자 없이 전역 개체에 액세스해야 하는 경우 모든 수준의 함수 범위에서 다음을 수행할 수 있습니다.

var global = (function () { return this; }());

로그인 후 복사

5. for 루프

for 루프에서 를 사용하면 배열 또는 인수 및 HTMLCollection 개체와 같은 배열과 유사한 개체의 값을 반복할 수 있습니다. 일반적인 루프 형식은 다음과 같습니다.

// 두 번째로 좋은 루프 for (var i = 0; i < myarray.length; i++) { // myarray[i]를 사용하여 작업 수행}

이 루프 형식 단점은 반복될 때마다 배열의 길이를 얻어야 한다는 것입니다. 이렇게 하면 특히 myarray가 배열이 아니라 HTMLCollection 객체인 경우 코드가 줄어듭니다.

6. 내장 프로토타입을 확장하지 마세요

扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。增加内置的构造函数原型（如Object(), Array(), 或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作，而不是你另加的方法。另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。

七、避免隐式类型转换

JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如：false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。

var zero = 0; if (zero === false) { // 不执行，因为zero为0, 而不是false } // 反面示例 if (zero == false) { // 执行了... }

八、避免eval()

如果你现在的代码中使用了eval()，记住该咒语“eval()是魔鬼”。此方法接受任意的字符串，并当作JavaScript代码来处理。当有问题的代码是事先知道的（不是运行时确定的），没有理由使用eval()。如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目标。例如，用方括号表示法来访问动态属性会更好更简单：

// 反面示例 var property = "name"; alert(eval("obj." + property)); // 更好的 var property = "name"; alert(obj[property]);

使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSON.parse()，你可以使用来自JSON.org的库。

同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：

// 反面示例 setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // 更好的 setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000);

使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。

考虑下面这个例子，这里仅un作为全局变量污染了命名空间。

console.log(typeof un); // "undefined" console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined" var jsstring = "var un = 1; console.log(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; console.log(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; console.log(trois);"; (function () { eval(jsstring); }()); // logs "3" console.log(typeof un); // number console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined"

로그인 후 복사

另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。

(function () { var local = 1; eval("local = 3; console.log(local)"); // logs "3" console.log(local); // logs "3" }()); (function () { var local = 1; Function("console.log(typeof local);")(); // logs undefined

로그인 후 복사

九、编码规范

建立和遵循编码规范是很重要的，这让你的代码保持一致性，可预测，更易于阅读和理解。一个新的开发者加入这个团队可以通读规范，理解其它团队成员书写的代码，更快上手干活。

十、缩进

代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进，因为它看上去像是遵循了规范，但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。

十一、注释

你必须注释你的代码，即使不会有其他人向你一样接触它。通常，当你深入研究一个问题，你会很清楚的知道这个代码是干嘛用的，但是，当你一周之后再回来看的时候，想必也要耗掉不少脑细胞去搞明白到底怎么工作的。

분명히 주석은 극단적으로 갈 수 없습니다: 각 개별 변수 또는 개별 라인. 그러나 일반적으로 모든 함수, 해당 인수 및 반환 값 또는 특이한 기술이나 방법을 문서화해야 합니다. 주석은 미래의 코드 독자에게 많은 단서를 제공할 수 있다는 점을 기억하십시오. 독자가 코드를 이해하려면 (너무 많이 읽지 않고도) 주석과 함수 속성 이름만 있으면 됩니다. 예를 들어, 특정 작업을 수행하는 프로그램 라인이 5~6개 있을 때 해당 라인의 목적과 해당 라인이 존재하는 이유에 대한 설명을 제공하면 독자는 이 세부 사항을 건너뛸 수 있습니다. 주석과 코드의 비율에 대한 엄격하고 빠른 규칙은 없으며 코드의 일부 부분(예: 정규 표현식)에는 코드보다 주석이 더 많을 수 있습니다.

12. 중괄호 {}

중괄호(중괄호라고도 함, 아래 동일)는 선택 사항인 경우에도 항상 사용해야 합니다. 기술적으로 in 또는 for에 문이 하나만 있는 경우 중괄호가 필요하지 않지만 어쨌든 항상 중괄호를 사용해야 합니다. 이렇게 하면 코드가 더 일관되고 업데이트하기가 더 쉬워집니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.