JavaScript 초보자를 위한 몇 가지 모범 사례-JS 튜토리얼-php.cn

1. ==

대신 ===를 사용하세요. JavaScript는 두 가지 등식 연산자를 사용합니다: ===|!== 및 ==|!=. 전자는 모범 사례에 사용됩니다. .

"양측 피연산자의 유형과 값이 동일한 경우 ===는 true를 반환하고, !==는 false를 반환합니다." - "JavaScript: Language Essence"

그러나 다음을 사용하는 경우 ==그리고! =, 유형이 다른 상황이 발생할 수 있습니다. 이 경우 피연산자의 유형이 강제로 동일하게 된 후 비교되므로 원하는 결과가 아닐 수 있습니다.

2. Eval=evil

처음에는 익숙하지 않을 경우 "eval"을 사용하면 JavaScript 컴파일러에 액세스할 수 있습니다(주석: 매우 강력한 것 같습니다). 기본적으로 eval을 실행하는 동안 문자열을 매개변수로 전달할 수 있습니다.

이로 인해 스크립트 성능이 크게 저하될 뿐만 아니라(주석: JIT 컴파일러는 문자열의 내용을 예측할 수 없으며 사전 컴파일 및 최적화할 수 없음) 막대한 보안 위험도 초래합니다. 권한이 너무 높은 텍스트는 피해야 합니다.

3. 생략하면 문제가 해결되지 않습니다

기술적으로 대부분의 중괄호와 세미콜론을 생략할 수 있습니다. 대부분의 브라우저는 다음 코드를 올바르게 이해합니다.

if(someVariableExists) 
    x = false

로그인 후 복사

그러면 다음과 같이 보입니다.

if(someVariableExists) 
    x = false 
    anotherFunctionCall();

로그인 후 복사

위 코드가

<와 동일하다고 생각할 수 있습니다. 🎜>

if(someVariableExists) { 
    x = false; 
    anotherFunctionCall(); 
}

로그인 후 복사

안타깝게도 이러한 이해는 잘못된 것입니다. 실제 의미는 다음과 같습니다.

if(someVariableExists) { 
    x = false; 
} 
anotherFunctionCall();

로그인 후 복사

위의 들여쓰기가 중괄호처럼 보이기 쉽다는 것을 눈치채셨을 것입니다. 당연히 이는 끔찍한 관행이므로 어떤 대가를 치르더라도 피해야 합니다. 중괄호를 생략할 수 있는 경우는 딱 한 줄, 즉 한 줄만 있는 경우인데 논란이 되고 있다.

if(2 + 2 === 4) return &#39;nicely done&#39;;

로그인 후 복사

미리 생각해 보세요

분명히 언젠가는 if 블록에 더 많은 문을 추가해야 할 것입니다. 이 경우 이 코드를 다시 작성해야 합니다. 결론 – 누락은 지뢰밭입니다.

4. JSLint 사용

JSLint는 유명한 Douglas Crockford가 작성한 디버거입니다. 코드를 JSLint에 붙여넣기만 하면 코드에서 명백한 문제와 오류를 신속하게 찾아낼 수 있습니다.

"JSLint는 입력 소스 코드를 스캔합니다. 문제가 발견되면 문제와 코드의 위치를 설명하는 메시지를 반환합니다. 일반적으로 문제가 반드시 구문 오류인 것은 아니지만 JSLint도 마찬가지입니다. 일부 코딩 스타일 및 프로그램 구조 문제를 찾습니다. 이는 프로그램이 정확하다는 것을 보장하지 않습니다. 단지 문제를 찾는 데 도움이 되는 또 다른 눈을 제공할 뿐입니다." - JSLing 문서

JSLint.를 실행하기 전에 어리석은 실수를 저지르지 않도록 하세요.

5. 페이지 하단에 스크립트를 배치하세요.

기억하세요. 주요 목표는 페이지를 최대한 빨리 사용자에게 표시하는 것입니다. 스크립트가 차단되면 스크립트가 로드되어 실행될 때까지 브라우저는 다음 콘텐츠를 계속 렌더링할 수 없습니다. 따라서 사용자는 더 오래 기다려야 합니다.

JS가 효과를 향상시키는 데에만 사용되는 경우(예: 버튼 클릭 이벤트) 즉시 본문 끝 앞에 스크립트를 배치하세요. 이것은 확실히 모범 사례입니다.

권장사항

<p>And now you know my favorite kinds of corn. </p> 
<script type="text/javascript" src="path/to/file.js"></script> 
<script type="text/javascript" src="path/to/anotherFile.js"></script> 
</body> 
</html>

로그인 후 복사

6. For 문 내에서 변수를 선언하지 마세요.

긴 for 문을 실행할 때 문 블록을 최대한 간결하게 유지하세요. 예:

죄송합니다

for(var i = 0; i < someArray.length; i++) { 
    var container = document.getElementById(&#39;container&#39;); 
    container.innerHtml += &#39;my number: &#39; + i; 
    console.log(i); 
}

로그인 후 복사

각 루프는 배열의 길이를 계산해야 하며 매번 "컨테이너" 요소를 쿼리하기 위해 DOM을 통과해야 합니다. 효율성이 심각하게 낮습니다!

제안

var container = document.getElementById(&#39;container&#39;); 
for(var i = 0, len = someArray.length; i < len; i++) { 
    container.innerHtml += &#39;my number: &#39; + i; 
    console.log(i); 
}

로그인 후 복사

위 코드를 계속해서 최적화하는 방법에 대해 고민하고 공유할 수 있도록 댓글을 남겨주세요.

7. 문자열을 구성하는 가장 좋은 방법

배열이나 객체를 순회해야 할 때 항상 "for" 문을 생각하지 마세요. 창의력을 발휘하면 언제든지 찾을 수 있습니다. 더 나은 방법 예를 들어 접근 방식은 다음과 같습니다.

var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;, ...]; 
var list = &#39;<ul><li>&#39; + arr.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;

로그인 후 복사

나는 당신 마음속의 신은 아니지만 제 말을 믿어주세요(믿지 않는다면 직접 테스트해 보세요). 이것이 단연 가장 빠른 방법입니다! 시스템이 내부적으로 수행하는 작업에 관계없이 기본 코드(예: Join())를 사용하는 것이 일반적으로 기본이 아닌 코드보다 훨씬 빠릅니다. ——James Padolsey, james.padolsey.com

8. 전역 변수 줄이기

여러 전역 변수가 하나의 네임스페이스 아래에 구성되는 한 다른 애플리케이션과의 상호 작용이 크게 줄어듭니다. 구성 요소 또는 라이브러리 간의 잘못된 상호 작용 가능성. ——Douglas Crockford

var name = &#39;Jeffrey&#39;; 
var lastName = &#39;Way&#39;; 
function doSomething() {...} 
console.log(name); // Jeffrey -- 或 window.name

로그인 후 복사

더 나은 접근 방식

var DudeNameSpace = { 
    name : &#39;Jeffrey&#39;, 
    lastName : &#39;Way&#39;, 
    doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey

로그인 후 복사

참고: 이는 단순히 "DudeNameSpace"라는 이름을 사용하는 것이 좋습니다. 실제로는 보다 합리적인 이름을 사용해야 합니다.

9. 코드에 주석 추가

似乎没有必要，当请相信我，尽量给你的代码添加更合理的注释。当几个月后，重看你的项目，你可能记不清当初你的思路。或者，假如你的一位同事需要修改你的代码呢？总而言之，给代码添加注释是重要的部分。

// 循环数组，输出每项名字（译者注：这样的注释似乎有点多余吧）. 
for(var i = 0, len = array.length; i < len; i++) { 
     console.log(array[i]); 
}

로그인 후 복사

10.拥抱渐进增强

确保javascript被禁用的情况下能平稳退化。我们总是被这样的想法吸引，“大多数我的访客已经启用JavaScript,所以我不必担心。”然而，这是个很大的误区。

你可曾花费片刻查看下你漂亮的页面在javascript被关闭时是什么样的吗？（下载 Web Developer 工具就能很容易做到（译者注：chrome用户在应用商店里自行下载，ie用户在Internet选项中设置）），这有可能让你的网站支离破碎。作为一个经验法则，设计你的网站时假设JavaScript是被禁用的，然后，在此基础上，逐步增强你的网站。

11.不要给”setInterval”或”setTimeout”传递字符串参数

考虑下面的代码:

setInterval( 
    "document.getElementById(&#39;container&#39;).innerHTML += &#39;My new number: &#39; + i", 3000 
);

로그인 후 복사

不仅效率低下，而且这种做法和”eval”如出一辙。从不给setInterval和setTimeout传递字符串作为参数，而是像下面这样传递函数名。

setInterval(someFunction, 3000);

로그인 후 복사

12.不要使用”with”语句

乍一看，”with”语句看起来像一个聪明的主意。基本理念是,它可以为访问深度嵌套对象提供缩写，例如……

with (being.person.man.bodyparts) { 
    arms = true; 
    legs = true; 
}

로그인 후 복사

而不是像下面这样：

being.person.man.bodyparts.arms = true; 
being.person.man.bodyparts.legs= true;

로그인 후 복사

不幸的是，经过测试后，发现这时“设置新成员时表现得非常糟糕。作为代替，您应该使用变量，像下面这样。

var o = being.person.man.bodyparts; 
o.arms = true; 
o.legs = true;

로그인 후 복사

13.使用{}代替 new Ojbect()

在JavaScript中创建对象的方法有多种。可能是传统的方法是使用”new”加构造函数，像下面这样:

var o = new Object(); 
o.name = &#39;Jeffrey&#39;; 
o.lastName = &#39;Way&#39;; 
o.someFunction = function() { 
    console.log(this.name); 
}

로그인 후 복사

然而，这种方法的受到的诟病不及实际上多。作为代替,我建议你使用更健壮的对象字面量方法。

更好的做法

var o = { 
    name: &#39;Jeffrey&#39;, 
    lastName = &#39;Way&#39;, 
    someFunction : function() { 
        console.log(this.name); 
    } 
};

로그인 후 복사

注意，果你只是想创建一个空对象，{}更好。

var o = {};

로그인 후 복사

“对象字面量使我们能够编写更具特色的代码，而且相对简单的多。不需要直接调用构造函数或维持传递给函数的参数的正确顺序，等”——dyn-web.com

14.使用[]代替 new Array()

这同样适用于创建一个新的数组。

例如：

var a = new Array(); 
a[0] = "Joe"; 
a[1] = &#39;Plumber&#39;;

로그인 후 복사

更好的做法：

var a = [&#39;Joe&#39;,&#39;Plumber&#39;];

로그인 후 복사

“javascript程序中常见的错误是在需要对象的时候使用数组，而需要数组的时候却使用对象。规则很简单：当属性名是连续的整数时，你应该使用数组。否则，请使用对象”——Douglas Crockford

15.定义多个变量时，省略var关键字，用逗号代替

var someItem = &#39;some string&#39;; 
var anotherItem = &#39;another string&#39;; 
var oneMoreItem = &#39;one more string&#39;;

로그인 후 복사

更好的做法

var someItem = &#39;some string&#39;, 
    anotherItem = &#39;another string&#39;, 
    oneMoreItem = &#39;one more string&#39;;

로그인 후 복사

…应而不言自明。我怀疑这里真的有所提速，但它能是你的代码更清晰。

16.谨记，不要省略分号

从技术上讲，大多数浏览器允许你省略分号。

var someItem = &#39;some string&#39; 
function doSomething() { 
    return &#39;something&#39; 
}

로그인 후 복사

已经说过，这是一个非常糟糕的做法可能会导致更大的，难以发现的问题。

更好的做法

var someItem = &#39;some string&#39;; 
function doSomething() { 
    return &#39;something&#39;; 
}

로그인 후 복사

17.”For in”语句

当遍历对象的属性时，你可能会发现还会检索方法函数。为了解决这个问题，总在你的代码里包裹在一个if语句来过滤信息。

for(key in object) { 
    if(object.hasOwnProperty(key) { 
        ...then do something... 
    } 
}

로그인 후 복사

参考 JavaScript：语言精粹，道格拉斯（Douglas Crockford）。

18.使用Firebug的”timer”功能优化你的代码

在寻找一个快速、简单的方法来确定操作需要多长时间吗？使用Firebug的“timer”功能来记录结果。

function TimeTracker(){ 
    console.time("MyTimer"); 
    for(x=5000; x > 0; x--){} 
    console.timeEnd("MyTimer"); 
}

로그인 후 복사

19.阅读，阅读，反复阅读

虽然我是一个巨大的web开发博客的粉丝(像这样!)，午餐之余或上床睡觉之前，实在没有什么比一本书更合适了，坚持放一本web开发方面书在你的床头柜。下面是一些我最喜爱的JavaScript书籍。

《Object-Oriented JavaScript | JavaScript面向对象编程指南》

《JavaScript：The Good Parts | JavaScript语言精粹修订版》

《Learning jQuery 1.3 ｜jQuery基础教程第4版》

《Learning JavaScript ｜JavaScript学习指南》

读了他们……多次。我仍将继续!

20.自执行函数

和调用一个函数类似，它很简单的使一个函数在页面加载或父函数被调用时自动运行。简单的将你的函数用圆括号包裹起来，然后添加一个额外的设置，这本质上就是调用函数。

(function doSomething() { 
    return { 
        name: &#39;jeff&#39;, 
        lastName: &#39;way&#39; 
    }; 
})();

로그인 후 복사

21.原生代码永远比库快

JavaScript库，例如jQuery和Mootools等可以节省大量的编码时间，特别是AJAX操作。已经说过，总是记住，库永远不可能比原生JavaScript代码更快(假设你的代码正确)。

jQuery的“each”方法是伟大的循环，但使用原生”for”语句总是更快。

22.道格拉斯的 JSON.Parse

尽管JavaScript 2（ES5)已经内置了JSON 解析器。但在撰写本文时,我们仍然需要自己实现（兼容性）。道格拉斯（Douglas Crockford），JSON之父，已经创建了一个你可以直接使用的解析器。这里可以下载（链接已坏，可以在这里查看相关信息http://www.json.org/）。

只需简单导入脚本，您将获得一个新的全局JSON对象，然后可以用来解析您的json文件。

var response = JSON.parse(xhr.responseText); 
var container = document.getElementById(&#39;container&#39;); 
for(var i = 0, len = response.length; i < len; i++) { 
    container.innerHTML += &#39;<li>&#39; + response[i].name + &#39; : &#39; + response[i].email + &#39;</li>&#39;; 
}

로그인 후 복사