github이 jq를 사용하지 않는다면 무엇을 사용해야 할까요?

최근에 우리는 GitHub.com의 프런트 엔드 코드에서 jQuery를 완전히 제거했습니다. 이는 수년에 걸쳐 점진적으로 jQuery를 제거하는 과정이 끝났음을 의미합니다. 이 기사에서는 과거에 jQuery에 어떻게 의존했는지 설명하고 시간이 지남에 따라 더 이상 필요하지 않다는 것을 깨달았지만 결국 다른 라이브러리나 프레임워크로 교체하지 않고 표준 브라우저를 사용했습니다. API는 우리가 구현하는 모든 것을 구현합니다. 필요.

JQuery는 초기에 우리에게 많은 의미를 주었습니다.

GitHub.com Google이 Chrome 브라우저를 출시하기 1년 전인 2007년 후반에 jQuery 1.2.1을 사용하기 시작했습니다. CSS 선택기를 통해 DOM 요소를 쿼리하거나 요소의 스타일을 동적으로 렌더링하는 표준 방법이 없었으며 Internet Explorer의 XMLHttpRequest 인터페이스는 다른 많은 API와 마찬가지로 브라우저 간의 불일치로 인해 어려움을 겪었습니다.

jQuery를 사용하면 DOM 조작, 애니메이션 및 "AJAX" 요청 생성이 매우 쉬워집니다. 기본적으로 이를 통해 웹 개발자는 더욱 현대적이고 동적인 웹 환경을 만들 수 있습니다. 무엇보다도, 한 브라우저용으로 jQuery로 개발된 코드는 다른 브라우저에서도 작동합니다. GitHub 초창기에는 jQuery를 사용하여 소규모 개발 팀이 각 웹 브라우저에 맞게 코드를 맞춤화하지 않고도 신속하게 프로토타입을 만들고 새로운 기능을 개발할 수 있었습니다.

jQuery의 간단한 인터페이스를 기반으로 구축된 확장 라이브러리는 GitHub.com 프런트엔드의 기본 빌딩 블록이기도 합니다: pjax(https://github.com/defunkt/jquery-pjax) 및 페이스박스(https: //github.com/defunkt/facebox).

우리는 유용하고 필수적인 라이브러리를 만들고 유지 관리하는 John Resig와 jQuery 기여자들을 결코 잊지 않을 것입니다.

최신 웹 표준

수년에 걸쳐 GitHub는 수백 명의 엔지니어로 구성된 회사로 성장했으며 점차 규모를 담당하는 전담 팀을 설립했습니다. JavaScript 코드의 품질. 우리는 기술 부채를 제외해 왔으며 때로는 기술 부채가 초기에 우리에게 어느 정도 가치를 제공하는 종속성과 함께 커지지만 시간이 지남에 따라 그 가치도 감소합니다.

jQuery를 최신 브라우저에서 지원하는 웹 표준의 급속한 발전과 비교할 수 있습니다.

$(selector) 패턴을 사용할 수 있습니다 querySelectorAll ( ) 대체하려면

Element.classList를 사용하여 CSS 클래스 이름 전환을 구현할 수 있습니다.

CSS는 이제 JavaScript 대신 스타일시트에서 시각적 애니메이션 정의를 지원합니다. #

이제 Fetch Standard를 사용하여 $.ajax 요청을 수행할 수 있습니다.

addEventListener() 인터페이스는 충분히 안정적이며 여러 플랫폼에서 사용할 수 있습니다.

us 경량 라이브러리를 사용하여 이벤트 위임 패턴을 캡슐화할 수 있습니다.

JavaScript 언어가 개발됨에 따라 jQuery에서 제공하는 일부 구문 설탕이 중복되었습니다.

또한 체인 구문은 우리가 원하는 코드 작성 방식을 만족시키지 않습니다.

마지막으로 우리는 빌드 시 정적 유형 검사를 수행하기 위해 유형에 주석을 달기 위해 Flow를 사용하기 시작했고, 거의 모든 jQuery 메소드가 동일한 유형의 결과를 반환하기 때문에 체인 구문이 정적 분석에 적합하지 않다는 것을 발견했습니다. 당시 우리는 @flow 약한 모드와 같은 기능을 통해 유형이 지정되지 않은 코드 기반에 유형을 점진적으로 적용할 수 있었기 때문에 Flow를 선택했습니다.

대체로 jQuery를 제거한다는 것은 웹 표준에 더 많이 의존하고, MDN 웹 문서를 프런트엔드 개발자를 위한 사실상의 기본 문서로 만들고, 미래에 더 탄력적인 코드를 유지하고, 번들에서 30KB의 종속성을 제거하여 페이지 로딩 및 JavaScript 실행 속도를 높였습니다.

Custom Elements

최근 몇 년 동안 새로운 기술, 즉 커스텀 요소(브라우저)에 대한 과대광고가 많이 있었습니다. 기본 구성 요소 라이브러리입니다. 이는 사용자가 추가 바이트를 다운로드, 구문 분석 및 컴파일할 필요가 없음을 의미합니다.

2014년부터 v0 사양을 기반으로 몇 가지 맞춤 요소를 만들었습니다. 그러나 표준은 계속 변하고 있기 때문에 이에 대한 노력은 별로 하지 않았습니다. Web Components v1 사양이 출시되고 Chrome과 Safari가 이를 구현한 2017년이 되어서야 우리는 맞춤 요소를 보다 광범위하게 채택하기 시작했습니다.

jQuery를 제거하는 동안 우리는 커스텀 요소를 추출하기 위한 패턴도 찾고 있었습니다. 예를 들어 모달 대화 상자를 표시하는 데 사용되는 페이스박스를 요소(https://github.com/github/details-dialog-element)로 변환합니다.

점진적인 향상이라는 우리의 철학은 맞춤 요소에도 적용됩니다. 이는 마크업에 동작을 추가하기 전에 마크업 콘텐츠를 최대한 많이 보존한다는 의미입니다. 예를 들어, 은 기본적으로 시간을 현지 시간대로 변환하도록 업그레이드된 원래 타임스탬프를 표시하는 반면, 의 경우

자바스크립트를 사용하지 않고 인터랙티브하게, 접근성이 강화되어 업그레이드되었습니다.

위 내용은 github이 jq를 사용하지 않는다면 무엇을 사용해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!