DEV Community

Santiago Salazar Pavajeau
Santiago Salazar Pavajeau

Posted on

Simple separation of concerns in JS Part 2

This is an example of separation of concerns in an app with heavy use of the vanilla DOM manipulation and event handling methods like document.createElement, querySelector, and addEventListener. In JS there are several ways to approach modularity, like the major frameworks and libraries, but this is what worked for me in vanilla JS to take a step forward towards cleaner code in that continuous pursuit of improvement.

Mixed DOM Manipulation and Event Handling

This type of functions would be taking care of many tasks at the same time a simple example is:


function renderPlayButton(){

    let trackBtns = document.getElementById("track-btns")

    let playButton = document.createElement("button")
    playButton.id = "play"
    playButton.className = "playback-button"
    playButton.innerHTML = `<svg class="bi bi-play-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
                            </svg>`

    playButton.addEventListener("click", ()=> { // add event listener to button to play song

        updateNewSong()
        newSong.playSong()

    }) 
    trackBtns.appendChild(playButton)

}


Enter fullscreen mode Exit fullscreen mode

However, in functions with more lines of code, mixing dom-manipulation and event handling creates low readability.

Separation of Concerns

DOM Manipulation Methods

I put all the methods in the app that use document.createElement in a file called DOMHelpers.js. A sample method would look like:

function createPlayButton(){
    let playButton = document.createElement("button")
    playButton.id = "play"
    playButton.className = "playback-button"
    playButton.innerHTML = `<svg class="bi bi-play-fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
                            </svg>`
    return playButton
}
Enter fullscreen mode Exit fullscreen mode

Event Handling Methods

The event handling methods would then become cleaner as we use the helpers that create dom elements from an external source.

function playButton(){

    let trackBtns = document.getElementById("track-btns")

    let playButton = createPlayButton()

    playButton.addEventListener("click", ()=> {

        updateNewSong()
        newSong.playSong()

    })
    trackBtns.appendChild(playButton)

}
Enter fullscreen mode Exit fullscreen mode

I think this is a simple but powerful pattern, and it is a great way to make code look cleaner in JS.

Take a look at the rest of the code here.

Feel more than welcome to reach out with any ideas/comments at Linkedin or Twitter, or check out my portfolio.

Top comments (0)