换肤功能原理及自定义组件化UI样式初步尝试

 只从UI工作开始向前端工作，我一直计划着开发一套属于自己的UI框架，网站通过拖拽点击，或输入布局代码，后台自动生成一套静态页面，从此前端工作仅需要补充各种排版即可，静态页面通过代码生成。
可能我上面的想法你不是太理解，其实有点像换肤功能，后台点一下，参数发生变化，前端根据参数加载对应的布局，这就是这个框架的核心点。

首先html:

<input type="text" id="input" placeholder="请输入数字">
<button id="btn">测试</button>

<div id="app">
	<p>这里是测试结果</p>
</div>

预设css:

#app{width: 300px;height: 60px;}
.bg0{background: #000;color: #fff;}
.bg1{background: #f6f6f6;color: red;}
.bg2{background: pink;color: rgb(55, 0, 255);}
.bg3{background: greenyellow;color: #111;}
.bg4{background: yellow;color:blueviolet;}

然后再预设JS对象：

//预设自己的UI的内容
 const arrays = [
	 {id:0, title:"标题一",classNa:'bg0'},
	 {id:1, title:"标题二",classNa:'bg2'},
	 {id:2, title:"标题三",classNa:'bg4'},
	 {id:3, title:"标题四",classNa:'bg3'}
 ]
 //设置匹配参数
 function aa(a,y){
     return a.filter(function(item){
	 return item.id == y;
 	});
 }  

对接html事件和对象：

const inputs = document.getElementById('input'); 
const btn = document.getElementById('btn'); 
const app = document.getElementById('app'); 
btn.onclick = function(){
const in_ns = Number(input.value);
if(in_ns>=0 && in_ns<4){
	const data = aa(arrays,in_ns)
	//  根据获取的值设置元素对应的class和内容
	app.className = ''; 
	app.className = data[0].classNa; 
	app.innerHTML = data[0].title 
}else{
	alert("咦，输入不是数字类型或超出预设！")
}
}

这样就可以实现简单的换肤功能了，当然，此时估计你也明白了我想做的UI框架的原理，突然发现了一个新大陆，哈哈哈！