技術標籤：vuejshtmljavajavascript

只從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框架的原理，突然發現了一個新大陸，哈哈哈！