all_jquery에서 jQuery 없이 웹 사이트가 어떻게 간단한 요구 사항을 충족할 수 있습니까?

jQuery는 오늘날 가장 인기 있는 JavaScript 도구 라이브러리입니다.

통계에 따르면 현재 전 세계 웹사이트의 57.3%가 사용하고 있습니다. 즉, 웹사이트 10개 중 6개가 jQuery를 사용하고 있다는 뜻입니다. 도구 라이브러리를 사용하는 사이트만 보면 이 비율이 무려 91.7%에 달합니다.

jQuery는 인기가 많지만 너무 큰 크기도 골칫거리입니다. jQuery 2.0의 원래 크기는 235KB이고 최적화된 크기는 81KB이며, IE6, 7, 8을 지원하는 jQuery 1.8.3의 경우 원래 크기는 261KB이고 최적화된 크기는 91KB입니다.

이 정도 크기라면 모바일 기기는 물론 광대역 환경에서도 완전히 로딩하는데 1초 이상이 소요됩니다. 즉, jQuery를 사용하면 사용자가 페이지 효과를 보기 전에 최소 1초의 지연이 발생합니다. jQuery가 본질적으로 DOM을 조작하기 위한 도구라는 점을 고려하면 다음과 같은 질문을 던질 필요가 없습니다. 단지 몇 가지 웹 페이지 효과를 위해서라면 그렇게 큰 라이브러리를 사용해야 합니까?

2006년 jQuery가 탄생했을 당시에는 주로 다양한 브라우저(주로 IE6) 간의 차이를 없애고 개발자에게 간단한 통합 인터페이스를 제공하는 데 사용되었습니다. 그때와 비교하면 오늘날의 상황은 많이 달라졌습니다. IE의 시장 점유율은 계속 감소하고 있으며 ECMAScript 기반의 JavaScript 표준 구문은 점점 더 광범위한 지원을 받고 있습니다. 개발자는 JavScript 표준 구문을 직접 사용하고 모든 주요 브라우저에서 동시에 실행할 수 있습니다. 더 이상 jQuery를 통해 호환성을 얻을 필요가 없습니다.

JavaScript 표준 구문을 사용하여 jQuery의 주요 기능 중 일부를 대체하여 jQuery를 사용하지 않는 방법을 살펴보겠습니다.

1. DOM 요소 선택

jQuery의 핵심은 다양한 선택기를 통해 DOM 요소를 선택하는 것입니다. 이 기능을 시뮬레이션하려면 querySelectorAll 메서드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var $ = document.querySelectorAll.bind(document);

여기서 querySelectorAll 메서드는 배열(숫자 인덱스 및 길이 속성 포함)과 매우 유사하지만 배열이 아닌 NodeList 객체를 반환한다는 점에 유의해야 합니다. 푸시를 사용할 수 없습니다. 필요한 경우 Nodelist 개체를 배열로 변환하는 것을 고려하세요.

코드 복사 코드는 다음과 같습니다.

myList = Array.prototype.slice.call(myNodeList) ;

2. DOM 작업

DOM 자체에는 jQuery에서 제공하는 작업 방법을 대체할 수 있는 다양한 작업 방법 세트가 있습니다.

마지막에 DOM 요소를 추가합니다.

코드 복사 코드는 다음과 같습니다.

// jQuery 작성
$( parent) .append ($(child));
// DOM 쓰기
parent.appendChild (child)

DOM 요소를 헤드에 삽입합니다.

코드 복사 코드는 다음과 같습니다.

// jQuery 작성
$( parent) .prepend ($(child));
// DOM 쓰기
parent.insertBefore (child, parent.childNodes[0])

DOM 요소를 삭제하세요.

코드 복사 코드는 다음과 같습니다.

// jQuery 작성
$( child) .remove ()
// DOM 쓰기
child.parentNode.removeChild(자식)

3. 이벤트 모니터링

jQuery의 on 메소드는 addEventListener를 사용하여 시뮬레이션할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

Element.prototype.on = Element.prototype.addEventListener;

사용 편의성을 위해 이 메소드를 NodeList 객체에 배포할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

NodeList.prototype.on = 함수(이벤트, fn) {
[]['forEach'].call(this, 함수(el) {
el.on(이벤트, fn);
});
반납;
};

4. 이벤트 발동

jQuery의 트리거 메소드는 별도로 배포해야 하는데 이는 상대적으로 복잡합니다.

코드 복사 코드는 다음과 같습니다.

Element.prototype.trigger = 함수(유형 , 데이터) {
var event = document.createEvent('HTMLEvents');
event.initEvent(type, true, true);
event.data = data {};
event.eventName = type;
event.target = this;
this.dispatchEvent(이벤트);
return this;
};

또한 NodeList 개체에 이 메서드를 배포합니다.

코드 복사 코드는 다음과 같습니다.

NodeList.prototype.trigger = 함수(이벤트 ) {
[]['forEach'].call (this, function (el) {
el['trigger'](event);
});
return this;
};

5. 문서 준비

현재 모범 사례는 페이지 하단에 JavaScript 스크립트 파일을 로드하는 것입니다. 이 경우 DOM 객체가 실행될 때 이미 생성되었기 때문에 document.ready 메서드(jQuery는 $(function)로 축약됨)가 더 이상 필요하지 않습니다.

6. 속성 메소드

jQuery는 attr 메소드를 사용하여 웹페이지 요소의 속성을 읽고 씁니다.

코드 복사 코드는 다음과 같습니다.

$("#picture") .attr ("src ", " http://url/to/image");

DOM 요소를 사용하면 속성 값을 직접 읽을 수 있으며 작성 방법이 훨씬 간단합니다.

코드 복사 코드는 다음과 같습니다.

$("#picture") .src = "http ://url/to/image";

입력 요소의 this.value는 입력 상자의 값을 반환하고, 링크 요소의 this.href는 절대 URL을 반환한다는 점에 유의하세요. 이 두 웹 페이지 요소의 정확한 속성 값을 사용해야 하는 경우 this.getAttribute('value') 및 this.getAttibute('href')를 사용할 수 있습니다.

7. addClass 메소드

jQuery의 addClass 메소드는 DOM 요소에 클래스를 추가하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

$('body') .addClass ( 'hasJS' );

DOM 요소 자체에는 클래스를 조작하는 데 사용할 수 있는 읽기 및 쓰기 가능한 className 속성이 있습니다.

코드 복사 코드는 다음과 같습니다.

document.body.className = 'hasJS' ;
// 또는
document.body.className = ' hasJS';

HTML 5는 더 강력한 기능을 갖춘 classList 객체도 제공합니다(IE 9에서는 지원되지 않음).

코드 복사 코드는 다음과 같습니다.

document.body.classList.add(' hasJS') ;
document.body.classList.remove ('hasJS');
document.body.classList.toggle ('hasJS');
document.body.classList.contains ('hasJS' );

8. CSS

jQuery의 CSS 메소드는 웹페이지 요소의 스타일을 설정하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

$(node) .css ("color", " 빨간색") ;

DOM 요소에는 직접 조작할 수 있는 스타일 속성이 있습니다.

코드 복사 코드는 다음과 같습니다.

element.style.color = "red" ;;
// 또는
element.style.cssText = 'color:red';

9. 데이터 저장

jQuery 객체는 데이터를 저장할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$("body") .data ("foo", 52);

HTML 5에는 유사한 기능을 가진 데이터 세트 개체가 있지만(IE 10에서는 지원되지 않음) 문자열만 저장할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

element.dataset.user = JSON.stringify (사용자) ;
element.dataset.score = 점수;

10. 아약스

비동기 작업을 위한 jQuery의 Ajax 메서드.

코드 복사 코드는 다음과 같습니다.

$.ajax({
유형 : "POST",
url: "some.php",
data: { 이름: "John", 위치: "Boston" }
}) .done (함수 ( msg ) {
경고( " 저장된 데이터: " msg );
});

Ajax 메소드를 시뮬레이션하기 위해 요청 함수를 정의할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 요청(유형, URL, 선택, 콜백) {
var xhr = new XMLHttpRequest ();
if (typeof opts === 'function') {
callback = opts;
opts = null;
}
xhr.open (type, url);
var fd = new FormData ();
if (type === 'POST' && opts) {
for (var key in opts) {
fd.append(키, JSON.stringify(opts[key]));
}
}
xhr.onload = function() {
콜백(JSON.parse(xhr.response)) ;
};
xhr.send (opts ? fd : null);
}

그런 다음 요청 함수를 기반으로 jQuery의 get 및 post 메소드를 시뮬레이션합니다.

코드 복사 코드는 다음과 같습니다.

var get = request.bind(this, 'GET' );
var post = request.bind (this, 'POST');

11. 애니메이션

jQuery의 animate 메소드는 애니메이션 효과를 생성하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

$foo.animate ('slow', { x: ' =10px ' });

jQuery의 애니메이션 효과는 주로 DOM을 기반으로 합니다. 그러나 현재 CSS 3 애니메이션은 DOM보다 훨씬 강력하므로 CSS에 애니메이션 효과를 작성한 다음 DOM 요소 클래스를 조작하여 애니메이션을 표시할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

foo.classList.add ('animate');

애니메이션에 콜백 함수를 사용해야 하는 경우 CSS 3에서는 해당 이벤트도 정의합니다.

코드 복사 코드는 다음과 같습니다.

el.addEventListener ("webkitTransitionEnd", TransitionEnded );
el.addEventListener("transitionend", transitEnded);

12. 대안

jQuery의 크기로 인해 대안이 무궁무진합니다.

그 중 가장 유명한 것은 zepto.js입니다. 디자인 목표는 최소한의 크기로 jQuery의 API와 최대한 호환되도록 하는 것입니다. zepto.js 버전 1.0의 원래 크기는 55KB이고, 최적화된 경우 29KB이며, gzip으로 압축된 경우 10KB입니다.

최대한의 호환성을 추구하지 않고 jQuery의 기본 기능만 시뮬레이션하려는 경우 min.js는 최적화 후 200바이트에 불과한 반면, Dolla는 최적화 후 1.7KB입니다.

또한 jQuery 자체는 모듈 설계를 채택하므로 필요한 모듈만 선택하여 사용할 수 있습니다. 자세한 내용은 GitHub 웹사이트를 참조하거나 전용 웹 인터페이스를 사용하세요.

13. 참고링크

- Remy Sharp, jQuery를 알아요.
- Hemanth.HM, 바닐라 JS의 힘
- Burke Holland, 5가지 jQuery 사용을 중단해야 합니다

(끝)