JS面向?qū)ο笾畣芜x框?qū)崿F(xiàn)
本文實(shí)例為大家分享了JS面向?qū)ο笾畣芜x框?qū)崿F(xiàn)代碼,供大家參考,具體內(nèi)容如下
描述:
JS面向?qū)ο蟆獑芜x框的實(shí)現(xiàn)
效果:
實(shí)現(xiàn):
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當(dāng)成引用對(duì)象帶入遞歸函數(shù)繼續(xù)給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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
教你JS中的運(yùn)算符乘方、開(kāi)方及變量格式轉(zhuǎn)換
本文運(yùn)用實(shí)例教大家JS中的運(yùn)算符乘方、開(kāi)方及變量格式轉(zhuǎn)換,代碼簡(jiǎn)單明了,有需要的可以參考學(xué)習(xí)。2016-08-08Bootstrap編寫(xiě)一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話框 非彈窗
這篇文章主要介紹了Bootstrap編寫(xiě)一個(gè)在當(dāng)前網(wǎng)頁(yè)彈出可關(guān)閉的對(duì)話框,不用跳轉(zhuǎn),非彈窗,感興趣的小伙伴們可以參考一下2016-06-06JavaScript實(shí)現(xiàn)給按鈕加上雙重動(dòng)作的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)給按鈕加上雙重動(dòng)作的方法,可實(shí)現(xiàn)文本框元素值添加及頁(yè)面跳轉(zhuǎn)的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08JS不同地圖坐標(biāo)系經(jīng)緯度轉(zhuǎn)換方法(天地圖、高德地圖、百度地圖、騰訊地圖)
這篇文章主要給大家介紹了關(guān)于JS不同地圖坐標(biāo)系經(jīng)緯度轉(zhuǎn)換的相關(guān)資料,分別包括天地圖、高德地圖、百度地圖、騰訊地圖,需要的朋友可以參考下2024-07-07微信小程序?qū)崿F(xiàn)簡(jiǎn)易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下2015-07-07最全正則表達(dá)式總結(jié):驗(yàn)證QQ號(hào)、手機(jī)號(hào)、Email、中文、郵編、身份證、IP地址等
這篇文章主要介紹了最全正則表達(dá)式:驗(yàn)證QQ號(hào)、手機(jī)號(hào)、Email、中文、郵編、身份證、IP地址等,通過(guò)語(yǔ)法介紹作用表達(dá)式等詳細(xì)解釋了正則表達(dá)式的使用,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08js時(shí)間戳轉(zhuǎn)yyyy-MM-dd HH-mm-ss工具類(lèi)詳解
這篇文章主要介紹了js時(shí)間戳轉(zhuǎn)yyyy-MM-dd HH-mm-ss工具類(lèi),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04