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 相关文章推荐
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
canvas实现图像放大镜
Feb 06 Javascript
Js apply方法详解
Feb 16 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 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
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
vue组件发布到npm简单步骤
2017/11/30 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
应用心理学个人求职信范文
2013/12/11 职场文书
五年级数学教学反思
2014/02/11 职场文书
《满井游记》教学反思
2014/02/26 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
Golang中channel的原理解读(推荐)
2021/10/16 Golang