jQuery가 필요하십니까?
6695 단어 performancea11yjavascript
사람마다 다 있다.
20세기 초 js가 지지했던 집단 절망의 구렁텅이에서 벗어나게 해준 훌륭한 도서관이다. 현대 인터넷의 중요한 기반이다.
하지만 우리는 이미 없어졌다.Javascript는 대부분의 브라우저에서 더욱 완전하고 통일된 것을 지원합니다.ES6는 현재 거의 보편적이다.브라우저는 정기적으로 자동으로 업데이트됩니다.
jQuery는 메트로폴리탄 광섬유 대역폭 와이파이에 연결된 첨단 16핵 32GB 램 노트북에서 다운로드, 컴파일하여 실행할 수 있다.그러나 많은 사용자들에게 상황은 그렇지 않을 수도 있다.페이지를 불러오는 속도가 느린 것은 그들에게 문제지만, 당신에게도 문제입니다. most mobile users leave any page taking more than 3s to load
문제는 네가 정말 그것을 필요로 하느냐는 것이다.
대부분의 경우 jQuery에 대한 우리의 처리는 다음과 같기 때문이다.
너 그거 알아?너는 jQuery가 필요 없어.
그래서 나는 너희들에게 두 가지 선택을 줄 것이다.
jquery를 조금만 사용하면
너는 소책자 스타일의 사이트를 만들고 있거나, 그다지 동적이지 않은 사이트에 작은 상호작용 강화 기능을 추가하고 있다.그것은 하나의 응용 프로그램이 아니다. 그 응용 프로그램들은 프레임워크를 사용한다. 우리는 이 점을 안다.이것은 당신의 투자조합입니다. 당신의 사장의 조카딸이 연을 날리는 홈페이지나 간단한 로그인 + 아주 멋있지만 아직 발표되지 않은 더 큰 프로젝트를 등록하세요.그럼 내가 알려줄게.
DOM 작업
네가 하고 있다면...
이렇게 하자.
$('.someclass')
document.querySelectorAll('.someclass')
$('.someclass')[0]
document.querySelector('.someclass')
$element.remove()
element.remove()
$element.prepend(otherElement)
element.prepend(otherElement)
$element.before(otherElement)
element.before(otherElement)
element.addClass('some')
element.classList.add('some')
$element.removeClass('some')
element.classList.remove('some')
$element.toggleClass('some')
element.classList.toggle('some')
const parent = $element.parent()
const parent = element.parentNode
const clone = $element.clone()
const clone = element.cloneNode(true)
배열 작업
네가 하고 있다면...
이렇게 하자.
$.isArray(a)
Array.isArray(a)
$.inArray(item, arr)
arr.indexOf(item) > -1
$.each(arr, (i, v) => {})
arr.forEach((value, index) => {})
$.map(arr, (v, i) => {})
arr.map((value, index) => {})
$.grep(arr, (v, i) => {})
arr.filter((value, index) => {})
여기에 많은 것을 빠뜨렸지만, jQuery를 건너뛰고 싶으면 LoDash (~4kB gzip) 를 보십시오.이벤트
네가 하고 있다면...
이렇게 하자.
$el.on('click', e => { })
el.addEventListener('click', e => { })
jquery는 원소의 집합을 관찰할 수 있지만 querySelectorAll
를 사용하면 결과의 모든 원소를 관찰해야 한다는 것을 기억하십시오. 아래와 같습니다.// https://stackoverflow.com/a/50101839/97635
document.
querySelectorAll('.tracked').
forEach(input => input.addEventListener('click', this.trackLink));
Ajax 호출
XMLHttp Request는 실현하기 어려울 것입니다. 저는 당신이 가지고 있는
$.ajax({})
요구를 포기하도록 설득하지 않을 것입니다. 그러니 우리가 이야기합시다. FetchFetch는 XMLHttp Request의 현대 대체품이지만 does not have same widespread support는 우리가 앞서 언급한 다른 API와 마찬가지로 특히 하나a polifyll available는 관련 브라우저에 서비스를 제공하여 다른 모든 사람들이 바이트 음식을 유지할 수 있도록 합니다.fetch('/users.html')
.then(function(response) {
return response.text()
}).then(function(body) {
document.querySelector('#userlist').innerHTML = body
})
대부분의 jquery를 사용했습니다
이것은 아마도 당신이 현존하는, 방대한 코드 라이브러리를 가지고 있거나, 너무 편안해서 다른 일을 시도하고 할 수 없기 때문일 것이다...
그럼 소개시켜드리고 싶어요Zepto.js
Zepto는 현대 브라우저를 위한 간략한 자바스크립트 라이브러리로 기본적으로 jQuery와 호환되는 API를 가지고 있다.jQuery를 사용하는 경우 Zepto를 사용하는 방법을 알고 있습니다.
gzipped 때는 9.6k였기 때문에 이미 너의 로고보다 작아졌다.가봐.
마지막 경고
만약 당신이 jquery를 사용하고 있다면, 그것을 좋아하고, 속도가 매우 빠른 CDN (28.87KB) 에서 그것을 위해 서비스하고 있다면, 그것은 당신이 그것을 피하는 것보다 좋을 것이다.
멀티 메가바이트 프레임워크에 의존하는 프런트엔드 MVC SPA에 서비스를 제공하는 경우에는 이러한 사항을 고려할 필요가 없습니다.당신의 틀에 대한 최상의 실천에 주목하고 그 괴벽을 이해하세요.
JQuery는 대단합니다. 저는 악의가 없습니다.그것은 이미 사실상 네트워크 파이프가 되었다. 왜냐하면 그것은 그것의 일을 완성했기 때문이다.이렇게 성공해서 어디에도 없는 유일한 문제는 우리가 더 이상 그것을 의심하지 않는다는 것이다.너는 마땅히 모든 것을 의심해야 한다.
여느 때와 마찬가지로, 나는 네가 이 일에 대한 견해를 보게 되어 매우 기쁘다. 너는 몇 바이트를 할 수 있니?당신은 구글 분석을 통해 당신의 사용자와 그들의 설비를 분석할 수 있습니까?
Reference
이 문제에 관하여(jQuery가 필요하십니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/oinak/are-you-sure-you-need-jquery-ej8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)