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/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>

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

Javascript 相关文章推荐
javascript call方法使用说明
Jan 11 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
jquery自适应布局的简单实例
May 28 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
AngularJS表单验证功能
Oct 19 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 #Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 #Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 #Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 #Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
JS实现transform实现扇子效果
Jan 17 #Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP学习 运算符与运算符优先级
2008/06/15 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
2014年政协工作总结
2014/12/09 职场文书
公司表扬稿范文
2015/05/05 职场文书
雷锋的故事观后感
2015/06/10 职场文书
春节随笔
2015/08/15 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
详解 TypeScript 枚举类型
2021/11/02 Javascript
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
python中urllib包的网络请求教程
2022/04/19 Python
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技