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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
vue element table 表格请求后台排序的方法
Sep 28 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
js函数和this用法实例分析
2020/03/13 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Python 学习笔记
2008/12/27 Python
python 中文乱码问题深入分析
2011/03/13 Python
Python实现大文件排序的方法
2015/07/10 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
一行python实现树形结构的方法
2019/08/09 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
如何做好总经理助理
2013/11/12 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
安全教育演讲稿
2014/05/09 职场文书
路政管理求职信
2014/06/18 职场文书
大学生见习报告总结
2014/11/04 职场文书
运动会表扬稿范文
2015/05/05 职场文书
创业计划书之甜品店
2019/09/18 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Docker部署Mysql8的实现步骤
2022/07/07 Servers