jQuery, Sizzle 또는 다른 것과 같은 선택기 엔진이 필요합니까?
20566 단어 htmlprogrammingjavascript
바닐라 - 구식 스타일로 ScrollToTop 버튼 만들기
"use strict";
document.addEventListener( 'DOMContentLoaded', function () {
const scrollButton = document
.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
scrollButton.setAttributeNS( 'http://www.w3.org/2000/xmlns/',
'xmlns:xlink', 'http://www.w3.org/1999/xlink' );
scrollButton.setAttribute( 'viewBox', "0 0 100 100" );
scrollButton.style.width ='50px'
scrollButton.style.position = 'fixed'
scrollButton.style.right = '10px'
scrollButton.style.bottom = '10px'
scrollButton.style.zIndex = '1000'
scrollButton.style.opacity = '0.5'
scrollButton.style.cursor = 'pointer'
scrollButton.style.transition = 'all ease 400ms'
scrollButton.style.display = 'none'
const myCircle = document
.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
myCircle.setAttribute( 'cx', '50' );
myCircle.setAttribute( 'cy', '50' );
myCircle.setAttribute( 'r', '50' );
myCircle.setAttribute( 'fill', 'red' );
scrollButton.appendChild( myCircle );
const myArrow = document
.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
myArrow.setAttribute( 'd', 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' );
myArrow.setAttribute( 'stroke', 'white' );
myArrow.setAttribute( 'stroke-width', '15' );
myArrow.setAttribute( 'stroke-linecap', 'round' );
scrollButton.appendChild( myArrow );
scrollButton.addEventListener( 'mouseover',
() => scrollButton.style.opacity = '1'
);
scrollButton.addEventListener( 'mouseout',
() => scrollButton.style.opacity = '.3'
);
scrollButton.addEventListener( 'click', () => document
.querySelector( 'body' )
.scrollIntoView( { behavior: 'smooth' } )
);
document.body.appendChild( scrollButton );
window.onscroll = () =>
scrollButton.style.display =
( document.querySelector( 'html' ).scrollTop /
( document.querySelector( 'html' ).scrollHeight -
document.querySelector( 'html' ).clientHeight ) ) > 0.25
? '' : 'none';
})
이제 선택기 엔진을 사용하는 동일한 솔루션입니다.
이 예에서 나는 내 자신의 엔진을 사용했습니다. 그것은 비교를 위해 중요하지 않습니다.
<script type="text/javascript" src="https://w-web.de/myquery/myquery-min.js"></script>
또는
<script type="text/javascript" src="https://w-web.de/myquery/myquery.js"></script>
"use strict";
$().ready( () => {
let scrollButton =
$().sCreate( '0 0 100 100' )
.styles()
.width( '50px' ).position( 'fixed' )
.right( '10px' ).bottom( '10px' )
.zIndex( '1000' ).opacity( '0.3' )
.cursor( 'pointer' ).transition( 'all ease 400ms' )
.display( 'none' ).parent()
.sAppend(
$().sCircle( 50, 50, 50 ).fill( 'red' ) )
.sAppend(
$().sPath( 'M50 80 L50 20 M50 20 L80 50 M50 20 L20 50' )
.shortStroke( 'white' , '15', 'round' ) )
.on( 'mouseover', function (){ this.style.opacity = '1' } )
.on( 'mouseout', function (){ this.style.opacity = '.3' } )
.click( () => $( 'body' ).n.scrollIntoView( { behavior: 'smooth' } ) )
.appendEnd( $( 'body' ) )
$(window).on('scroll', () =>
scrollButton.n.style.display =
( $('html').n.scrollTop /
( $('html').n.scrollHeight -
$('html').n.clientHeight ) ) > 0.25
? '' : 'none'
)
})
SelectorEngine의 장점
단점
팀에서 많은 변화하는 직원을 처리해야 하는 경우 바닐라 JS 솔루션이 확실히 더 적합하다고 생각합니다.
고독한 전사라면 Selector Engine을 사용해야 합니다.
당신의 의견 것입니다?
Reference
이 문제에 관하여(jQuery, Sizzle 또는 다른 것과 같은 선택기 엔진이 필요합니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/frankwisniewski/do-you-need-a-selector-engine-like-jquery-sizzle-or-something-else-19ob텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)