versus-js's Introduction

Versus JS

There is a general conversation around jQuery that it is a "legacy" tool that has long since been replaced with ES6. This conversation seems to focus on features like document.querySelector() as "replacements" for what jQuery does. Many state that jQuery can be replaced by "four lines of utility code".

This project is currently in the process of being updated to document the outcome of the conversation.

You can see the original files for the conversation by visiting the Original folder here:

https://github.com/jbanes/versus-js/tree/main/Original

Stay tuned for the updated analysis!

versus-js's People

Contributors

Stargazers

Watchers

versus-js's Issues

Alternate solution

Since we're dealing with the web:

Include lang="en"
Include charset
Use <a href> for the pagination links
Use aria-current="page" to indicate selection
Content in <main>

And then tech upgrades / changes:

type="module" so no more DOMContentLoaded needed.
Use single click event listener instead of event handler per element.
Using links added keyboard support for free.

The rest is just my own coding style balancing for a minimalistic but readable approach since this doesn't really need to go for full throttle on abstractions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ES6 Demonstration</title>
    <style>
    .pager { margin: 5px 10px; font-family: sans-serif; }
    .pager .page { color: inherit; display: inline-block; padding: 0px 5px; text-decoration: none; }
    .pager .page:active { color: red; }
    .page[aria-current="page" i] { font-weight: bold; color: red; }
    .paged-content { font: bold 250% sans-serif; padding: 25px 10px; }
    </style>
    <script type="module">
        let currentPage = 1;

        function renderPagers(pageCount) {
            const pagers = document.querySelectorAll('.pager');
            let html = `Page: `;
            for (let i = 1; i <= pageCount; i++) {
                const current = currentPage === i ? ` aria-current="page"` : '';
                html += `<a href="#content" class="page" data-page="${i}"${current}>${i}`;
            }
            pagers.forEach(pager => void (pager.innerHTML = html));
        }

        function updatePage(page) {
            const pageCount = 5;
            currentPage = Number(page) || currentPage;
            renderPagers(pageCount);
            document.querySelector('#content').textContent = `Page ${currentPage}`;
        }

        document.addEventListener('click', function(event) {
            const page = event.target.closest('[data-page]')?.dataset.page;
            if (page) updatePage(page);
        });

        updatePage();
    </script>
</head>
<body>
    <div id="top_pager" class="pager"></div>
    <main id="content" class="paged-content"></main>
    <div id="bottom_pager" class="pager"></div>
</body>
</html>

I guess you'll need a more complex / real lifey example because I don't feel like this code would need jQuerifying. It might get more interesting if you enforced some usability improvements like "focus must remain where it is" as focus is one of the things that gets lost when using innerHTML (or jQuery's .empty()). That single limitation would force a lot more complexity by the need of reusing existing DOM.

Recommend Projects

jbanes / versus-js Goto Github PK

versus-js's Introduction

Versus JS

versus-js's People

Contributors

Stargazers

Watchers

Forkers

versus-js's Issues

Alternate solution

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs