JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at some basic coding and design patterns.
Lazy Definition
The lazy definition pattern is where we assign the function to a property when we run it.
For instance, we can write:
const APP = {};
APP.click = {
addListener(el, type, fn) {
if (el.addEventListener) {
APP.click.addListener = function(el, type, fn) {
el.addEventListener(type, fn, false);
};
} else if (el.attachEvent) {
APP.click.addListener = function(el, type, fn) {
el.attachEvent(`on${type}`, fn);
};
} else {
APP.click.addListener = function(el, type, fn) {
el[`on${type}`] = fn;
};
}
APP.click.addListener(el, type, fn);
}
};
We have the addListener method which runs when we run the APP.click.addListener method.
We can set the function according to which one is available.
Configuration Object
We can create a configuration object to let us get configuration from there.
Objects are better than parameters because their order doesn’t matter.
We can also easily skip parameters that we don’t want to add.
It’s easy to add an optional configuration.
The code is more readable because the config’s object’s properties are in the code.
For example, instead of writing:
APP.dom.CustomDiv = function(text, color) {
const div = document.createElement('div');
div.color = color|| 'green';
div.textContent = text;
return div;
};
We write:
APP.dom.CustomDiv = function({
text,
color = 'green'
}) {
const div = document.createElement('div');
div.color = color;
div.textContent = text;
return div;
};
We destructured the object properties so that we can use the variables.
It’s shorter and cleaner.
And the order doesn’t of the properties don’t matter.
We just pass in an object as the parameter to use it:
new APP.dom.CustomDiv({ text: 'click me', color: 'blue' })
It’s easy to switch the parameters’ order if they’re in an object.
All the properties should be independent and optional.
Private Properties and Methods
We can keep properties and methods with JavaScript by keeping them in an object.
For instance, we can write:
APP.dom.CustomDiv = function({
text,
type = 'sumbit'
}) {
const styles = {
font: 'arial',
border: '1px solid black',
color: 'black',
background: 'grey'
};
const div = document.createElement('div');
div.styles = {
...div.styles,
...styles
};
div.type = type;
div.textContent = text;
return div;
};
We have the styles object that has the styles we want to apply to the div.
Since it’s inside the function, we can’t change it from the outside.
We can also add a method to set the styles inside the method:
APP.dom.CustomDiv = function({
text,
type = 'sumbit'
}) {
const styles = {
font: 'arial',
border: '1px solid black',
color: 'black',
background: 'grey'
};
const div = document.createElement('div');
const setStyles = (el) => {
el.styles = {
...el.styles,
...styles
};
}
div.type = type;
div.textContent = text;
setStyles(div);
return div;
};
We have the setStyles private function that can only be called inside the CustomDiv constructor.
Conclusion
We can assign fu7nctions to a property when we call them.
Also, we can keep values private by putting them inside the function.
