고품질 JS 코드를 작성하는 방법-헤드라인-php.cn

이 글에서는 고품질 JS 코드를 작성하는 12가지 방법을 주로 설명합니다. 이러한 편의가 필요한 친구들은 참고할 수 있습니다. 이 섹션을 공부한 후 더 나은 js 코드를 작성할 수 있기를 바랍니다.

고품질의 JS 코드를 작성하면 프로그래머가 보기 편할 뿐만 아니라 프로그램의 실행 속도도 향상됩니다. 버그가 발생하면 즉시 수정할 수 있는 것이 가장 좋습니다. 이 때 문제를 해결하는 네 가지 방법은 여전히 마음속에 명확하게 남아 있습니다. 그렇지 않으면 일정 시간이 지나면 다른 작업으로 이동하거나 버그가 나타나고 해당 특정 코드를 잊어버립니다. 잠시 후 코드를 보면 다음이 필요합니다.

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

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

가독성

일관성

예측 가능성

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

이 문서화되어 있습니다

2 . 전역 변수의 문제점

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

타사 JavaScript 라이브러리

광고주 스크립트 코드

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

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

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

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

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

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

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

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

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

4. 전역 개체에 액세스

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

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

로그인 후 복사

5. for 루프

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

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

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

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

생성자의 프로토타입 속성을 증폭시키는 것은 기능을 향상시키는 매우 강력한 방법이지만 때로는 너무 강력할 때도 있습니다. 내장 생성자 프로토타입(예: Object(), Array() 또는 Function())을 추가하고 싶은 유혹이 있지만 이렇게 하면 코드를 예측할 수 없게 되기 때문에 유지 관리성이 심각하게 저하됩니다. 귀하의 코드를 사용하는 다른 개발자는 추가하는 방법보다는 내장된 JavaScript 방법을 사용하여 지속적으로 작업하는 것을 선호할 것입니다. 또한 프로토타입에 추가된 속성으로 인해 hasOwnProperty 속성이 사용되지 않을 때 루프에 표시되어 혼란을 야기할 수 있습니다.

7. 암시적 유형 변환을 피하세요

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

로그인 후 복사

九、编码规范

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

十、缩进

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

十一、注释

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

很显然，注释不能走极端：每个单独变量或是单独一行。但是，你通常应该记录所有的函数，它们的参数和返回值，或是任何不寻常的技术和方法。要想到注释可以给你代码未来的阅读者以诸多提示；阅读者需要的是（不要读太多的东西）仅注释和函数属性名来理解你的代码。例如，当你有五六行程序执行特定的任务，如果你提供了一行代码目的以及为什么在这里的描述的话，阅读者就可以直接跳过这段细节。没有硬性规定注释代码比，代码的某些部分（如正则表达式）可能注释要比代码多。

十二、花括号{}

花括号（亦称大括号，下同）应总被使用，即使在它们为可选的时候。技术上将，在in或是for中如果语句仅一条，花括号是不需要的，但是你还是应该总是使用它们，这会让代码更有持续性和易于更新。