자바스크립트 초보자가 주의해야 할 7가지 세부 사항 요약_javascript 기술

각 언어에는 고유한 특수 기능이 있습니다. JavaScript의 경우 var를 사용하여 모든 유형의 변수를 선언할 수 있습니다. 이 스크립팅 언어는 매우 간단해 보이지만 우아한 코드를 작성하려면 지속적인 경험 축적이 필요합니다. 이 문서에는 JavaScript 초보자가 주의하고 공유해야 할 7가지 세부 사항이 나열되어 있습니다.
(1) 코드 단순화
JavaScript에서 객체와 배열을 정의하는 것은 매우 간단합니다. 일반적으로 다음과 같이 작성되는 객체를 생성하려고 합니다.

코드 복사 코드는 다음과 같습니다.

var car = new Object()
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4

다음과 같은 효과를 얻을 수 있습니다. :

코드 복사 코드는 다음과 같습니다.

var car = {
color :'red',
wheels:4,
　hubcaps:'spinning',
　age:4
}

다음은 훨씬 짧습니다. 개체 이름을 반복해서 쓸 필요가 없습니다.
그 외에도 배열을 간결하게 작성하는 방법도 있습니다.

코드 복사 코드는 다음과 같습니다.

var movieThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','Indiana Jones 4'
); >

더보기 간결하게 작성하는 방법은

코드 복사 코드는 다음과 같습니다. 🎜>

var movieThatNeedBetterWriters = [

'Transformers','Transformers2','Avatar','Indiana Jones 4'
];


배열의 경우 연관 배열과 같은 특별한 것입니다. 많은 코드가 다음과 같이 객체를 정의하는 것을 볼 수 있습니다:

코드 복사 코드는 다음과 같습니다:

var car = new Array();

car['colour'] = '빨간색'
car['wheels'] = 4; Spinning';
car['age'] = 4;


이건 이상합니다. 혼동하지 마세요. "연관 배열"은 객체의 별칭일 뿐입니다.
코드를 단순화하는 또 다른 방법은 삼항 연산자를 사용하는 것입니다. 예:

코드 복사 코드는 다음과 같습니다. 다음: var 방향

if(x 방향 = 1
} else {
방향 = -1;


다음 코드를 사용하여 이 글을 대체할 수 있습니다.



코드 복사

코드는 다음과 같습니다. 다음과 같습니다:var 방향 = x

(2) JSON을 데이터 형식으로 사용

위대한 Douglas Crockford가 발명했습니다. JSON 데이터 형식을 사용하여 데이터를 저장하는 경우 기본 자바스크립트 방법을 사용하여 추가 변환 없이 복잡한 데이터를 저장할 수 있습니다. 예:


코드 복사

코드는 다음과 같습니다. var band = { "name":"The Red Hot Chili Peppers",

"members":[

{
"name": "Anthony Kiedis",
"역할":"리드 보컬"
},
{
"name":"Michael 'Flea' Balzary",
"역할 ":"베이스 기타, 트럼펫, 백 보컬"
},
{
"name":"Chad Smith",
"역할":"드럼, 타악기"
},
{
"이름":"John Frusciante",
"역할":"리드 기타"
}
],
"연도":"2009"
}


JSON을 JavaScript에서 직접 사용할 수도 있고, 다음과 같은 많은 API에서 사용되는 API에서 반환된 형식으로 사용할 수도 있습니다.

코드 복사

코드는 다음과 같습니다.

<script> <BR>function Delicious(o){ <BR>var out = '<ul>'; for(var i=0;i<o.length;i ){ <BR>out = '<li><a href="' o[i].u '">' <BR>o[i ].d ''; <BR>} <BR>out = '' <BR>document.getElementById('delicious').innerHTML = out <BR>} <BR></script>
> ;

여기에서는 Delicious의 웹 서비스를 호출하여 최신 북마크를 가져오고 이를 JSON 형식으로 반환한 다음 정렬되지 않은 목록으로 표시합니다.
기본적으로 JSON은 복잡한 데이터를 설명하는 가장 간단한 방법이며 브라우저에서 직접 실행됩니다. PHP에서 json_decode() 함수를 호출하여 사용할 수도 있습니다.

(3) JavaScript 기본 기능을 사용해 보세요. 숫자 집합에서 최대 수를 찾으려면 루프를 작성할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

var number = [3,342,23,22,124]
var max = 0 ;
for (var i=0;iif(numbers[i] > max){
max = 숫자[i]
; >> >

코드는 다음과 같습니다.

var number = [3,342,23,22,124]
numbers.sort(function(a,b){return b - a});
alert(numbers [0]);

작성하는 가장 간단한 방법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

Math.max(12,123,3,2,433,4); // return 433

Math.max를 사용할 수도 있습니다. 브라우저가 지원하는 속성을 검색하려면:

코드 복사 코드는 다음과 같습니다.

var scrollTop= Math.max(
doc.documentElement.scrollTop,
doc.body.scrollTop

) 요소에 클래스 스타일을 추가하려면 원본 작성은 다음과 같습니다.

코드 복사


코드는 다음과 같습니다.

function addclass (elm,newclass){
var c = elm.className;
elm.className = (c === '') ? newclass : c ' ' newclass; 더 우아한 작성 방법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

function addclass (elm,newclass){
var class = elm.className.split(' ');
classes.push(newclass)

elm.className =classes.join(' '); }

(4) 이벤트 대리자 이벤트는 JavaScript로 매우 중요한 부분입니다. 클릭 이벤트를 목록의 링크에 바인딩하려고 합니다. 일반적인 접근 방식은 루프를 작성하고 각 링크 개체에 이벤트를 바인딩하는 것입니다.

코드 복사


코드는 다음과 같습니다.

훌륭한 웹 리소스

< ;li>Opera 웹 표준 커리큘럼
• 사이트포인트


• A List Apart> ; li>
• YUI 블로그


• 목소리 탓입니다
특이하게도

스크립트는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// 클래식 이벤트 처리 예제
(function(){
var resources = document.getElementById('resources');
varlinks = resources.getElementsByTagName('a');
var all = links.length;
for(var i=0;i// 각 링크에 리스너 연결
links[i].addEventListener('click',handler,false) ;
};
function handler(e){
var x = e.target; // 클릭한 링크 가져오기
alert(x)
e.preventDefault();
};
})();


이벤트를 목록의 상위 개체에만 바인딩하는 것이 더 합리적입니다.

코드 복사 코드는 다음과 같습니다.

(function(){
var resources = document.getElementById('resources');
resources.addEventListener(' click',handler,false);
function handler(e){
var x = e.target;
if(x.nodeName.toLowerCase() === 'a '){
alert('이벤트 위임:' x)
e.preventDefault()
}
} ;
})();


(5) 익명 함수
JavaScript에서 가장 짜증나는 점 중 하나는 변수에 특정 범위가 없다는 것입니다. 일반적으로 모든 변수, 함수, 배열 또는 객체는 전역적이므로 동일한 페이지의 다른 스크립트가 이에 액세스하고 덮어쓸 수 있습니다. 해결책은 변수를 익명 함수로 캡슐화하는 것입니다. 예를 들어, 다음 정의는 세 개의 전역 변수와 두 개의 전역 함수를 생성합니다.

코드 복사 코드는 다음과 같습니다.

var name = 'Chris';
var age = '34';
var status = 'single';
function createMember(){
// [.. ]
}
function getMemberDetails(){
// [...]
}


캡슐화하면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var myApplication = function(){
var name = ' 크리스';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function (){
// [...]
}
}
}()
// myApplication.createMember() 및
// myApplication.getMemberDetails()가 이제 작동합니다.


이것은 JavaScript 디자인 패턴의 일종인 싱글톤 모드입니다. 이 모드는 YUI에서 많이 사용됩니다. 🎜>

코드 복사 코드는 다음과 같습니다.
var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single'
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//myApplication.get( ) 및 myApplication.create()가 이제 작동합니다.



(6) 코드 구성 가능
작성한 코드를 원하는 경우 다른 사람이 더 쉽게 사용하거나 수정할 수 있도록 하려면 구성 가능해야 합니다. 해결 방법은 작성한 스크립트에 구성 개체를 추가하는 것입니다. 핵심 사항은 다음과 같습니다. 1. 스크립트에 구성이라는 개체를 추가합니다.
2. CSS ID, 클래스 이름, 언어 등 다른 사람이 변경하고 싶어할 수 있는 모든 항목을 구성 개체에 저장합니다.
3. 다른 사람이 재정의할 수 있도록 이 객체를 공용 속성으로 반환합니다.

(7) 코드 호환성 호환성은 초보자들이 간과하기 쉬운 부분인데, 보통 자바스크립트를 배울 때 고정된 브라우저에서 테스트를 하는데, 이 브라우저가 그럴 가능성이 매우 높습니다. IE는 매우 치명적입니다. 현재 주요 주류 브라우저 중 IE는 표준에 대한 지원이 가장 낮기 때문입니다. 최종 사용자가 보는 결과는 작성한 코드가 특정 브라우저에서 올바르게 실행되지 않을 수 있다는 것입니다. 모든 주요 브라우저에서 코드를 테스트해야 합니다. 이 작업은 시간이 많이 걸릴 수 있지만 완료되어야 합니다.