당신이 알아야 할 7가지 JavaScript 트릭 before_javascript 트릭

저는 JavaScript 코드를 너무 오랫동안 작성해서 언제 시작했는지 기억도 나지 않습니다. 저는 최근 몇 년간 JavaScript가 성취한 성과에 대해 매우 기쁘게 생각합니다. 이러한 성과의 수혜자가 된 것은 행운이었습니다. 나는 이 언어에 관한 꽤 많은 기사, 장, 책을 썼지만 여전히 언어에 대한 새로운 것을 발견하고 있습니다. 다음 설명은 과거에 "아!"라고 느꼈던 프로그래밍 기술이며, 나중에 우연히 발견하기를 기다리기보다는 지금 시도해야 할 기술입니다.

간결한 작성

JavaScript에서 제가 가장 좋아하는 점 중 하나는 객체와 배열을 생성하는 단축 방법입니다. 과거에는 객체를 생성하려면 다음과 같이 했습니다.

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

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

다음 작성 방법을 사용하면 동일한 효과를 얻을 수 있습니다.

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

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

훨씬 간단합니다. 개체 이름을 반복해서 사용할 필요가 없습니다. 이런 식으로 car가 정의됩니다. 아마도 IE를 사용할 때만 발생하는 문제입니다. 닫는 중괄호 앞에 쉼표를 쓰지 않으면 문제가 발생하지 않습니다.

또 다른 매우 편리한 약어는 배열입니다. 배열을 정의하는 전통적인 방법은 다음과 같습니다.

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

var movieThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','IndianaJones 4'
);

약식 버전은 다음과 같습니다. this:

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

var movieThatNeedBetterWriters = [
'Transformers','Transformers2' ,'Avatar','IndianaJones 4'
];

배열의 경우 실제로 그래프 그룹 기능이 없다는 문제가 있습니다. . 그런데 위의 자동차를 이렇게 정의하는 사람들을 종종 볼 수 있습니다.

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

var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning' ;
car['age'] = 4;

배열은 전능하지 않습니다. 올바르게 작성되지 않으면 혼란스러울 것입니다. 그래프 그룹은 실제로 개체의 기능이며 사람들은 두 개념을 혼동합니다.

또 다른 멋진 약식 방법은 삼항 조건부 표기법을 사용하는 것입니다. 이렇게 쓰지 않아도 되는데...

코드를 복사하세요 코드는 다음과 같습니다.

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

you 삼항 조건부 표기법을 사용하여 단순화할 수 있습니다.

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

var 방향 = x < 200 ? 1 : -1;

조건이 true일 경우 물음표 뒤의 값을 취하고, 그렇지 않으면 콜론 뒤의 값을 취합니다.

JSON 형식으로 데이터 저장

JSON을 발견하기 전에는 배열, 문자열, 쉽게 분리할 수 있는 기호와 혼합된 기타 혼란스러운 항목 등 JavaScript의 기본 데이터 유형으로 데이터를 저장하기 위해 온갖 종류의 미친 방법을 사용했습니다. Douglas Crockford가 JSON을 발명했을 때 모든 것이 바뀌었습니다. JSON을 사용하면 자바스크립트 자체 기능을 이용해 데이터를 복잡한 형식으로 저장할 수 있고, 별도의 변환 없이 바로 접근하여 사용할 수 있다. JSON은 위에서 언급한 두 가지 약어를 사용하는 "JavaScript Object Notation"의 약어입니다. 따라서 밴드를 설명하고 싶다면 다음과 같이 쓸 수 있습니다.

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

var band = {
"name ":" 레드 핫 칠리 페퍼스",
"멤버":[
{
"이름":"Anthony Kiedis",
"역할":"리드 보컬"
},
{
"name":"Michael 'Flea' Balzary",
"role":"베이스 기타, 트럼펫, 백 보컬"
},
{
"name" :"Chad Smith",
"역할":"드럼,타악기"
},
{
"name":"John Frusciante",
"역할":"리드 기타"
}
],
"연도":"2009"
}

JSON을 JavaScript에서 직접 사용하거나 함수에 캡슐화하거나 API의 반환 값으로 사용할 수도 있습니다. 우리는 이것을 JSON-P라고 부르며 많은 API가 이 형식을 사용합니다.

데이터 공급자를 호출하고 스크립트 코드에서 직접 JSON-P 데이터를 반환할 수 있습니다.

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

<script><BR> function Delicious(o){<BR> var out = ' <ul>';<BR> 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(' 맛있는' ).innerHTML = out;<BR> }<BR> </script>

Delicious 웹사이트에서 제공하는 웹 서비스 기능을 호출하여 정렬되지 않은 최근 북마크 목록을 JSON 형식으로 얻어오는 것입니다.

기본적으로 JSON은 복잡한 데이터 구조를 설명하는 가장 이식성이 뛰어난 방법이며 브라우저에서 실행할 수 있습니다. json_decode() 함수를 사용하여 PHP에서 실행할 수도 있습니다. JavaScript의 내장 함수(Math, Array 및 String)에 대해 제가 놀랐던 점 중 하나는 JavaScript의 수학과 문자열 함수를 연구한 후 이러한 함수가 프로그래밍 작업을 크게 단순화할 수 있다는 사실이었습니다. 이를 사용하면 복잡한 루프 처리 및 조건 판단을 저장할 수 있습니다. 예를 들어, 숫자 배열에서 가장 큰 숫자를 찾는 함수를 구현해야 할 때 다음과 같은 루프를 작성하곤 했습니다.

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

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

루프 없이 이를 달성할 수 있습니다.

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

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


숫자 배열은 sort()할 수 없습니다. 이 경우 알파벳 순서로만 정렬되기 때문입니다. 더 많은 사용법을 알고 싶다면 sort()에 대한 좋은 기사를 읽어보세요.

또 다른 흥미로운 함수는 Math.max()입니다. 이 함수는 매개변수에 있는 숫자 중 가장 큰 숫자를 반환합니다.

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

Math.max(12,123,3,2,433,4); // 433을 반환합니다

이 함수는 숫자를 확인하고 가장 큰 숫자를 반환할 수 있으므로 탐색 테스트에 사용할 수 있습니다. 특정 기능에 대한 서버 지원:

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

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

IE 문제를 해결하는 데 사용됩니다. 현재 페이지의 scrollTop 값을 얻을 수 있지만 페이지의 DOCTYPE에 따라 위 두 속성 중 하나만 이 값을 저장하고 다른 속성은 정의되지 않으므로 Math.max를 사용하여 얻을 수 있습니다. () 숫자. JavaScript를 단순화하기 위해 수학 함수를 사용하는 방법에 대해 자세히 알아보려면 이 문서를 읽어보세요.

문자열을 조작하는 데 매우 유용한 또 다른 함수 쌍은 Split() 및 Join()입니다. 가장 대표적인 예가 CSS 스타일을 페이지 요소에 첨부하는 함수를 작성하는 것이라고 생각합니다.

이렇게 페이지 요소에 CSS 클래스를 추가하면 해당 요소의 첫 번째 CSS 클래스이거나 이미 일부 클래스가 있으므로 기존 클래스 뒤에 공백을 추가해야 합니다. 그런 다음 이 클래스를 추가합니다. 그리고 이 클래스를 제거하려면 클래스 앞에 있는 공백도 제거해야 합니다(과거에는 일부 오래된 브라우저가 클래스 뒤에 공백이 오는 것을 인식하지 못했기 때문에 이는 매우 중요했습니다).

그래서 원문은 이렇습니다.

코드를 복사하세요 코드는 다음과 같습니다. 🎜>

function addclass(elm,newclass){
var c = elm.className;
elm.className = (c === '') ? newclass : c ' ' newclass;
}split() 및 Join() 함수를 사용하여 이 작업을 자동화할 수 있습니다.
함수 addclass(elm,newclass){

var 클래스 = elm.className.split(' ');
classes.push(newclass);
elm.className =classes.join('' );
}

이렇게 하면 모든 클래스가 공백으로 구분되고 추가하려는 클래스가 맨 끝에 배치됩니다.

이벤트 위임
웹 애플리케이션은 이벤트 중심입니다. 나는 이벤트 처리를 좋아하며, 특히 이벤트를 직접 정의하는 것을 좋아합니다. 핵심 코드를 변경하지 않고도 제품을 확장 가능하게 만듭니다. 페이지의 이벤트 제거와 관련하여 큰 문제(및 강력한 징후)가 있습니다. 요소에 이벤트 리스너를 설치하면 이벤트 리스너가 작동하기 시작합니다. 그러나 페이지에는 청취자가 있다는 표시가 없습니다. 이러한 표현 불가능한 문제(특히 일부 초보자에게는 골치 아픈 문제)와 IE6과 같은 "브라우저"가 너무 많은 이벤트 리스너를 사용할 때 발생하는 다양한 메모리 문제로 인해 이벤트 프로그래밍을 가능한 한 적게 사용해야 한다는 점을 인정해야 합니다. 현명한 조치입니다.

그래서 이벤트 대표단이 등장했습니다.

페이지의 요소에 대한 이벤트가 트리거되면 DOM 상속 관계에서 이 요소의 모든 하위 요소도 이 이벤트를 수신할 수 있습니다. 이때 상위 요소의 이벤트 핸들러를 사용하여 처리할 수 있습니다. 개별 하위 요소에 여러 이벤트 리스너를 사용하는 대신. 정확히 무엇을 의미하나요? 이렇게 말하면 페이지에 하이퍼링크가 많이 있습니다. 이 링크를 함수를 통해 호출하고 싶을 것입니다.

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

훌륭한 웹 리소스

• Opera 웹 표준 커리큘럼


• Sitepoint
> ;

• A List Apart


• YUI 블로그


• 목소리 탓입니다 a>


• 이상하게 구체적입니다

일반적인 접근 방식은 이러한 링크를 반복하고 각 링크에 이벤트 핸들러를 연결하는 것입니다.

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

// 일반적인 이벤트 처리 예시
(function (){
var resources = document.getElementById('resources');
var link = resources.getElementsByTagName('a');
var all =links.length;
for( var i =0;i // 각 링크에 리스너 연결
link[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'){
경고 ('이벤트 위임:' 여기서 해야 할 일은 nodeName을 비교하여 이 이벤트에 응답해야 하는 요소를 찾는 것뿐입니다.

면책 조항: 위에 언급된 두 가지 이벤트 예는 IE6을 제외한 모든 브라우저에서 실행될 수 있습니다. IE6에서는 간단한 W3C 표준 구현 대신 이벤트 모델을 사용해야 합니다. 그렇기 때문에 일부 도구 키트를 사용하는 것이 좋습니다.

이 접근 방식의 이점은 여러 이벤트 핸들러를 하나로 줄이는 것에만 국한되지 않습니다. 예를 들어 이 링크 테이블에 더 많은 링크를 동적으로 추가해야 한다고 생각해 보세요. 이벤트 위임을 사용한 후에는 다른 사항을 변경할 필요가 없습니다. 그렇지 않으면 링크 목록을 재활용하고 각 링크에 대한 이벤트 핸들러를 다시 설치해야 합니다.

익명 기능과 모듈성

JavaScript에서 가장 짜증나는 점은 변수에 범위가 없다는 것입니다. 함수 내부에 없는 모든 변수, 함수, 배열 또는 개체는 전역으로 간주됩니다. 즉, 이 페이지의 다른 스크립트도 이에 액세스하여 덮어쓸 수 있습니다.

해결책은 변수를 익명 함수 안에 넣고 정의한 후 즉시 호출하는 것입니다. 예를 들어, 다음 작성은 3개의 전역 변수와 2개의 전역 함수를 생성합니다.

코드 복사

코드는 다음과 같습니다.

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

}

함수 getMemberDetails(){
// [...]
}


이 페이지의 다른 스크립트에 status라는 변수가 있으면 문제가 발생합니다. myApplication에 캡슐화하면 이 문제가 해결됩니다.

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

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

단, 이 경우에는 기능 외의 기능은 없습니다. 그것이 필요한 것이라면 괜찮습니다. 함수 이름을 생략할 수도 있습니다.

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

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

함수 외부에서 수행하고 싶습니다. 내부에 있는 것을 사용할 수 있다면 몇 가지 수정이 필요합니다. createMember() 또는 getMemberDetails()에 액세스하려면 myApplication의 속성을 만들어 외부 세계에 노출해야 합니다.

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

var myApplication = function(){
var name = 'Chris';
var age = '34';
var status = 'single';
return{
createMember:function(){
// [...]
},
getMemberDetails:function(){
// [ ..]
}
}
}();
//myApplication.createMember() 및
//myApplication.getMemberDetails()를 사용할 수 있습니다.
[코드]
이를 모듈 패턴 또는 싱글톤이라고 합니다. Douglas Crockford는 이에 대해 많이 이야기하며 Yahoo 사용자 인터페이스 라이브러리 YUI는 이를 광범위하게 사용합니다. 그런데 불편한 점은 외부 세계에서 함수와 변수에 액세스할 수 있도록 문장 구조를 변경해야 한다는 것입니다. 또한 호출할 때 접두사 myApplication을 추가해야 합니다. 따라서 저는 이 작업을 좋아하지 않고 단순히 외부 세계에서 액세스할 수 있어야 하는 요소에 대한 포인터를 내보내는 것을 선호합니다. 이렇게 하면 외부 호출 작성이 단순화됩니다.
[code]
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()를 작성하면 됩니다. . 저는 이것을 '공개 모듈 패턴'이라고 부릅니다.

구성 가능

내가 작성한 JavaScript 코드를 세상에 내놓으자마자 누군가는 그것을 바꾸고 싶어합니다. 일반적으로 그걸로 뭔가를 하길 원하는 사람들이요. 스스로 수행할 수 없는 작업이지만 제가 작성한 프로그램은 유연성이 부족하고 사용자 정의 가능한 기능을 제공하지 않는 경우가 많습니다. 해결 방법은 스크립트에 구성 항목 개체를 추가하는 것입니다. 저는 JavaScript 구성 개체 개체를 소개하는 심층 기사를 작성한 적이 있습니다. 핵심 사항은 다음과 같습니다.

스크립트에 구성이라는 개체를 추가합니다.
이 개체에는 이 스크립트를 사용할 때 사람들이 자주 변경하는 모든 사항이 저장됩니다:
CSS ID 및 클래스 이름
버튼 이름, 라벨 단어 등
"표시 이미지; 각 페이지에서 "숫자" 값, "이미지 표시 크기" 값
위치, 위치, 언어 설정.
사용자가 수정하고 덮어쓸 수 있도록 이 개체를 공용 속성으로 사용자에게 반환합니다.
일반적으로 이는 프로그래밍 프로세스의 마지막 단계입니다. "다음 개발자에게 스크립트를 넘기기 전에 스크립트에 해야 할 다섯 가지 작업"을 예로 요약했습니다.

실제로는 일부 수정을 통해 코드를 사용하는 사람들에게도 유용하게 사용되기를 바랍니다. 각자의 필요에 맞게. 이 기능을 구현하면 스크립트에 대해 불평하는 사람들로부터 누군가가 스크립트를 수정했고 잘 작동한다는 혼란스러운 이메일을 덜 받게 됩니다.

배경과 상호작용

다년간의 프로그래밍 경험을 통해 제가 배운 중요한 사실 중 하나는 JavaScript가 인터페이스 상호 작용을 개발하는 데 탁월한 언어라는 것입니다. 데이터 소스에 액세스하는 것은 약간의 드래그입니다.
처음에는 Perl을 실행하기 위해 코드를 cgi-bin 폴더에 복사해야 하는 것이 싫었기 때문에 Perl을 대체하기 위해 JavaScript를 배웠습니다. 나중에 저는 JavaScript가 모든 작업을 수행하도록 하는 대신 기본 데이터를 처리하기 위해 백그라운드 작업 언어를 사용해야 한다는 것을 이해했습니다. 더 중요한 것은 보안과 언어 기능을 고려해야 한다는 것입니다.

웹 서비스에 접속하면 JSON-P 형식의 데이터를 얻을 수 있고, 이에 대한 클라이언트 브라우저에서 다양한 데이터 변환을 하는데, 서버가 있으면 데이터를 변환할 수 있는 방법이 더 많아집니다. . 서버 측에서 JSON 또는 HTML 형식으로 데이터를 생성하여 클라이언트에 반환할 수 있을 뿐만 아니라 데이터 및 기타 작업도 캐시할 수 있습니다. 이러한 사항을 미리 이해하고 준비하면 장기적으로 이익을 얻고 많은 골치 아픈 일을 피할 수 있습니다. 모든 브라우저에서 작동하는 프로그램을 작성하는 것은 시간 낭비입니다. 툴킷을 사용하세요!

처음 웹 개발을 시작했을 때 페이지에 접근할 때 document.all을 사용할지, document.layers를 사용할지 고민하며 오랫동안 고민했습니다. 저는 모든 레이어가 자체 문서라는 아이디어를 좋아하기 때문에 document.layers를 선택했습니다(그리고 요소를 생성하기 위해 너무 많은 document.writes를 작성하고 있었습니다). 레이어 패턴은 결국 실패하여 document.all을 사용하기 시작했습니다. Netscape 6이 W3C DOM 모델만 지원한다고 발표했을 때 기뻤지만 사용자들은 크게 신경 쓰지 않았습니다. 사용자는 대부분의 브라우저가 제대로 표시할 수 있는 것을 이 브라우저가 표시할 수 없다는 것을 알게 됩니다. 이는 우리 코딩의 문제입니다. 우리는 현재 환경에서만 실행될 수 있는 근시안적인 코드를 작성하고 있지만 안타깝게도 우리의 운영 환경은 끊임없이 변화하고 있습니다.

다양한 브라우저와 버전의 호환성 문제를 다루느라 너무 많은 시간을 낭비했습니다. 이러한 문제를 잘 처리하면 좋은 직업 기회를 얻을 수 있습니다. 하지만 이제 우리는 이런 고통을 참을 필요가 없습니다.

YUI, jQuery, Dojo와 같은 일부 툴킷은 이러한 종류의 문제를 처리하는 데 도움이 될 수 있습니다. 버전 비호환성, 디자인 결함 등과 같은 다양한 인터페이스 구현을 추상화하여 다양한 브라우저 문제를 처리하여 우리의 고통을 덜어줍니다. 브라우저의 베타 버전을 테스트하려는 경우가 아니면 프로그램에 브라우저의 결함을 수정하기 위한 코드를 추가하지 마세요. 브라우저에서 문제가 해결되면 코드를 삭제하는 것을 잊어버릴 가능성이 높기 때문입니다.

반면, 툴킷에만 의존하는 것도 근시안적입니다. 툴킷은 빠르게 개발하는 데 도움이 될 수 있지만 JavaScript를 깊이 이해하지 못하면 잘못된 일을 할 수도 있습니다.