JS面向对象之单选框实现

本文实例为大家分享了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"
  });
 }
 }
})();

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<list.length;i++){
  list[i].self.checked=false;
  }
  this.checked=true;
 },
 dispatchmessage:function (value) {
  if(!value)return;
  this.constructor.supclass.dispatchmessage.call(this,value);
 }
 });
 return radio;
})();

html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
 <script src="js/model.js"></script>
 <script src="js/utile.js"></script>
 <script src="js/uicomponent.js"></script>
 
</head>
<body>
 <script>
 document.addeventlistener(res.data_finish_event,init);
 res.init(["new_icon"],"img/","xml");
 var arr=["北京","上海","广州","深圳","成都"];
 
 function init() {
  document.addeventlistener("change",changehandler);
  var elem=document.createdocumentfragment();
  for(var i=0;i<arr.length;i++){
  var radio=new radio(elem);
  radio.label=arr[i];
  if(i===0){
   radio.checked=true;
  }
  }
  document.body.appendchild(elem);
 
 }
 
 function changehandler(e) {
  console.log(e);
 }
 
 
 
 model.instance.elem.addeventlistener("chi",chihandler);
 
 model.instance.elem.dispatchevent(new event("chi"));
 
 function chihandler(e) {
  console.log(e)
 }
 </script>
</body>
</html>

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