jQuery의 새로운 기능 3 - 10 가장 멋진 기능

jQuery 3.0의 새 주요 릴리스가 마침내 출시되었습니다. 웹 개발자 커뮤니티는 2014 년 10 월부터 jQuery 팀이 2016 년 6 월까지 새로운 주요 버전을 개발하기 시작한이 중요한 단계를 기다렸습니다. 최종 릴리스 꺼져있다..

출시 노트는 더 얇고 빠른 jQuery, with 이전 버전과의 호환성 마음에. 이 글에서는 jQuery 3.0의 새로운 기능 중 일부를 통해 JavaScript 환경을 변경하는 방법에 대한 개요를 제공합니다..

어디서 시작하나요

직접 jQuery 3.0을 다운로드하여 다운로드하려면 다운로드 페이지로 이동하십시오. 업그레이드 가이드 나 소스 코드를 살펴볼 필요가 있습니다..

기존 프로젝트가 jQuery 3.0에서 작동하는 방식을 테스트하려면 코드에서 호환성 문제를 식별 할 수있는 jQuery Migrate 플러그인을 사용해 볼 수 있습니다. 미래의 이정표를 들여다 볼 수도 있습니다..

이 기사는 다루지 않는다. 모든 향상된 코드 품질, 새로운 ECMAScript 6 기능의 통합, 애니메이션을위한 새로운 API, 문자열 이스케이프를위한 새로운 방법, 향상된 SVG 지원, 향상된 비동기 콜백, 반응 형 사이트와의 향상된 호환성 등 jQuery 3.0의 새로운 기능 , 보안 강화.

1. 이전 IE 해결 방법이 제거되었습니다.

새로운 주요 릴리스의 주요 목표 중 하나는 빠르고 매끄러운, 따라서 IE9와 관련된 오래된 해킹 및 해결 방법- 제거됨. 즉, IE6-8을 원하거나 지원해야하는 경우 최신 버전을 계속 사용해야합니다. 1.12 심지어는 2.x 시리즈는 이전 Internet Explorer (IE9-)를 완벽하게 지원하지 않습니다. 문서에서 브라우저 지원 관련 메모를 확인하십시오..

또한 더 이상 사용되지 않는 기능 업그레이드 가이드의 큰 단점은 2016 년 6 월 현재 사용되지 않는 기능이 그룹화되지 않기 때문에 관심이 있다면 브라우저의 검색 도구로 찾아야한다는 것입니다 ( Ctrl + F).

2. 엄격 모드에서 jQuery 3.0 실행

jQuery 3에서 지원하는 대부분의 브라우저가 엄격 모드를 지원하므로이 주요 지시문을 염두에두고 새로운 주요 릴리스가 작성되었습니다.

jQuery 3은 엄격 모드로 작성되었지만, 귀하의 코드가 엄격 모드에서 실행될 필요가 없습니다., 그래서 당신은 다시 쓸 필요가 없다. jQuery로 마이그레이션하려는 경우 기존 jQuery 코드 3. 엄격한 모드 및 비 엄격 모드 JavaScript 행복하게 공존 할 수있다..

한 가지 예외가 있습니다. ASP.NET의 일부 버전 엄격 모드로 인해 jQuery 3과 호환되지 않는다.. ASP.NET에 관련되어 있다면 여기에서 자세한 내용을 살펴 보시기 바랍니다..

3. For ... of Loops가 소개되었습니다.

jQuery 3은 for ... of 문을 지원합니다. ...에 대한 루프는 ECMAScript 6에서 소개되었습니다. 반복 가능한 객체에 반복, 배열,지도 및 집합과 같은.

jQuery에서 ~에 대한 루프는 이전을 대체 할 수있다. $. 각 (...) 구문을 사용하고 jQuery 컬렉션의 요소를 반복 할 수 있습니다..

참고로 ~에 대한 루프 의지 오직 일하다 그 환경에서 ECMAScript 6 지원, 또는 JavaScript 컴파일러 사용 바벨.

4. 애니메이션은 새로운 API를 얻었다.

jQuery 3는 애니메이션을 수행하고 애니메이션을 만들기 위해 requestAnimationFrame () API를 사용합니다. 더 부드럽고 빠르게 달린다.. 새 API는이를 지원하는 브라우저에서만 사용됩니다. 이전 브라우저 (예 : IE9)의 경우 jQuery는 애니메이션을 표시하는 대체 방법으로 이전 API를 사용합니다..

RequestAnimationFrame CSS Tricks는 좋은 점을 알고 있습니다..

5. 특별한 의미의 문자열 이스케이프를위한 새로운 방법

새로운 jQuery.escapeSelector () 메서드를 사용하면 문자열이나 문자를 이스케이프 처리 할 수 ​​있습니다. CSS의 다른 것을 의미합니다. 할 수 있기 위해서 jQuery 셀렉터에서 사용; 자바 스크립트 인터프리터를 벗어나지 않고 제대로 이해할 수 없다..

문서는 다음 예제를 통해이 방법을 더 잘 이해할 수 있도록 도와줍니다.

“예를 들어, 페이지의 요소의 ID가 “abc.def” 다음과 함께 선택할 수 없습니다. $ ( "# abc.def") 왜냐하면 선택기가 다음과 같이 구문 분석되기 때문입니다. “이드를 가진 요소 '알파벳' 또한 수업이 있습니다. 'def'. 그러나 선택 가능 $ ( "#"+ $ .escapeSelector ( "abc.def")).”

이런 경우가 얼마나 자주 발생하는지 모르겠지만 이와 같은 문제에 부딪혔다면 이제는 신속하게 문제를 해결할 수있는 쉬운 방법이 있습니다..

6. 클래스 조작 방법 SVG 지원

불행히도 jQuery 3는 여전히 SVG를 완전히 지원하지 않습니다., CSS 클래스 이름을 조작하는 jQuery 메서드 (예 : .addClass () 과 .hasClass (), 지금은에 익숙하다. 대상 SVG 문서 게다가. 즉, jQuery를 사용하여 클래스를 수정 (추가, 제거, 전환)하거나 클래스를 찾을 수 있습니다. 확장 가능한 벡터 그래픽, CSS로 클래스 스타일 지정하기.

7. 지연된 객체가 JS 약속과 호환 됨

자바 스크립트 약속 - 사용 된 객체 비동기 계산 용 - ECMAScript 6에서 표준화되었습니다. 그들의 행동 및 특징은 Promises / A + 표준에 명시되어 있습니다..

jQuery 3에서, 지연된 객체 새로운 약속 / A + 표준과 호환되도록 만들어졌습니다. 지연된 항목 연결 가능한 물체 가능한 한 콜백 대기열 생성.

새로운 기능 변경 비동기 콜백 함수가 실행되는 방법; 약속 개발자가 로직에 가까운 비동기 코드를 동기식 코드로 작성할 수 있습니다..

업그레이드 가이드의 코드 예제를 보거나 자바 스크립트 약속의 기본 사항에 대한이 훌륭한 Scotch.io 자습서를 살펴보십시오..

8. jQuery.when ()은 다중 인수를 다르게 해석합니다.

그만큼 $ .when () 방법은 콜백 함수를 실행한다.. 버전 1.5부터 jQuery의 일부입니다. 유연한 방법입니다. 그것은 또한 0 개의 인자로 동작하며 하나 이상의 객체를 인자로 받아 들일 수있다..

jQuery 3은 어떻게 인수가 $ .when () 해석하다 그들이 $ .then () 방법 추가 콜백을 인수로 전달할 수 있습니다. $ .when () 방법.

jQuery 3에서 입력 인자를 그때() 방법 $ .when (), 인수는 Promise와 호환되는 "thenable".

이것은 $ .when 메소드는 보더 범위의 입력을 받아 들인다., 보다 정교한 비동기 콜백을 작성할 수있는 네이티브 ES6 Promises 및 Bluebird Promises와 같은.

9. 새로운 논리보기 / 숨기기

증가시키기 위해서 반응 형 디자인과의 호환성, 관련 코드 요소 표시 및 숨기기 jQuery 3에서 업데이트되었습니다..

이제부터는 .보여 주다(), .숨는 장소(), 과 .비녀장() 방법은 인라인 스타일, 계산 된 스타일이 아닌 더 나은 스타일 시트 변경 존중.

새로운 코드는 디스플레이 가능할 때마다 스타일 시트의 값을 반환합니다. 즉, CSS 규칙은 역동적으로 변화하다 장치 재배 향 및 창 크기 조정과 같은 이벤트 발생시.

문서는 가장 중요한 결과는 다음과 같을 것이라고 주장합니다.

"결과적으로 연결이 끊어진 요소는 더 이상 은폐 된 것으로 간주되지 않는다. 인라인이없는 한 표시 : 없음;, 따라서 .비녀장() 의지 더 이상 차별화하지 않는다. jQuery 3.0에서 연결된 요소로부터. "

더 잘 이해하고 싶다면 새로운 논리보기 / 숨기기 결과, 여기에 흥미로운 Github 토론이 있습니다..

또한 jQuery 개발자는 새로운 동작이 어떻게 작동하는지 Google 문서 도구 테이블을 게시했습니다. 다양한 사용 사례.

10. XSS 공격에 대한 추가 보호

jQuery 3가 추가되었습니다. 여분의 보안 계층 개발자가 XSS (Cross-Site Scripting) 공격을 지정하도록 요구함으로써 dataType : "스크립트" 의 옵션에서 $ .ajax () 그리고 $ .get () 행동 양식.

즉, 도메인 간 스크립트 요청을 실행하려는 경우 이것을 선언해야한다. 이 방법의 설정에서.

문서에 따르면 새로운 요구 사항은 "원격 사이트 스크립트가 아닌 콘텐츠를 제공합니다. 그러나 나중에 결정 악의적 의도가있는 스크립트를 제공한다."변경 사항은 $ .getScript () 메소드로 dataType : "스크립트" 옵션을 명시 적으로.