>  기사  >  웹 프론트엔드  >  프로그램 개발에 자바스크립트를 올바르게 사용하는 방법_javascript 기술

프로그램 개발에 자바스크립트를 올바르게 사용하는 방법_javascript 기술

WBOY
WBOY원래의
2016-05-16 16:43:21967검색

오늘 우리 프로그램을 개발하기 위해 자바스크립트를 올바르게 사용하는 방법에 대한 기사를 github에서 찾았습니다. 뻔뻔하게도 독창적인 기사를 생각해 냈습니다. 모두에게 공유해 보겠습니다.
Javascript에 대한 가장 합리적인 접근 방식입니다.
유형 //유형
객체 //객체
배열 //배열
문자열 //문자열
함수 //함수
속성 //속성
변수 //변수
호이스팅 //가변 호이스팅
조건식 및 등식 //조건식 및 방정식.
블록 //블록 코드
댓글 //댓글
공백 //공백
쉼표 //쉼표
세미콜론 //세미콜론
타입 캐스팅 & 강제 //타입 변환
명명 규칙 // 명명 규칙
접속자 //접속
생성자 //생성자
이벤트 //시간
모듈 //모델
jQuery //
ECMAScript 5 호환성 //ECMA 5 호환
테스트 //테스트
퍼포먼스 //퍼포먼스
리소스 //리소스
야생에서
번역
JavaScript 스타일 가이드 가이드
기여자
라이센스

종류
기본 유형: 기본 유형에 액세스하면 실제로 기본 유형의 콘텐츠에 직접 액세스됩니다.
문자열
번호
부울

정의되지 않음
var foo = 1,
바 = foo;
바 = 9;
console.log(foo,bar); //=>

복잡한 유형: 복합 유형의 데이터 유형에 액세스하면 실제로는 참조를 통해 변수의 값에 액세스합니다.

객체
배열
기능

var foo = [1,2];
bar = foo;
bar[0] = 9;
console.log(foo[0],bar[0]); // => 9,9

객체(객체)
객체 리터럴을 사용하여 객체 생성(리터럴)

//bad
var item = new Object();
//good
var item = {};
객체 속성 이름으로 예약된 키워드를 사용하지 마세요. IE8에서는 작동하지 않습니다.


//bad
var superman = {
default: {clark: 'kent'},
private: true
};
//good
var superman = {
defaults: {clark: 'kent'},
hidden: true
};

배열(배열)
또한 리터럴 메소드를 사용하여 배열을 생성합니다

//bad
var items = new Array();
//good
var items = [];
배열의 길이를 모르는 경우 Array에 내장된 push 메소드를 사용하여 삽입 작업을 수행하세요


var someStack = [];
//bad
someStack[someStack.length] = 'vein';
//good
someStack.push('vein');
배열을 복사하려면 array.slice를 사용하세요


var len = items.length, //指的就是上面的内容...
itemCopy = [],
i;
//bad
for(i = 0; i < len ; ++i){
itemCopy[i] = items[i];
}
//good
itemCopy = items.slice(); //这里要注意了.这个我还真不知道...

문자열 문자열
문자열을 작은따옴표로 묶으세요...//여기서 성능에 대한 적절한 설명을 찾지 못했습니다. 저는 개인적으로 이렇게 사용하는 것을 좋아합니다. (많이 입는 것보다 덜 입는 것이 낫죠? ..you 알아요..)

//bad
var name = "Bob Parr";
//good
var name = 'Bob Parr';
//bad
var fullName = "Bob " + this.lastName;
//good
var fullName = 'Bob ' + this.lastName;
문자열이 80자를 초과하는 경우 여러 줄에 쓰려면 문자열 연결을 사용해야 합니다. 과도하게 사용할 경우 문자열을 연결하면 성능에 영향을 미칠 수 있으니 주의하세요


// bad
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
// bad
var errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';
// good
var errorMessage = 'This is a super long error that was thrown because ' +
'of Batman. When you stop to think about how Batman had anything to do ' +
'with this, you would get nowhere fast.';
배열을 생성할 계획이라면 아래와 같이 Array.join을 사용하면 더 좋은 결과를 얻을 수 있습니다..


var items,
messages,
length,
i;
messages = [{
stat: 'success',
message: ' This one worked'
},{
stat: 'success',
message: ' This one worked'
},{
stat: 'success',
message: ' This one worked'
}
];
length = messages.length;
//bad
function inbox(messages){
items = '<ul>';
for (i = 0; i < length; i++) {
items += '<li>' + messages[i].message + '</li>';
}
return items + '</ul>';
}
//good
function inbox(messages){
items = [];
for( i = 0; i < length ; i++){
items[i] = messages[i].message;
}
return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
}
기능


//匿名函数表达式..
var anonymous = function(){
return true;
};
// 命名函数表达式.
var named = function named(){
return true;
};
//即时引用函数
(function(){
console.log('Welcome to the Internet. Please follow me.');
})();
함수 블록이 아닌 코드(if, while)에서는 함수를 정의하지 마세요. 그에 따라 코드 블록 중간에 외부 변수 이름에 함수를 할당하세요..


//bad
if(currentUser){
function test(){
console.log('Nope.');
}
}
//good
var test;
if(currentUser){
test = function(){
console.log('Yup'); 
}; //be careful with the semi-colon.
}
속성

속성에 액세스하려면 점 구문을 사용하세요.

var luke = {
jedi: true,
age: 28
};
//bad
var isJedi = luke['jedi'];
//good
var isJedi = luck.jedi;
변수를 사용하여 개체 속성에 액세스하는 경우 [] 대괄호를 사용하여

에 액세스하세요.

var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.