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和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
js浏览器html5表单验证
Oct 17 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
php获取域名的google收录示例
2014/03/24 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
详解python的argpare和click模块小结
2019/03/31 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
为什么说python更适合树莓派编程
2020/07/20 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
送货司机岗位职责
2013/12/11 职场文书
环保专项行动方案
2014/05/12 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
入党自荐书范文
2015/03/05 职场文书
员工试用期工作总结
2019/06/20 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
python turtle绘图命令及案例
2021/11/23 Python
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP
Hive导入csv文件示例
2022/06/25 数据库