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

火币

火币HTX

火币是全球三大交易所之一,虚拟货币交易平台安全可靠,注册领取新人礼包!

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

图片[1]-玩转网换肤功能原理及自定义组件化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框架的原理,突然发现了一个新大陆,哈哈哈!

© 版权声明
THE END
点赞1赞赏 分享