DEV Community

Cover image for Do you need a selector engine like jQuery, Sizzle or something else?
Frank Wisniewski
Frank Wisniewski

Posted on

2

Do you need a selector engine like jQuery, Sizzle or something else?

the following example:

create a ScrollToTop button in vanilla - old school style

"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';

  }) 
Enter fullscreen mode Exit fullscreen mode

now the same solution using a selector engine.
In this example I used my own engine, it doesn't matter for the comparison.

<script type="text/javascript" src="https://w-web.de/myquery/myquery-min.js"></script>

or

<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'
    ) 
  })
Enter fullscreen mode Exit fullscreen mode

Advantages of a SelectorEngine

  • shorter code
  • Chaining

Disadvantages

  • greater learning effort

I think that if you have to deal with a lot of changing employees in a team, the vanilla JS solution certainly makes more sense.

If you are a lone fighter, you should use a Selector Engine.

what is your opinion?

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (1)

Collapse
 
frankwisniewski profile image
Frank Wisniewski • Edited

There are many ways to Rome, of course I know that this can also be solved in other ways.

As you may have overlooked, the code was designed as a plugin. That's why the ready, scope!!

It's not about a CodeGolf competition.

In my opinion, your code is unnecessarily complicated, why use template?

Why the strange way via the hidden attribute, which is ultimately misused as a class?

Why assign the circle attribute in the CSS?

All of this means that the code shown does not work on IOS devices, for example!!

sample code, if you don't design it as a plugin:

css

.hidden {
  display: none;
}

.scroll-button {
  bottom: 10px;
  cursor: pointer;
  opacity: 0.5;
  position: fixed;
  right: 10px;
  transition: all ease 400ms;
  width: 50px;
  z-index: 1000;
}

.scroll-button:hover {
  opacity: 1;
}

.scroll-button circle {
    fill: red;
  }

.scroll-button path {
  stroke: #fff;
  stroke-width: 15;
  stroke-linecap: round;
}
Enter fullscreen mode Exit fullscreen mode

Javascript:

  document.body.insertAdjacentHTML( 'beforeend', 
      `<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
        id = scrollButton class="scroll-button hidden" 
         viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50"></circle>
        <path d="M50 80 L50 20 M50 20 L80 50 M50 20 L20 50" />
      </svg>` )

  scrollButton.onclick=() =>
    document.body.scrollIntoView( { behavior: "smooth" } )

  window.addEventListener( 'scroll', () => 
    scrollButton.classList.toggle('hidden', 
    document.documentElement.scrollTop < 100 ))
Enter fullscreen mode Exit fullscreen mode

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay