jquery bloat를 잃습니다

코어 포인트

<.> nodelist.js는 jQuery의 DOM 작업의 대안으로서 유사한 기능을 제공하지만 (압축 후 4K), 기본 브라우저 API의 개선을 활용합니다.

• jQuery와 달리 NODELIST.JS는 노드 어레이를 단일 노드로 취급하여 클리너 코드와 더 쉬운 NODELIST 객체 작업을 가능하게합니다.

• <..> nodelist.js에는 속성을 설정하고 얻는 특수 메소드, 요소 별 방법을 호출하고 Nodelist에서 노드에 액세스하고 jQuery의 속성에 해당합니다.

<..> nodelist.js는 특정 버전 (Firefox 6, Safari 5.0.5, Chrome 6, IE 9, Opera 11.6) 후 주류 브라우저와 호환되며 브라우저에서 추가 된 새로운 방법/속성을 포함하도록 자동 업데이트됩니다.
• p.tip { 배경색 : RGBA (128,128,128,0.05); 국경-오른쪽 라디우스 : 5px; 국경-바닥-라디우스 : 5px; 패딩 : 15px 20px; 왼쪽 경계 : 10px 고체 RGBA (128,128,128,0.075); } <.>

  prevObject 최근 몇 년 동안 JQuery는 웹에서 사실상의 JavaScript 라이브러리가되었습니다. 그것은 많은 크로스 브라우저 불일치를 제거하고 클라이언트 스크립트에 인기있는 구문 설탕 층을 추가합니다. 추상화 처리의 주요 통증 중 하나는 DOM 작업이지만 jQuery의 출현 이후 기본 브라우저 API가 크게 개선되었으며 "jQuery가 필요하지 않을 것"이라는 개념이 인기를 얻었습니다. owner 이유는 다음과 같습니다

  jQuery에는 필요하지 않거나 사용하지 않는 많은 기능이 포함되어 있으므로 (따라서 큰 경우에는 불필요합니다).
jQuery는 너무 많은 사람들에게 너무 많은 기능을 취합니다. 일반적으로 작은 라이브러리는 일부 작업을 더 잘 수행 할 수 있습니다.
• DOM 운영 측면에서 브라우저 API는 이제 jQuery의 대부분의 기능을 수행 할 수 있습니다.

  브라우저 API는 이제 를 사용하는 등 동기화되었습니다.

  문제는 무엇입니까?

문제는 DOM에 네이티브 (또는 순수한) JavaScript를 사용하는 것이 jQuery에 비해 번거 롭을 수 있다는 것입니다. 더 중복 코드를 작성하고 브라우저의 쓸모없는 노드리스트를 처리해야하기 때문입니다.

먼저, MDN의 Nodelist 정의를 살펴 보겠습니다 :

Nodelist 객체는 및 메소드에 의해 반환 된 노드와 같은 노드 모음입니다.

때때로 역학이 끄덕임 (혼란 스러울 수 있음)이 있습니다. 경우에 따라 노드 엘리스트는 역동적 인 컬렉션이며, 이는 DOM의 변화가 컬렉션에 반영된다는 것을 의미합니다. 예를 들어,

는 동적입니다.

이것은 어떤 역동적이고 어느 것이 정적인지 알 수 없기 때문에 문제가 될 수 있습니다. Nodelist에서 각 노드를 제거하고 Nodelist가 비어 있는지 확인하지 않으면. 비어 있다면, 당신은 역동적 인 노드리스트가 있습니다 (단지 나쁜 생각입니다).

또한 브라우저는 이러한 NODELIST 객체를 조작하는 유용한 방법을 제공하지 않습니다.

예를 들어 불행히도 를 사용하여 노드를 통해 루프 할 수 없습니다.

그러므로 다음을 수행해야합니다

또는 "해킹"만 사용하십시오 : forEach 브라우저의 네이티브 노드리스트는 가 하나뿐입니다. 색인을 통해 Nodelist에서 노드를 반환합니다. 배열을 사용하는 것처럼 노드에 액세스 할 수있을 때 ( 사용) 완전히 쓸모가 없습니다.

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

이것은 Nodelist.js가 들어오는 곳입니다. 브라우저 네이티브 API를 jQuery를 사용하는 것으로 사용하기 쉽지만 4K 압축 크기 만 있으면됩니다.

<🎜 🎜> <<> 솔루션 <🎜 🎜> 나는 기본 DOM API를 사용했기 때문에 Nodelist.js를 만들었지 만 더 간결하게 만들고 싶어서 코드 (예 : 루프)를 작성할 때 많은 중복성을 줄이려고합니다.

<.> nodelist.js는 마치 마치 마치 마치 마치 마치 마치 마치 노드 어레이 (즉, 내 노드리스트)를 조작 할 수있는 기본 DOM API의 래퍼입니다. 이것은 브라우저 네이티브 NODELIST 객체보다 더 많은 기능을 제공합니다.

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

이것이 좋다고 생각되면 공식 Github 저장소에서 Nodelist.js 사본을 받고이 튜토리얼의 나머지 부분을 계속 읽으십시오.

<<> 사용 : <🎜 🎜> dom 노드를 선택하는 것은 간단합니다 : <🎜 🎜> // 내 노드리스트로 돌아갑니다 <🎜 🎜> 이 방법은 <🎜

에 사용됩니다.

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

그러나 jQuery와 어떻게 비교됩니까?

이 질문을 해줘서 다행입니다. Native J, JQuery 및 Nodelist.js를 비교해 봅시다. item 우리가 세 개의 버튼이 있다고 가정 해 봅시다 : <🎜 🎜> 각 버튼의 텍스트를 "Click Me"로 변경하겠습니다 : <🎜 🎜> <: :> 기본 JS : array[index] <🎜 🎜>

<🎜 🎜> <<> jQuery :

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

<🎜 🎜>

<🎜 🎜> <<> nodelist.js :

<🎜 🎜>

<<> 여기서, 우리는 Nodelist.js가 NODELIST를 단일 노드로 효과적으로 취급 할 수 있음을 알 수 있습니다. 즉, 우리는 노드리스트를 참조하고

속성을 ​​"클릭"으로 설정했습니다. Nodelist.js는 Nodelist의 각 노드에 대해 이것을 수행합니다. 매우 영리합니까?

우리가 메소드 체인 (jQuery와 유사)을 원한다면 다음을 수행합니다.

<🎜 🎜> <<> 이제 각 버튼에 클릭 이벤트 리스너를 추가하겠습니다. <: :> 기본 JS :

<🎜 🎜>

<🎜 🎜> <<> jQuery :

<🎜 🎜>

<🎜 🎜> <<> nodelist.js :

<🎜 🎜>

<🎜 🎜> <<> 좋아, jQuery의

방법은 상당히 좋습니다. 내 라이브러리는 브라우저의 기본 Dom API (따라서 <🎜 🎜>)를 사용하지만 다음과 같은 방법에 대한 별칭을 만들지 못하게하지는 않습니다.

$$(selector); <<> 나쁘지 않아! 이것은 우리가 자신의 방법을 추가하는 방법을 보여줍니다 : <🎜 🎜>

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

<🎜 🎜> <<> nodelist.js 배열 메소드 지원

<.> nodelist.js는

에서 상속하지만 일부 방법은 변경되었으므로 직접적으로 변경되지 않으므로 Nodelist (노드 배열)와 함께 사용하는 것이 합리적입니다.

<<> 및 Array.prototype

예를 들어 <<> 및

및 push 메소드는 노드 만 매개 변수로 만 가져갈 수 있습니다. 그렇지 않으면 오류가 발생합니다. unshift <🎜 🎜> <<> 따라서 <🎜 🎜> 및

둘 다 메소드 체인을 허용하기 위해 Nodelist를 반환합니다. 즉, JavaScript의 기본 <🎜 <🎜

또는 push 메소드와 다릅니다. 우리가 Nodelist의 길이를 원한다면, 우리는 unshift 속성 만 사용하면됩니다.

<,> JavaScript의 기본 배열 방법과 같은이 두 가지 방법은 Nodelist를 변경합니다.

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

<<>

<🎜 🎜> <<> 메소드는 다음을 매개 변수로 받아들입니다.

push <<>는 재귀적인 방법 이므로이 배열은 우리가 원하는만큼 깊을 수 있으며 평평해질 수 있습니다. 그러나 전달 된 배열의 요소가 노드, 노드리스트 또는 htmlcollection이 아닌 경우 오류가 발생합니다. unshift Array#push <<> <🎜 javaScript 방법과 마찬가지로 새로운 노드리스트를 반환합니다. Array#unshift <🎜 🎜> <<> length,

,

, <🎜

,

, concat, <🎜 🎜>

<<<>

및 concat 메소드는 모두 옵션 매개 변수를 가져갈 수 있으며, 노드리스트에서 팝 또는 전환 할 노드 수를 나타냅니다. JavaScript의 Native <🎜

또는
와 달리, 후자는 매개 변수로 전달되는 내용에 관계없이 배열에서 요소를 항상 팝업하거나 이동시킵니다.

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

각 맵핑 된 값이 노드 인 경우

메소드는 그렇지 않은 경우 맵핑 된 값을 반환합니다. concat <🎜 🎜>

및

메소드는 실제 배열에서와 동일하지만 노드리스트를 반환합니다. concat nodelist.js는 <🎜 🎜>에서 직접 상속받지 않기 때문에, nodelist.js를로드 할 때 메소드를 Array#concat에 추가하면 상속되지 않습니다.

여기에서 나머지 배열 방법을 볼 수 있습니다.

<🎜 🎜> 특수 방법 <🎜 🎜> <..> nodelist.js에는 네 가지 고유 한 방법과

라는 속성이 있으며, 이는 jQuery의 pop 속성에 해당합니다. shift map <<> slice 및 filter 메소드 :

일부 요소는 해당 유형의 요소에 특정한 속성을 가지고 있습니다 (예 : 앵커 태그의

속성). 그렇기 때문에 pop가 정의되지 않은 반환을 반환하는 이유입니다. 왜냐하면 노드리스트의 모든 요소가 상속받은 속성이 아니기 때문입니다. 이것이 우리가 shift 메소드를 사용하여 이러한 속성에 액세스하는 방법입니다.

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

<🎜 🎜>

메소드는 각 요소에 대한 이러한 특성을 설정하는 데 사용될 수 있습니다. set <🎜 🎜> <<> 또한 방법 체인을 허용하기 위해 NODELIST를 반환합니다. 우리는 등으로 사용할 수 있습니다 (둘 다 동등한) :

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

우리는 또한 한 번의 호출에서 여러 속성을 설정할 수 있습니다.

위의 모든 작업은 모든 속성을 사용하여 수행 할 수 있습니다. set textContent <<>

메소드

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

<🎜 🎜>

메소드를 사용하면 요소 별 메소드를 호출 할 수 있습니다 (예 : 비디오 요소에서

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

).

style <<>

메소드

var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

<🎜 🎜>

메소드는 jQuery의 call 방법과 동일합니다. 색인을 전달하는 노드 만 포함하는 노드리스트를 반환합니다.

<<>

속성 call <🎜 🎜> <🎜 🎜> pause 속성은 jQuery의

와 동일합니다.

$('button').text('Click Me');

<<>는 스타일 배열을 반환하고 item는 <🎜 🎜>에 의해 매핑 된 노드리스트를 반환합니다.

<..> nodelist.js 호환성
내 라이브러리는 아래에 설명 된대로 모든 주요 새로운 브라우저와 호환됩니다.

<🎜 🎜> <<> item eq 브라우저

$$('button').textContent = 'Click Me';

버전 <🎜

owner

firefox

6 owner prevObject

$$('button').set('textContent', 'Click Me');

safari <🎜 🎜> <🎜 🎜 5.0.5 <🎜

btns.style owner style Chrome

6

<🎜 <🎜 <🎜 <🎜 < 🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <<🎜

ie 9 <<> OPERA <🎜 11.6 결론 <🎜 🎜> 이제 우리는 마침내 유용한 NODELIST 객체를 사용할 수 있습니다! 약 4K의 압축 크기의 경우 위의 모든 것 이상을 얻을 수 있습니다. nodelist.js는 브라우저를 종속성으로 사용하므로 업그레이드가 필요하지 않습니다. 브라우저가 DOM 요소에 새로운 메소드/속성을 추가 할 때마다 Nodelist.js를 통해 이러한 메소드/속성을 자동으로 사용할 수 있습니다. 이 모든 것은 걱정해야 할 유일한 감가 상각이 브라우저 제거 방법이라는 것을 의미합니다. 웹을 깨뜨릴 수 없기 때문에 일반적으로 매우 낮은 사용 방법입니다. 그래서 당신은 어떻게 생각하십니까? 이 라이브러리 사용을 고려 하시겠습니까? 중요한 기능이 누락 되었습니까? 아래의 의견에서 귀하의 의견을 듣고 싶습니다. nodelist.js <🎜 와의 DOM 운영에 대해 자주 묻는 질문 Nodelist와 Htmlcollection의 차이점은 무엇입니까? 노드리스트와 htmlcollection은 모두 노드 컬렉션입니다. 이들의 주요 차이점은 노드리스트가 모든 노드 유형을 포함 할 수 있고 htmlcollection은 요소 노드의 모음이라는 것입니다. htmlcollection도 동적이므로 문서 구조가 변경되면 자동으로 업데이트됩니다. 반면에 Nodelist는 정적이며 문서의 변경 사항을 반영하도록 업데이트되지 않습니다. 노드리스트를 배열로 변환하는 방법은 무엇입니까? 당신은 메소드 또는 확장 연산자를 사용하여 Nodelist를 배열로 변환 할 수 있습니다. 다음은 다음과 같습니다.

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 错误：nodes.forEach 不是函数

jQuery 선택기가 일반 요소 대신 PrevoBject를 반환하는 이유는 무엇입니까?

<'s> jQuery의 체인 메커니즘은 변경하기 전에 이전 객체를 저장하여 작동합니다. 이를 통해 <🎜 🎜> 메소드를 사용하여 이전 상태로 복원 할 수 있습니다. 실제 DOM 요소를 얻으려면

메소드 또는 배열 표기법을 사용할 수 있습니다.

노드리스트를 통해 반복하는 방법은 무엇입니까? .end() 당신은 for loop, for roop 또는 <🎜 🎜 메소드를 사용하여 노드리스트를 통해 루프 할 수 있습니다. 다음은 for loop을 사용하는 예입니다 : <🎜 🎜> .get() jQuery에서 .prev () 메소드의 사용은 무엇입니까?

jQuery의 <🎜 🎜> 메소드는 이전 형제 자매 바로 옆에 선택된 요소를 선택하는 데 사용됩니다. 선택기가 제공되는 경우, 이전 형제 요소는 선택기가 일치하는 경우에만 검색됩니다.

jQuery는 2022 년에도 여전히 관련이 있습니까?

jQuery는 출시시 게임 체인저 였지만 현대 자바 스크립트 생태계는 크게 바뀌 었습니다. jQuery를 인기있게 만드는 많은 기능은 이제 JavaScript 자체에 내장되어 있습니다. 그러나 jQuery는 여전히 널리 사용되고 유지 관리되며 일부 프로젝트에 적합한 선택 일 수 있습니다. forEach() Nodelist에서 특정 노드를 선택하는 방법은 무엇입니까?

배열 표기법 또는 <🎜 🎜> 메소드를 사용하여 NODELIST에서 특정 노드를 선택할 수 있습니다. 다음은 다음과 같습니다.

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

노드리스트는 배열이 아니므로지도, 필터 및 감소와 같은 메소드가 없습니다. 그러나 Nodelist를 배열로 변환 한 다음 이러한 방법을 사용할 수 있습니다.

QuerySelector와 QuerySelectorall의 차이점은 무엇입니까? .prev() 지정된 CSS 선택기와 일치하는 문서의 첫 번째 요소를 반환하고

는 CSS 선택기와 일치하는 모든 요소의 노드리스트를 반환합니다.

노드리스트가 비어 있는지 확인하는 방법은 무엇입니까?

당신은 속성을 ​​확인하여 Nodelist가 비어 있는지 확인할 수 있습니다. 길이가 0이면 Nodelist는 비어 있습니다. 다음은 다음과 같습니다.

위 내용은 jquery bloat를 잃습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!