찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Javascript에서 주의해야 할 사항은 무엇입니까?

Javascript에서 주의해야 할 사항은 무엇입니까?

零下一度
零下一度원래의
2017-07-21 09:33:181196검색

1. ==
대신 ===를 사용하세요. JavaScript는 ===|!== 및 ==|!=라는 2개의 서로 다른 동등 연산자를 사용하며, 비교 연산에서는 전자를 사용하는 것이 가장 좋습니다.
"양쪽의 피연산자가 동일한 유형과 값을 갖는 경우 ===는 true를 반환하고, !==는 false를 반환합니다." - JavaScript: Language Essence
그러나 == 및! =, 유형이 다른 상황이 발생할 수 있습니다. 이 경우 피연산자의 유형이 강제로 동일하게 된 후 비교되므로 원하는 결과가 아닐 수 있습니다.
2.Eval == Evil
처음에는 익숙하지 않을 경우 "eval"을 사용하면 JavaScript 컴파일러에 액세스할 수 있습니다(주석: 매우 강력한 것 같습니다). 기본적으로 eval을 실행하는 동안 매개변수로 문자열을 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 'nicely done';

비 오는 날에 대비한 계획
언젠가는 if 블록에 더 많은 문을 추가해야 할 때가 올 것입니다. 이 경우 이 코드를 다시 작성해야 합니다. 결론 – 누락은 지뢰밭입니다.

4. 페이지 하단에 스크립트를 배치하세요.
기억하세요. 기본 목표는 스크립트가 로드되고 끝날 때까지 사용자에게 페이지가 차단되는 것입니다. 실행되었습니다. 아래 콘텐츠를 렌더링합니다. 따라서 사용자는 더 오래 기다려야 합니다.
JS가 효과를 향상시키는 데에만 사용되는 경우(예: 버튼 클릭 이벤트) 즉시 본문 끝 앞에 스크립트를 배치하세요. 이것은 확실히 모범 사례입니다.

5. 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); 
}


6. 문자열을 구성하는 가장 좋은 방법
배열이나 객체를 탐색해야 할 때 항상 "for" 문을 생각하지 마세요. 창의력을 발휘하세요. 더 나은 방법 예를 들어 접근 방식은 다음과 같습니다. 

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

나는 당신의 신은 아니지만 제 말을 믿어주세요(믿지 못하시면 직접 테스트해 보세요). 이것이 가장 빠른 방법입니다!
시스템이 내부적으로 무엇을 하든 기본 코드(예: Join())를 사용하는 것이 일반적으로 기본이 아닌 코드보다 훨씬 빠릅니다.

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

var name = 'Jeffrey'; 
var lastName = 'Way'; 
function doSomething() {...} 
console.log(name); // Jeffrey -- 或 window.name// 更好的做法var DudeNameSpace = { 
   name : 'Jeffrey', 
   lastName : 'Way', 
   doSomething : function() {...} 
} 
console.log(DudeNameSpace.name); // Jeffrey

참고: 이는 간단히 "DudeNameSpace"라는 이름으로 지정됩니다. 실제로는 좀 더 합리적인 이름이 필요합니다.

8. 코드에 주석 추가
불필요해 보이지만 제 말을 믿으세요. 코드에 더 합리적인 주석을 추가해 보세요. 몇 달 후에 프로젝트를 되돌아보면 원래 생각이 기억나지 않을 수도 있습니다. 아니면 동료 중 한 명이 코드를 변경해야 한다면 어떻게 될까요? 전체적으로 코드에 주석을 추가하는 것은 중요한 부분입니다. 

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


9. 점진적인 향상을 수용하세요
자바스크립트가 비활성화되었을 때 원활한 성능 저하를 보장하세요. 우리는 항상 "방문객 대부분이 이미 JavaScript를 활성화했으므로 걱정할 필요가 없습니다"라고 생각하고 싶습니다. 그러나 이는 큰 오해입니다.
자바스크립트를 끈 상태에서 아름다운 페이지가 어떻게 보이는지 잠시 확인해 본 적이 있나요? (이 작업은 웹 개발자 도구를 다운로드하면 쉽게 수행할 수 있습니다(번역자 참고 사항: Chrome 사용자는 앱 스토어에서 다운로드하고 IE 사용자는 인터넷 옵션에서 설정합니다). 그러나 이렇게 하면 웹사이트가 손상될 수 있습니다. 경험상 JavaScript가 비활성화되어 있다는 가정 하에 사이트를 디자인한 다음 이를 기반으로 점차적으로 사이트를 개선하십시오.

10 "setInterval" 또는 "setTimeout"에 문자열 매개변수를 전달하지 마세요.
다음 코드를 고려하세요. 

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

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

setInterval(someFunction, 3000);

11.不要使用"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;

12.使用{}代替 new Ojbect()
在JavaScript中创建对象的方法有多种。可能是传统的方法是使用"new"加构造函数，像下面这样:

ar 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); 
   } 
};

注意，果你只是想创建一个空对象，{}更好。
13.使用[]代替 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
14.定义多个变量时，省略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;;

应而不言自明。我怀疑这里真的有所提速，但它能是你的代码更清晰。
15.使用Firebug的"timer"功能优化你的代码
在寻找一个快速、简单的方法来确定操作需要多长时间吗？使用Firebug的“timer”功能来记录结果。

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

위 내용은 Javascript에서 주의해야 할 사항은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：커서 커서 스타일이 그림으로 대체됩니다.다음 기사：커서 커서 스타일이 그림으로 대체됩니다.

관련 기사

더보기