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)
}
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
}
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)
}
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)