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/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");
 
    function init() {
      var elem=document.createdocumentfragment();
      document.addeventlistener("change",changehandler);
      var check=new checkbox(elem);
      check.checked=true;
      check.label="男";
      var check1=new checkbox(elem);
      check1.label="女";
      document.body.appendchild(elem);
 
    }
 
    function changehandler(e) {
      console.log(e);
    }
 
 
  </script>
</body>
</html>

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