JS面向对象之多选框实现


Posted in Javascript onJanuary 17, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
浅谈js闭包理解
Apr 01 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 #Javascript
JS面向对象之单选框实现
Jan 17 #Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 #Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 #Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 #Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 #Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
You might like
php 分页类 扩展代码
2009/06/11 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python实现的knn算法示例
2018/06/14 Python
python设置环境变量的原因和方法
2019/06/24 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python箱型图处理离群点的例子
2019/12/09 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
校园活动策划书范文
2014/01/10 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2014年民警工作总结
2014/11/25 职场文书
小学感恩节活动总结
2015/03/24 职场文书
销售人员管理制度
2015/08/06 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书