Prototype JS

Disclaimer: This was a POC and shouldn't be used in Production. I recommend building your web apps with something like Svelte, Vue, or React.

Prototyping pure JavaScript with parts of jQuery I actually use and like.

Getting Started

Pick and choose from any of the modules, the minified folder contains prototype.min.js that has all of the modules merged into one file.

Example

conststyles={
el.style.color='red'el.style.fontSize='14px'}// Beforeconstparent=document.querySelector('#parent')constchilren=parent.querySelectorAll('.child')children.forEach(el=>{el.addEventListener('click',e=>Object.assign(el.style,styles))})// Afterconstparent=select('#parent')constchilren=parent.select('.child')chilren.on('click',e=>e.target.css(styles))// And because all of the modules return their Node or NodeList you can chain your methods:constheaderList=select('h1').css({color: 'blue'}).on('click',e=>console.log('click'))// headerList = NodeList

Modules

select.js

Syntax

Node.prototype.select=function(query[,limit=true])

Parameters

query

A vaild CSS selector string

limit [optional]

If truthy and there is only one element a Node will be returned. If falsey and there is only one element a NodeList will be returned.

Returns

Node or NodeList

Example

// Beforeconstparent=document.querySelector('#parent')// Nodeconstchildren=parent.querySelectorAll('.child')// NodeList// After constparent=select('#parent')// Nodeconstchildren=parent.select('.child')// NodeList

css.js

Syntax

Node.prototype.css=function(css)

Parameters

css

An object containing valid JavaScript style keys and values

Returns

Node or NodeList

Example

conststyles={color: 'red',fontSize: '14px'}// BeforeObject.assign(parent.style,styles)children.forEach(el=>{Object.assign(el.style,styles)})// Afterparent.css(styles)chilren.css(styles)

events.js

The events module just wraps the built-in addEventListener and removeEventListener.

Returns

Node or NodeList

Example

// Beforeparent.addEventListener('click',eventHandler)children.foreach(el=>{el.addEventListener('click',eventHandler)})// Afterparent.on('click',eventHandler)children.on('click',eventHandler)

License

The project is licensed under the GNU General Public License v3.0. - see the LICENSE.md file for details