☾
Create an UI component
July, 2021
Introduction
You can build your own UI component without use any framework or library. Just pure javascript object and will be able to reuse it many times as you want. Also you can set methods in order to customize your component and fire events as well. This is only a model of how can we do it. Feel free to use it or improve it:
Step 1: Define an object literal
var myComponent = {
//step 2 will be here
//step 3 will be here
//step 7 will be here
};
Step 2: Define a property to store instance of object and a method to get that instance
//store instance of component with id index
items: [],
//short for access to the component
cmp: function(id){
return this.items[id];
},
Step 3: Define a function constructor that represents our component
component: function(id){
//methods to config, show and customized our component
//step 4 will be here
//step 5 will be here
//step 6 will be here
},
Step 4: Define functions for configuration
//config object default
this.config = {
width:"100px", //example of default property
height:"20px" //example of default property
};
//object for override config object just with changed default properties
this.settings = {};
//function for override config with setting
this.matchSettings = function(){
var keys = [];
for (var k in this.settings){
if(k in this.config)
this.config[k] = this.settings[k];
}
};
Step 5: Add method for slots and customize property
//slots object just in case
this.slots = {
content:""
};
//customized method
this.setWidth = function(width){
document.querySelector('#'+id).style.width = width;
};
Step 6: Define method for build template, call config functions and return the created element or append inside a parent
//build all together
this.show = function(parent){
//override settings
this.matchSettings();
//template html
var e = `
<div class='myclass' id=`+id+` style='width:`+this.config.width+`;height:`+this.config.height+`'>
`+this.slots.content+`
</div>
`;
//append inside a parent element or return it
if(parent == undefined){
return e;
}else{
var p = document.querySelector(parent);
p.insertAdjacentHTML('beforeend', e);
}
};
Step 7: Define method for create an instance of the component and store inside items
//Create an instance of component
create:function (id) {
this.items[id] = new this.component(id);
return this.items[id];
}
Step 8: Add some CSS style
.myclass{
background-color: #2196F3;
padding:10px;
color:white;
text-align:center;
}
Step 9: Example of usage (Finally 😅)
//myElement is the id
var el = myComponent.create('myElement');
//overriding the width, height remains
el.settings = {width:"200px"};
//using slot for extra content
el.slots = {content:"Hi i am a component"};
//rendering the component inside body (you can use a css selector)
el.show('body');
//changing width further (calling customized method for change property)
myComponent.cmp('myElement').setWidth('500px');
Check a working demo for this code: