초보자를 위한 자바스크립트의 실제 활용

1. ==

대신 ===를 사용하는 것이 좋습니다. JavaScript는 ===|!== 및 ==|!=라는 두 가지 동등 연산자를 사용합니다. 일반적으로 비교를 위한 모범 사례는 이전 그룹을 사용하는 것으로 간주됩니다. 연산자입니다.

"두 피연산자의 유형과 값이 동일하면 === 비교 결과는 true이고, !== 비교 결과는 false입니다. --의 본질입니다. JavaScript 언어

그러나 = = 및 !=를 사용하면 서로 다른 유형의 피연산자를 비교할 때 문제가 발생합니다. 이 경우 이 연산자 집합은 피연산자의 값에 대해 쓸데없는 강제를 시도합니다.

2.Eval 이는 bad

JavaScript에 익숙하지 않은 사람들을 위해 "evel" 함수를 사용하면 "eval"에 문자열 매개변수를 전달하여 문자열 실행 결과를 얻을 수 있습니다.

이렇게 하면 스크립트 성능이 크게 저하될 뿐만 아니라 일반 텍스트를 너무 많이 전달할 수 있으므로 보안 위험도 커집니다.

3. 손을 게으르지 마세요

홀수에서는 대부분의 중괄호와 세미콜론을 생략해도 문제가 없습니다. 대부분의 브라우저는 다음 코드 조각을 올바르게 저장합니다.

if(someVarianbleExists)
x = false

하지만 이 코드를 다시 고려하세요.

if(someVariableExists)
 
x=false
anotherFunctionCall();

아마도 일부 사람들은 이전 코드 조각이 다음과 동일하다고 생각할 수 있습니다.

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

코드의 들여쓰기가 중괄호의 기능을 모방한다는 점은 말할 필요도 없이 매우 끔찍한 관행이므로 피해야 합니다. 비용 중괄호를 생략하는 유일한 방법은 괄호가 한 줄짜리 명령문이지만 이 상황조차도 매우 논란의 여지가 있습니다.

if(2 + 2 ===4) return"nicely done";

언제나 미래를 생각하세요

만약 미래에 if 문에 더 추가하세요. 명령이 너무 많아서 어떻게 해야 할까요? 방법이 없습니다. 이 문제를 처리할 때 가장 중요한 점은 작성을 생략하는 것입니다.

4. JS Lint 사용

JSLint는 Douglas Crockford가 작성했습니다. 디버거에 스크립트를 복사하기만 하면 코드의 명백한 문제와 오류를 신속하게 감지할 수 있습니다.

"JSLint는 JavaScript 소스 코드의 복사본을 가져와 코드를 스캔합니다. 문제가 발견되면 문제와 소스 코드의 대략적인 위치를 설명하는 메시지가 반환됩니다. 문제는 종종 구문 오류이지만 JSLint는 일부 스타일 습관과 구조적 문제도 찾지 않습니다.

어리석은 오류가 발생하지 않도록 스크립트 코드 작성을 마치기 전에 JSLint를 한 번 실행하세요. 페이지 하단에 있는 스크립트

이 팁은 이 시리즈의 이전 기사에서도 권장되었습니다. 여기에 매우 적합하므로 해당 정보를 여기에 직접 붙여넣겠습니다.

기억하세요. 모범 사례의 주요 목표는 사용자를 위해 가능한 한 빨리 페이지를 로드하는 것입니다. 스크립트를 로드할 때 브라우저는 전체 스크립트 파일이 로드될 때까지 계속할 수 없습니다. 따라서 사용자는 진행 상황을 확인하기 전에 더 오래 기다려야 합니다. JS 파일의 목적이 단지 기능을 추가하는 것이라면(예를 들어 버튼을 클릭한 후) 해당 파일을 하단의 본문 닫는 태그 앞에 두는 것이 확실히 모범 사례입니다. . For 문 외부에 변수를 선언하세요

긴 'for' 문을 실행할 때는 해석 엔진이 수행하도록 하세요.

예:

나쁜 사례:

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

위 코드의 각 반복에 유의하세요. 스니펫은 배열의 길이를 확인해야 합니다. 그리고 '컨테이너' 요소를 찾기 위해 DOM 트리를 순회해야 할 때마다 - 얼마나 비효율적인가요!!!

더 나은 접근 방식

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

7. 문자열을 작성하는 가장 빠른 방법

배열이나 개체를 반복해야 할 때 항상 'for' 문을 사용하지 말고 창의력을 발휘하여 작업을 완료하는 가장 빠른 방법을 찾으세요.

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

” 지루하지 않겠습니다 벤치마크를 사용하면 저를 믿으시면 됩니다(또는 직접 테스트해 보세요). 이것이 가장 빠른 방법입니다! ”

추상화 수준 뒤에서 무슨 일이 일어나고 있는지에 관계없이 기본 메서드(예: Join())를 사용하면 일반적으로 기본이 아닌 메서드보다 훨씬 빠릅니다.

8. 전역 변수 줄이기

전역 항목을 단일 네임스페이스는 다른 애플리케이션, 구성 요소 및 코드 라이브러리와의 상호 작용을 혼동할 가능성을 크게 줄일 수 있습니다.

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;;

더 나은 접근 방식

 var name = 'jeffrey';
var lastname = 'way';
function doSomething(){...}
console.log()

9. 코드에 주석을 달기

처음에는 불필요해 보일 수 있지만 저를 믿으세요. 가능한 한 코드에 주석을 달고 싶습니다. 몇 달 후 프로젝트에 다시 돌아오면 각 코드 줄에 대한 원래 생각을 쉽게 이해할 수 없다는 것을 알게 됩니까? 동료 중 일부가 코드를 수정해야 한다고 생각하시나요? 항상 코드의 중요한 부분에 주석을 달아야 합니다.

10. 점진적인 향상을 수용하세요.

JavaScript가 비활성화된 경우를 어떻게 처리할지 항상 고려하세요. 페이지에는 JavaScript가 활성화되어 있으므로 이에 대해 걱정하지 않습니다. 그러나 이는 큰 실수입니다.

你曾花时间去看过关闭JavaScript后你的漂亮的花动态哦是什么样么?也许他会完全破坏你的站点.按照以往经验,设计你的站点是应假设将会禁用JavaScript,那么,一旦你这样做了,那么开始渐进的增强你的网页布局吧!

11.不要传递字符串给"SetInterval"或"SetTimeout"

考虑一下如下代码:

etInterval( "document.getElementById('container').innerHTML += 'my new number: ' + 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.

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

13 使用{}而不是new Object()

JavaScript中有很多种穿件对象的方式.也许更传统的方式是使用''new''构造器.像这样:

var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() {     console.log(this.name); }

然而,这种方式因其行为并不是我们所想的那样而被认为是"糟糕的实践".相反,我推荐你使用更健壮的对象字面方法.

更好的写法 

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

注意如果你只是想简单地创建个空对象,{}就派上用场了.

var o = {};

对象字面量使我们能够编写支持很多特性的代码,并对代码的实现者来说代码仍然相对直观,不需要直接调用构造器或维护传递给函数的参数的正确顺序,等等.

14.使用[]而不是New Array()

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

过去的写法

var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber';

更好的写法 var a = ['Joe', 'Plumber'];

Javascript中一个常见的错误是需要数组时使用对象或需要对象时使用数组,规则很简单:当属姓名是小的连续整数时,你应该使用数组,否则,使用对象

15.一长串变量? 省略''var''关键字,使用逗号替代

var someItem = 'some string'; var anotherItem = 'another string'; var oneMoreItem = 'one more string';

更好的写法

var someItem = 'some string',     anotherItem = 'another string',     oneMoreItem = 'one more string';

相当的不言自明,我不知道这里是否有任何真正的速度提升,但是它使你的代码更加简洁了.

16.始终,始终使用分号

技术上来说,大多数浏览器都允许你省略一些分号

var someItem = 'some string' function doSomething() {     return 'something' }

话虽如此,但这是一种非常糟糕的做法,可能导致更大的问题,问题查找起来也更困难

更好的写法

var someItem = 'some string'; function doSomething() {     return 'something'; }

 18.For in 语句

遍历对象内的成员时,你也会得到方法函数,为了解决这个问题,应始终将你的代码包装在一个if语句中来过滤信息

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

19.使用firebug的''Timer''特性来优化代码

需要一种快速简单地方法来检测一个操作花费多长时间么?

使用Firebug的timer特性记录结果

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

20.读书 面向对象的JavaScript

•               JavaScript：语言精粹

•                学习jQuery 1.3

•               学习JavaScript

 

 21.自执行函数(self-executing functions)

相比调用函数,当页面加载或调用父函数时,让函数自动执行会简单些.简单地将你的函数包装在圆括号内,并添加额外的一对圆括号,其本质上就调用了这个函数

(function doSomething() {     return {         name: 'jeff',         lastName: 'way'     };  })();

22.原始(raw)javascript代码的执行速度始终快于使用代码库

 Javascript代码库,如jQuery和mootools,能够为你节省大量的编码时间--特别是使用ajax操作.话虽如此,适中谨记代码库的执行速度适中是比不上原始JavaScript代码的(假设了代码的正确性)

jQuery的each方法来做遍历非常赞,但使用原生for语句适中会快一些

23.crockford的json.parse

虽然JavaScript 2 应该有一个内置的json解析器,但我们仍旧需要自己实现.Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。

简单地导入该脚本,你就能获得一个新的json全局对象,用于解析你的.json文件.

var response = JSON.parse(xhr.responseText); 
var container = document.getElementById('container'); 
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;;
 }

24.删除''language''

在script标签内最常见的language属性,现在已经不用了  

위 내용은 초보자를 위한 자바스크립트의 실제 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!