JS面向对象之单选框实现

本文实例为大家分享了JS面向对象之单选框实现代码，供大家参考，具体内容如下描述：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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。