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

描述：

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

效果：

实现：

Utile.js

(function () {
 Object.prototype.addProto=function (sourceObj) {
 var names=Object.getOwnPropertyNames(sourceObj);
 for(var i=0;i<names.length;i++){
  var desc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);
  if(typeof desc.value==="object" && desc.value!==null){
  var obj=new desc.value.constructor();
  obj.addProto(desc.value);//把obj当成引用对象带入递归函数继续给obj赋值
  Object.defineProperty(this,names[i],{
   enumerable:desc.enumerable,
   writable:desc.writable,
   configurable:desc.configurable,
   value:obj
  });
  continue;
  }
  Object.defineProperty(this,names[i],desc);
 }
 return this;
 };
 Function.prototype.extendClass=function (supClass) {
 function F() {}
 F.prototype=supClass.prototype;
 this.prototype=new F();
 this.prototype.constructor=this;
 this.supClass=supClass.prototype;
 if(supClass.prototype.constructor===Object.prototype.constructor){
  supClass.prototype.constructor=supClass;
 }
 }
})();
var RES=(function () {
 var list={};
 return {
 DATA_FINISH_EVENT:"data_finish_event",
 init:function (imgDataList,basePath,type) {
  if(imgDataList.length===0) return;
  if(!type) type="json";
  RES.imgDataList=imgDataList.reverse();
  RES.basePath=basePath;
  RES.type=type;
  RES.ajax(basePath+imgDataList.pop()+"."+type)
 },
 ajax:function (path) {
  var xhr=new XMLHttpRequest();
  xhr.addEventListener("load",RES.loadHandler);
  xhr.open("GET",path);
  xhr.send();
 },
 loadHandler:function (e) {
  this.removeEventListener("load",RES.loadHandler);
  var key,obj;
  if(RES.type==="json"){
  obj=JSON.parse(this.response);
  key=obj.meta.image.split(".png")[0];
  list[key]=obj.frames;
  }else if(RES.type==="xml"){
  obj=this.responseXML.children[0];
  key=obj.getAttribute("imagePath").split(".png")[0];
  list[key]=obj;
  }
 
  if(RES.imgDataList.length===0){
  var evt=new Event(RES.DATA_FINISH_EVENT);
  evt.list=list;
  document.dispatchEvent(evt);
  // Model.instance.menuData=list;
  return;
  }
  RES.ajax(RES.basePath+RES.imgDataList.pop()+"."+RES.type);
 },
 getNameJSONData:function (name) {
  var fileName=RES.basePath;
  for(var key in list){
  var arr=list[key].filter(function (t) {
   return t.filename===name;
  });
  if(arr.length>0){
   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"
  });
 }
 }
})();