html js 单选框,JS面向对象之单选框实现

本文实例为大家分享了JS面向对象之单选框实现代码，供大家参考，具体内容如下

描述：

JS面向对象——单选框的实现

效果：

实现：

Utile.js

(function () {

Object.prototype.addProto=function (sourceObj) {

var names=Object.getOwnPropertyNames(sourceObj);

for(var i=0;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[i].self.checked=false;

}

this.checked=true;

},

dispatchMessage:function (value) {

if(!value)return;

this.constructor.supClass.dispatchMessage.call(this,value);

}

});

return Radio;

})();

html

Title

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

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)

}

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