> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 스킬 7가지(2)_자바스크립트 스킬

자바스크립트 스킬 7가지(2)_자바스크립트 스킬

WBOY
풀어 주다: 2016-05-16 15:25:48
원래의
1164명이 탐색했습니다.

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

var band = {
   "name":"The Red Hot Chili Peppers",
   "members":[
   {
   "name":"Anthony Kiedis",
   "role":"lead vocals"
   },
   {
   "name":"Michael 'Flea' Balzary",
   "role":"bass guitar, trumpet, backing vocals"
   },
   {
   "name":"Chad Smith",
   "role":"drums,percussion"
   },
   {
   "name":"John Frusciante",
   "role":"Lead Guitar"
   }
   ],
   "year":""
   }
로그인 후 복사

JSON을 JavaScript에서 직접 사용하거나 함수에 캡슐화하거나 API의 반환 값으로 사용할 수도 있습니다. 우리는 이것을 JSON-P라고 부르며 많은 API가 이 형식을 사용합니다. 데이터 공급자를 호출하고 스크립트 코드에서 직접 JSON-P 데이터를 반환할 수 있습니다.

01 
12 

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

기본적으로 JSON은 복잡한 데이터 구조를 설명하는 가장 이식성이 뛰어난 방법이며 브라우저에서 실행할 수 있습니다. ​

json_decode() 함수를 사용하여 PHP에서 실행할 수도 있습니다. ​

JavaScript에 내장된 함수(Math, Array, String) 

저를 놀라게 한 한 가지 사실은 JavaScript의 수학 및 문자열 함수를 연구하면서 이러한 기능이 프로그래밍 작업을 크게 단순화할 수 있다는 점이었습니다. ​

이를 사용하면 복잡한 루프 처리 및 조건부 판단을 저장할 수 있습니다. ​

예를 들어 숫자 배열에서 가장 큰 숫자를 찾는 함수를 구현해야 할 때 저는 다음과 같이 루프를 작성하곤 했습니다.

 var numbers =
  [,,,,];
   var max = ;
   for(var i=;i
   if(numbers[i]
  > max){
   max = numbers[i];
   }
   }
   alert(max);
로그인 후 복사

반복 없이 이를 달성할 수 있습니다.

 var numbers =

  [,,,,];
   numbers.sort(function(a,b){return b -
  a});
   alert(numbers[]);
로그인 후 복사

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

또 다른 흥미로운 함수는 Math.max()입니다. ​

이 함수는 매개변수에 있는 숫자 중 가장 큰 숫자를 반환합니다.

Math.max(12,123,3,2,433,4); // returns 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() 函数自动完成这个任务: function addclass(elm,newclass){
   var classes =
  elm.className.split(' ');
   classes.push(newclass);
   elm.className = classes.join(' ');
   }  
로그인 후 복사

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

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

JSON 형식으로 데이터 저장

JSON을 발견하기 전에는 배열, 문자열, 쉽게 분리할 수 있는 기호와 혼합된 기타 혼란스러운 항목 등 JavaScript의 기본 데이터 유형으로 데이터를 저장하기 위해 온갖 종류의 미친 방법을 사용했습니다.

Douglas Crockford가 JSON을 발명한 후 모든 것이 바뀌었습니다.

JSON을 사용하면 자바스크립트 자체의 기능을 이용해 데이터를 복잡한 형식으로 저장할 수 있고, 별도의 변환 없이 바로 접근하여 사용할 수 있습니다.

JSON은 “JavaScript Object Notation”의 약어로 위에서 언급한 두 가지 약어 방식을 사용합니다.

위 콘텐츠는 편집자가 공유한 7가지 JavaScript 기술입니다. 마음에 드셨으면 좋겠습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿