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 相关文章推荐
js螺旋动画效果的具体实例
Nov 15 Javascript
jquery操作select方法汇总
Feb 05 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
jquery延迟对象解析
Oct 26 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
VsCode与Node.js知识点详解
Sep 05 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
vue实现匀速轮播效果
2020/06/29 Javascript
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python中的类与类型示例详解
2019/07/10 Python
python匿名函数用法实例分析
2019/08/03 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
小学教师年度个人总结
2015/02/05 职场文书
小学运动会入场词
2015/07/18 职场文书
话题作文之成长
2019/12/09 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
基于Python实现nc批量转tif格式
2022/08/14 Python