學習了https://zhuanlan.zhihu.com/p/25398176 這篇文章後根據工作中業務的痛點來實踐一下；
三者之間是互斥的關係，開啓其中一個其餘兩個需要變爲禁止狀態；
參考代碼：
<!DOCTYPE html>
<html>
<head>
<style>
.unitDiv {
height: 47px;
margin-left: 3px;
}
.basicRadio {
float: left;
width: 85px;
}
.basicRadio input {
vertical-align: middle;
}
.basicRadio label {
vertical-align: middle;
}
.basicLabel {
float: left;
width: 100px;
margin-top: 4px;
text-align: left;
}
</style>
</head>
<body>
<button id="btn">改變狀態</button>
</body>
<script src="jquery.js"></script>
<script>
//讓bind函數支持IE8
if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this,
fNOP = function () {},
fBound = function () {
return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
aArgs.concat(Array.prototype.slice.call(arguments)));
};
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fBound;
};
}
function Button(obj){
var WDR_Checked_state=obj.WDR_Checked||false;
var HLC_Checked_state=obj.HLC_Checked||false;
var BLC_Checked_state=obj.BLC_Checked||false;
this.state={
WDR_Checked:WDR_Checked_state,
HLC_Checked:HLC_Checked_state,
BLC_Checked:BLC_Checked_state,
WDR_Radio_Disabled:HLC_Checked_state|BLC_Checked_state?"disabled":"",
HLC_Radio_Disabled:WDR_Checked_state|BLC_Checked_state?"disabled":"",
BLC_Radio_Disabled:WDR_Checked_state|HLC_Checked_state?"disabled":"",
};
this.dom=null;
this.wrapper=document.body;
}
Button.prototype.setState=function(state){
var oldDom = this.dom
for( key in state){
this.state[key]=state[key]
}
this.dom = this.render()
if (this.onStateChange) this.onStateChange(oldDom, this.dom)
}
Button.prototype.onStateChange =function(oldEl, newEl){
this.wrapper.insertBefore(newEl, oldEl) // 插入新的元素
this.wrapper.removeChild(oldEl) // 刪除舊的元素
}
Button.prototype.render=function(){
var WDR_Radio_On_Checked=this.state.WDR_Checked?"checked":"";
var WDR_Radio_Off_Checked=this.state.WDR_Checked?"":"checked";
var HLC_Radio_On_Checked=this.state.HLC_Checked?"checked":"";
var HLC_Radio_Off_Checked=this.state.HLC_Checked?"":"checked";
var BLC_Radio_On_Checked=this.state.BLC_Checked?"checked":"";
var BLC_Radio_Off_Checked=this.state.BLC_Checked?"":"checked";
var WDR_Radio_Disabled=this.state.WDR_Radio_Disabled?"disabled":"";
var HLC_Radio_Disabled=this.state.HLC_Radio_Disabled?"disabled":"";
var BLC_Radio_Disabled=this.state.BLC_Radio_Disabled?"disabled":"";
var str=[
'<div>',
'<div class="unitDiv" id="WDR">',
'<label class="basicLabel">寬動態</label>',
'<div class="basicRadio">',
'<input name="WDR" id="WDR_Radio_On" '+WDR_Radio_On_Checked+' '+WDR_Radio_Disabled+' checked type="radio" value="1">',
'<label name="labOn">開啓</label>',
'</div>',
'<div class="basicRadio">',
'<input name="WDR" id="WDR_Radio_Off" '+WDR_Radio_Off_Checked+' '+WDR_Radio_Disabled+' type="radio" value="0">',
'<label name="labOff">關閉</label>',
'</div>',
'</div>',
'<div class="unitDiv" id="HLC">',
'<label class="basicLabel">強光抑制:</label>',
'<div class="basicRadio">',
'<input type="radio" name="light_restrain" id="HLC_Radio_On" '+HLC_Radio_On_Checked+' '+HLC_Radio_Disabled+' value="1"/>',
'<label>開啓</label>',
'</div>',
'<div class="basicRadio">',
'<input type="radio" name="light_restrain" id="HLC_Radio_Off" '+HLC_Radio_Off_Checked+' '+HLC_Radio_Disabled+' value="0"/>',
'<label>關閉</label>',
'</div>',
'</div>',
'<div class="unitDiv" id="BLC">',
'<label class="basicLabel">背光補償:</label>',
'<div class="basicRadio">',
'<input type="radio" name="BLC" id="BLC_Radio_On" '+BLC_Radio_On_Checked+' '+BLC_Radio_Disabled+' value="1"/>',
'<label>開啓</label>',
'</div>',
'<div class="basicRadio">',
'<input type="radio" name="BLC" id="BLC_Radio_Off" '+BLC_Radio_Off_Checked+' '+BLC_Radio_Disabled+' value="0"/>',
'<label>關閉</label>',
'</div>',
'</div>',
'</div>'
].join("");
this.dom=createDOMFromString(str);
if(this.clickEvent){
if(window.attachEvent){
this.dom.attachEvent('onclick', this.clickEvent.bind(this), false)
}else{
this.dom.addEventListener('click', this.clickEvent.bind(this), false)
}
}
return this.dom;
}
Button.prototype.clickEvent=function(e){
var evTarget=e.target|| e.srcElement;
var targetId=evTarget.id || evTarget.id;
if(!evTarget.disabled || evTarget.disabled){
if(targetId=="WDR_Radio_On"){
this.setState({
WDR_Checked:true,
BLC_Checked: false,
HLC_Checked: false,
HLC_Radio_Disabled:true,
BLC_Radio_Disabled:true,
})
}else if(targetId=="WDR_Radio_Off"){
this.setState({
WDR_Checked: false,
HLC_Radio_Disabled:false,
BLC_Radio_Disabled:false,
})
}else if(targetId=="BLC_Radio_On"){
this.setState({
BLC_Checked: true,
WDR_Checked: false,
HLC_Checked: false,
HLC_Radio_Disabled:true,
WDR_Radio_Disabled:true,
})
}else if(targetId=="BLC_Radio_Off"){
this.setState({
BLC_Checked: false,
HLC_Radio_Disabled:false,
WDR_Radio_Disabled:false,
})
}else if(targetId=="HLC_Radio_On"){
this.setState({
HLC_Checked: true,
WDR_Checked:false,
BLC_Checked: false,
WDR_Radio_Disabled:true,
BLC_Radio_Disabled:true,
})
}else if(targetId=="HLC_Radio_Off"){
this.setState({
HLC_Checked: false,
WDR_Radio_Disabled:false,
BLC_Radio_Disabled:false,
})
}
}
}
function mount(wrapper,component){
component.wrapper=wrapper;
wrapper.appendChild(component.render());
}
function createDOMFromString (str) {
var tmpDiv = document.createElement('div');
tmpDiv.innerHTML = str;
return tmpDiv.firstElementChild || tmpDiv.firstChild || null;
}
/*****分割線*******/
//上面定義的組件
//下面是使用組件
var btn=new Button({
WDR_Checked:true,
HLC_Checked:false,
BLC_Checked:false,
});
mount(document.body, btn);
var button=document.getElementById("btn");
//這裏我們只需要去設置狀態即可完成視圖渲染
button.onclick=function(){
btn.setState({
WDR_Checked:true,
BLC_Checked: false,
HLC_Checked: false,
WDR_Radio_Disabled:false,
HLC_Radio_Disabled:true,
BLC_Radio_Disabled:true,
})
}
</script>
</html>