JavaScript 및 DOM 호환성 테이블 용 리소스-JS 튜토리얼-php.cn

JavaScript 및 DOM 호환성 테이블 용 리소스 최근 몇 년 동안 가장 좋은 인포 앱 중 하나는 Alexis Deveria가 사용할 수있는 잘 알려진 초성적입니다.

를 사용할 수 있지만

는 많은 최첨단 기능에 적합하지만 여전히 포함되지 않은 JavaScript 및 DOM이 여전히 많이 있습니다. 따라서 다양한 JavaScript 및 DOM 기능에 대한 브라우저 지원을 찾기위한 다른 옵션은 무엇입니까? 저는 항상 다양한 프론트 엔드 기술에 대한 연구를하고 있지만 아직 찾지 못한 것은 다양한 것을 포함하여 JavaScript 및 DOM의 모든 측면에 대한 브라우저 지원을 나열하는 정말 좋은 원 스톱 리소스입니다. html5 apis. 단일 리소스는 실제로 존재하지 않지만 (적어도 내가 아는 것은 없음), 내가 만나는 몇 가지 리소스가 있습니다. 함께 브라우저, 어떤 기능을 지원하는지에 대한 훌륭한 개요를 형성합니다. 그리고 특히 오래된 버전의 IE는 여전히 지원해야 할 수도 있습니다.

키 테이크 아웃 JavaScript 및 DOM 호환성에 대한 포괄적 인 리소스는 없지만 여러 리소스가 함께 다른 브라우저에서 기능 지원에 대한 적절한 개요를 제공합니다. 여기에는 MDN의 참조, Peter-Paul Koch의 Quirksmode Dom Reference, Cody Lindley의 웹 브라우저 호환성 테이블, Tobias Buschor의 Big JS 호환성 테이블, Dottoro JavaScript 웹 참조, IE Dev Center Javascript 및 ECMAScript가 포함됩니다. Kangax/Arnott의 호환성 테이블 및 thijs의 JavaScript 호환 체커 버스 지원 해야하는 다른 장치 및 브라우저에서 실제 테스트는 항상 호환성을 결정하는 주요 방법이어야합니다. "지원"테이블에는 기능을 사용할 수없는 관련 버그가 항상 포함되어 있지 않으며 일부 리소스가 부정확 할 수 있습니다. MDN의 참조는 필요한 정보가 없을 때 좋은 출발점입니다. 다양한 JavaScript 기능에 대한 지원에 대한 예비 개요를 제공합니다. 또한 누구나 편집 할 수 있으므로 잘못된 정보를 찾으면 업데이트 할 수 있습니다. . THIJS Busser의 JavaScript 호환성 검사기는 코드의 호환성을 분석하기 위해 JavaScript 코드를 붙여 넣거나 업로드 할 수있는 새로운 도구입니다. Kangax 테이블의 정보를 사용하며 최신 API 및 ES5 이상에 추가 된 기능에 중점을 둔 사용할 수 있습니다. 그러나 여전히 새롭고 항상 정확한 결과를 제공하지는 않을 수 있습니다.

물론 실제 테스트는 모두

를 능가합니다 리소스에 들어가기 전에, 지원 해야하는 다른 장치와 브라우저에서 실제 테스트를 수행하는 것은 항상 지원을 결정하는 주요 방법이어야한다는 것은 말할 것도 없습니다. 지원에 대한 중고 개요를 얻을 수있어서 반갑습니다. 그러나 "지원"테이블에 문제의 기능을 사용할 수없는 관련 버그가 항상 포함되어있는 것은 아닙니다. 그리고 그것은 일부 리소스가 명백 할 수 있다는 사실 외에도

따라서 특정 장치의 특정 플랫폼의 특정 브라우저에서 무언가가 작동하는지 여부에 대한 최종 단어가 아닌이 기사에 설명 된 참조를 가이드로 테스트하고 사용하십시오. MDN의 참조 에서 무언가를 찾을 수 없다면

를 사용할 수 있으면

를 사용할 수 있습니까? 가장 먼저보아야 할 곳은 Mozilla의 개발자 네트워크입니다. 그리고 나는 대부분의 사람들이 그렇게 할 것이라고 확신합니다. 대부분의 경우 에서 찾을 수없는 특정 JavaScript 기능에 대한 지원에 대한 예비 개요를 얻는 데 필요한 전부입니다. 예를 들어 의 경우 addeventListener () 및 removeEventListener ()를 찾아보고 싶다고 가정 해 봅시다. 를 찾을 수 없습니다. 그러나 브라우저 정보로 MDN에서 둘 다 찾을 수 있습니다.

위의 화면에서 볼 수 있듯이 "기본 지원"을 갖는 브라우저를 보여주는 세부 사항 외에도 이후 버전의 ecmascript에 추가 될 수있는 기능에 대한 추가 정보가 종종 있습니다. 또한 MDN의 참조는 누구나 편집 할 수 있다는 것을 기억하십시오. 따라서 무언가가 잘못되었음을 발견하면 자유롭게 업데이트하십시오. Peter-Paul Koch의 QuirksMode dom 참조
브라우저 호환성 테이블에 대한 논의는 Peter-Paul Koch와 그의 훌륭한 참조 테이블을 언급하지 않고는 완전하지 않을 것입니다.
코흐의 테이블은 데스크탑 및 모바일 브라우저에 대한 지원 정보가 포함되어 있으며 Dom 물건이 최신 상태 인 것처럼 보이며 IE11 및 iOS7에 대한 지원을 나타냅니다. Cody Lindley의 웹 브라우저 호환성 테이블 여기에는 JavaScript와 Dom에 대한 훌륭한 책을 쓴 Cody Lindley가 제작 한 것이 잘 알려지지 않은 것 같습니다. WBCT (Web Browser Compatibility Tables)라고하며 매머드 리소스입니다. Cody의 웹 사이트에는 IE6으로 돌아가는 지원 테이블이 포함되어 있으며 다음이 포함됩니다. DOM은 데스크탑 및 태블릿/전화 브라우저에 대한 지원 입니다 DOM 이벤트 데스크탑 및 태블릿/전화 브라우저에 대한 지원 ES6 데스크탑 및 태블릿/전화 브라우저에 대한 지원 이들은 JavaScript 지원 정보를 연구하는 개발자의 주요 영역이지만 WBCT에는 CSS, BOM, SVG 등을위한 지원 테이블도 포함되어 있습니다. 따라서 그 것을 북마크하십시오. 그것은 mdn.
에 대한 훌륭한 보완책 역할을합니다 Tobias Buschor의 큰 JS 호환성 테이블 이것은 확실히 잘 알려져 있지 않지만 Cody Lindley의 테이블에 포함되지 않은 것이있을 수 있습니다. Tobias Buschor가 만든 큰 JS 호환성 테이블입니다

이것도 거대한 리소스이며 특정 JavaScript 또는 DOM 기능으로 드릴 다운 할 수있는 방법이 마음에 듭니다. 예를 들어, 초기 목록 (창 객체로 시작)을 스크롤하면 StorageEvent와 같은 것을 클릭하면 해당 특정 객체의 메소드 및 속성 목록이 제공됩니다.

이것은 실제로 포괄적 인 자원이지만 때로는 느리게 될 수 있고 기본 사이트에 약간의 오류가 발생하는 것으로 보이므로 Tobias가 리소스를 유지하고 있는지 확실하지 않습니다. . 나는 일반적으로 다른 곳에서 잘 문서화되지 않은 특정 기능을보고 있다면 이것을 세 번째 또는 네 번째 가능성으로 사용합니다. Dottoro JavaScript 웹 참조
IT 서비스 회사 인 Dottoro가 관리하는 Dottoro JavaScript 참조는 다양한 JavaScript 및 DOM 기능에 대한 꽤 괜찮은 리소스입니다.

브라우저 지원이 가득 찬 경우 모든 버전에서이를 나타내는 브라우저 아이콘이 표시되거나 지원 부족을 나타내는 세척 아이콘이 표시됩니다. 또한 지원이 특정 버전에서 시작되면이도 표시됩니다. 아래 스크린 샷에서 이것을 볼 수 있습니다 :

브라우저 지원 외에도 찾고있는 기능에 대한 간단한 설명도 제공하므로 약간의 보너스입니다. . 이 리소스에서 내가 정말로 좋아하는 것은 멋진 검색 기능입니다. 이는 처음 사이트를 방문 할 때 분명하지 않습니다. 두 개의 "이름 찾아보기"버튼 중 하나를 클릭하여 Lightbox 창에서 트리거됩니다. 옆으로 버튼은 아래 스크린 샷에 표시됩니다

당신은 메인 페이지에서 바로 검색 할 수 있지만, 결과 페이지를 먼저 보지 않고 입력 한 내용에 따라 결과를 즉시 필터링하기 때문에 Lightbox의 검색이 마음에 듭니다. 전반적으로, Dottoro 참조는 HTML 및 CSS 기능에 대한 브라우저 지원 정보를 포함하는 훌륭하고 매력적인 리소스입니다. 즉, Dev Center JavaScript 및 Dom Reference 일반적으로 브라우저 지원에 대해 궁금 할 때, 우리는 이전 버전의 IE (현재 IE9 및 IE10 포함)에 대한 정보를 원하기 때문입니다. Microsoft의 Internet Explorer Dev Center는 JavaScript 및 DOM 기능에 대한 자세한 지원 정보가 포함 된 좋은 페이지를 보유하고 있습니다.

예를 들어 IE6-11에 대한 지원 정보가 포함 된 테이블에 여러 기능을 나열하는 JavaScript 버전 정보 페이지를 방문 할 수 있습니다. 또한 각 기능을 통해 드릴 다운 할 수 있으며 결국 단일 기능에 전념하는 페이지로 나타납니다. 따라서 맵 객체의 Foreach 메소드의 페이지로 드릴 다운하면 해당 기능에 대한 설명이 "요구 사항"이라는 섹션과 함께 해당 기능의 IE 지원 버전을 간략하게 설명합니다. >
그것은 찾을 수있는 것의 작은 샘플링 일뿐입니다. DOM 참조, 웹 응용 프로그램 참조 (많은 HTML5 API를 다루는) 및 캔버스, 오디오/비디오 API, SVG 및 WebGL을 다루는 그래픽 및 미디어 참조도 있습니다. 이 IE Dev Center 참조 페이지의 유일한 결함은 IE 브라우저에 대한 지원 만 포함한다는 사실입니다. 그러나 IE는 일반적으로 브라우저 지원에 대한 정보를 찾고있는 주된 이유이므로 큰 문제는 아닙니다. kangax/arnott의 ecmascript 호환성 테이블 ES5 이후에 추가 된 ECMAScript 기능을 찾고 있다면 최고의 리소스 중 하나는 Juriy“Kangax”Zaytsev 및 Leon Arnott의 호환성 테이블입니다.

참조에는 ES5, ES6, ES7 및 비표준 기능에 대한 호환성 정보를 다루는 테이블이 포함되어 있습니다. 보너스 : thijs busser의 JavaScript 호환성 검사기 이것은 JavaScrip Compatibility Checker (JSCC)라는 THIJS BUSSER가 제작 한 새로운 도구로서 페이스트를 넣거나 일부 JavaScript를 업로드 한 다음 코드 분석을받을 수 있습니다. 도구는 Kangax 테이블의 정보를 사용하고 를 사용할 수 있으므로 여기에 초점은 최신 API와 ES5 이상에 추가 된 것 같습니다.

이 어떻게 작동하는지 보여주기 위해 웹 워커에 대한이 MDN 기사의 코드를 추가했습니다. 표시된 결과에 주목하십시오 :

여기서는 호환성 문제가있는 코드에 사용 된 기능을 분류 할 수 있으며 (즉, 100% 미만의 지원을 받고 있는지, 어떤 브라우저가 문제를 일으키는지를 얻을 수 있습니다. 나는이 도구가 새롭고 약간의 개선을 사용할 수 있다고 경고 할 것입니다. 예를 들어, 데이터 세트 속성을 사용하는 일부 코드에 붙여 넣을 때 JSCC는 코드에 호환성 문제가 없다고 알려줍니다. 그러나 MDN은 IE10 이하로 지원되지 않았다고 말합니다. 데이터 세트가 나열되어 있어도 사용할 수 있으므로 결과는 정확해야합니다. . 그래서 이것은 완전하고 바보 같은 도구는 아니지만 분명히 개선함에 따라 주시해야 할 것입니다. 결론에서
언급 한 바와 같이, 실제 테스트는 항상 호환성에 대한 정보의 주요 수단이어야합니다. 또한 모든 JavaScript 및 DOM 기능에 대한 전체 브라우저 호환 정보가있는 단일 소스가 없다고 생각합니다. 그러나 나는이 게시물에 나열된 자료가 상당히 정확한 정보에 의존 할 수있는 집단 실체로 사용될 수 있다고 생각합니다.
물론 내가 놓친 것이있을 수 있습니다. 따라서 다른 출처를 알고 있다면 주석에 자유롭게 추가하십시오.
JavaScript DOM 호환성 테이블에 대한 자주 묻는 질문 (FAQ) JavaScript DOM 호환성 테이블이란 무엇입니까?
JavaScript 문서 객체 모델 (DOM) 호환성 테이블은 다양한 웹 브라우저에서 다양한 웹 기술의 호환성에 대한 정보를 제공하는 포괄적 인 리소스입니다. JavaScript, HTML, CSS 및 기타 웹 표준에 대한 세부 정보가 포함되어 있습니다. 이 테이블은 개발자가 어떤 브라우저에서 지원되는지 이해하는 데 도움이되므로 모든 플랫폼에서 작동하는 코드를 작성할 수 있습니다.
JavaScript DOM 호환성 테이블을 어떻게 사용합니까?

JavaScript DOM 호환성 테이블 사용은 간단합니다. 테이블은 일반적으로 행과 열로 나뉘며 각 행은 특정 기능 또는 속성을 나타내고 각 열은 다른 브라우저를 나타냅니다. 특정 브라우저에서 기능이 지원되는지 확인하려면 행에서 기능을 찾아 원하는 브라우저의 열을 따라 가십시오. 셀이 지원되는 것으로 표시되면 브라우저가 해당 기능을 지원한다는 것을 의미합니다.
왜 JavaScript dom 호환성 테이블이 중요한가?

JavaScript DOM 호환성 테이블은 웹 개발자가 A를 제공하기 때문에 필수적입니다. 다양한 브라우저에서 다양한 웹 기술의 호환성을 확인하는 빠르고 쉬운 방법. 모든 브라우저가 모든 기능을 지원하는 것은 아니며 특정 브라우저에서 지원하지 않는 기능을 사용하면 오류와 사용자 경험이 좋지 않기 때문에 중요합니다. 호환성 테이블을 사용함으로써 개발자는 모든 플랫폼에서 코드가 올바르게 작동하는지 확인할 수 있습니다.

ECMAScript와 JavaScript의 차이점은 무엇입니까?

ECMAScript는 ECMA International이 표준화 한 스크립팅 언어 사양입니다. JavaScript는이 사양을 준수하는 프로그래밍 언어입니다. 다시 말해, ECMAScript는 청사진 역할을하며 JavaScript는 해당 청사진의 구현 중 하나입니다. ActionScript와 같은 다른 언어는 ECMAScript 사양을 따릅니다 javaScript dom 호환성 테이블이 얼마나 자주 업데이트됩니까?

JavaScript DOM 호환성 테이블에 대한 업데이트 빈도는 다를 수 있습니다. 그러나 일반적으로 최신 버전의 웹 브라우저 및 최신 웹 기술을 반영하도록 정기적으로 업데이트됩니다. 정확한 정보를 보장하기 위해 신뢰할 수 있고 최신 호환성 테이블을 사용하는 것이 중요합니다.

기능이 호환성 테이블에서 '부분 지원'으로 표시 될 때 의미하는 것은 무엇입니까?

호환성 테이블에서 부분 지원은 브라우저가 기능을 인식하지만 그 기능의 모든 측면을 지원하지 않거나 알려진 문제로이를 지원할 수 있음을 의미합니다. 보다 구체적인 정보에 대한 '부분 지원'레이블과 관련된 메모 또는 세부 사항을 확인하는 것이 좋습니다.

JavaScript DOM 호환성 테이블에 어떻게 기여할 수 있습니까?

많은 JavaScript DOM 호환성 테이블이 있습니다. 오픈 소스 프로젝트는 누구나 그들에게 기여할 수 있음을 의미합니다. 여기에는 일반적으로 특정 프로세스를 통해 데이터 또는 수정 사항을 제출하는 것이 포함되며, 종종 Github와 관련이 있습니다. 기여하기 전에 프로젝트의 기여 가이드 라인에 익숙해지는 것이 중요합니다.

'Caniuse'웹 사이트는 무엇입니까?

내가 사용할 수 있습니까? '는 최신 브라우저를 제공하는 인기있는 웹 사이트입니다. 데스크탑 및 모바일 웹 브라우저에서 프론트 엔드 웹 기술을 지원하기위한 테이블을 지원합니다. 개발자가 JavaScript, HTML, CSS 등을 포함한 다양한 웹 기술의 호환성을 확인하는 것은 귀중한 리소스입니다.

JavaScript DOM 호환성 테이블에 대한 몇 가지 대안은 무엇입니까? 호환성 테이블은 귀중한 리소스이며 브라우저 호환성을 확인하는 다른 방법이 있습니다. 여기에는 'Can I 사용'과 같은 온라인 도구 사용, 웹 기술의 공식 문서 확인 또는 코드에서 기능 감지를 사용하여 런타임시 기능이 지원되는지 확인하는 것이 포함됩니다. 모든 브라우저에서 작동 하는가?