JS面向对象之单选框实现

本文实例为大家分享了JS面向对象之单选框实现代码，供大家参考，具体内容如下

描述：

JS面向对象——单选框的实现

效果：

实现：

Utile.js

(function () {
 Object.prototype.addProto=function (sourceObj) {
 var names=Object.getOwnPropertyNames(sourceObj);
 for(var i=0;i0){
   fileName+=key+".png";
   break;
  }
  }
  if(arr.length===0){
  return false;
  }else{
  return {
   file:fileName,
   w:arr[0].frame.w,
   h:arr[0].frame.h,
   x:arr[0].frame.x,
   y:arr[0].frame.y
  };
  }
 },
 getNameXMLData:function (name) {
  var fileName=RES.basePath;
  for(var key in list){
  var elem=list[key].querySelector("[n="+name+"]");
  if(elem){
   fileName+=list[key].getAttribute("imagePath");
   break;
  }
  }
  if(!elem) return false;
  return {
  file:fileName,
  w:elem.getAttribute("w"),
  h:elem.getAttribute("h"),
  x:elem.getAttribute("x"),
  y:elem.getAttribute("y")
  }
 },
 getImage:function (name) {
  var obj;
  if(RES.type==="json"){
  obj=RES.getNameJSONData(name);
  }else if(RES.type==="xml"){
  obj=RES.getNameXMLData(name)
  }
  if(!obj)return;
  var div=document.createElement("div");
  Object.assign(div.style,{
  width:obj.w+"px",
  height:obj.h+"px",
  backgroundImage:"url("+obj.file+")",
  backgroundPositionX:-obj.x+"px",
  backgroundPositionY:-obj.y+"px",
  position:"absolute"
  });
  return div;
 },
 changeImg:function (elem,name) {
  var obj;
  if(RES.type==="json"){
  obj=RES.getNameJSONData(name);
  }else if(RES.type==="xml"){
  obj=RES.getNameXMLData(name)
  }
  if(!obj)return;
  Object.assign(elem.style,{
  width:obj.w+"px",
  height:obj.h+"px",
  backgroundImage:"url("+obj.file+")",
  backgroundPositionX:-obj.x+"px",
  backgroundPositionY:-obj.y+"px",
  position:"absolute"
  });
 }
 }
})();

UIComponent.js

var CheckBox=(function () {
 function CheckBox(parent) {
 this.checkView=this.init(parent);
 }
 /*
 //ES5 单例
 CheckBox.getInstance=function () {
 if(!CheckBox._instance){
  CheckBox._instance=new CheckBox();
 }
 return CheckBox._instance;
 };*/
 CheckBox.prototype.addProto({
 _label:"",
 _checked:false,
 init:function (parent) {
  if(this.checkView) return this.checkView;
  var div=document.createElement("div");
  var icon=RES.getImage("f-checkbox");
  div.appendChild(icon);
  var label=document.createElement("span");
  div.style.position=icon.style.position=label.style.position="relative";
  icon.style.float=label.style.float="left";
  label.textContent="";
  Object.assign(label.style,{
  fontSize:"16px",
  lineHeight:"20px",
  marginLeft:"5px",
  marginRight:"10px"
  });
  var h=RES.getNameXMLData("f-checkbox").h;
  icon.style.top=(20-h)/2+"px";
  div.appendChild(label);
  parent.appendChild(div);
  this.clickHandlerBind=this.clickHandler.bind(this);
  div.addEventListener("click",this.clickHandlerBind);
  return div;
 },
 clickHandler:function (e) {
  this.checked=!this.checked;
 },
 set label(value){
  this._label=value;
  this.checkView.lastElementChild.textContent=value;
 },
 get label(){
  return this._label;
 },
 set checked(value){
  if(this._checked===value)return;
  this._checked=value;
  if(value){
  RES.changeImg(this.checkView.firstElementChild,"f-checkbox-active");
  }else{
  RES.changeImg(this.checkView.firstElementChild,"f-checkbox");
  }
  this.checkView.firstElementChild.style.position="relative";
  this.dispatchMessage(value);
 },
 dispatchMessage:function (value) {
  var evt=new Event("change");
  evt.checked=value;
  evt.elem=this;
  document.dispatchEvent(evt);
 },
 get checked(){
  return this._checked;
 }
 });
 return CheckBox;
})();
 
var Radio=(function () {
 function Radio(parent,groupName) {
 this.constructor.supClass.constructor.call(this,parent);
 this.groupName=groupName;
 this.checkView.self=this;
 this.checkView.setAttribute("groupName",groupName);
 }
 
 Radio.extendClass(CheckBox);
 
 Radio.prototype.addProto({
 clickHandler:function (e) {
  // console.log(Model.instance.menuData);
  if(this.checked)return;
  var list=document.querySelectorAll("[groupName="+this.groupName+"]");
  for(var i=0;i 
 

html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。