Javascript代码实现仿实例化类
Javascript能做的事情越发的多了起来,随之而来的问题即是Js代码量的增加,面对代码的加多,我选择了仿面向对像类实例化里的构造函数自动启动的方式,把所有的js代码,以注册的形式,类化了起来。
代码
/** *@version$Id$ *@authorxjiujiu<xjiujiu@foxmail.com> *@descriptionHHJsLibFrameworkApps *@copyrightCopyright(c)2011-2012http://www.xjiujiu.com.Allrightreserved */ HHJsLib.register({ init:function(){ this.bindPreviewBtn(); this.bindUploadEleImageBtn(); this.bindUploadEleAudioBtn('a.audio-upload-btn'); this.bindUploadEleVideoBtn('a.video-upload-btn'); this.bindDownloadEleAudioBtn(); this.bindNewConBtn(); this.bindDelConBtn('a.btn-del-con'); this.bindDelItemBtn('a.btn-del-item'); this.bindNewItemBoxClose('div.item-box'); this.bindPlusBtn('a.btn-plus'); this.bindAppendNewElement('div.new-item-boxullia'); this.bindSetPreviewVideo(); this.bindAddAnswerBtn('a.btn-add-answer'); this.bindDelAnswerBtn('a.btn-del-answer'); this.bindDelImageBtn('a.btn-del-image'); this.bindDelAudioBtn('a.btn-del-audio'); this.initPlusBtn(); }, bindUploadEleVideoBtn:function(dom){ varself=this; $(dom).click(function(){ var$this=$(this); vart=HHJsLib.modal.confirm( '上传本地视频', '<divclass="text-center">' +'<p>浏览您电脑里,从中选择一个视频文件。</p>' +'<divclass="btn-boxbtnbtn-blue">' +'<divid="upload-btn">从电脑上传</div>' +'</div>' +'</div>' ); varuploader=HJZUploader.createVideo( '#upload-btn', { formData:{model:'timeline'}, }, function(response){ if(false==response.rs){ self.setDemoBoxInit($this); returnHHJsLib.warn(response.message); } self.setDemoAudioInfo($this,response.data); $('#dialog-box-'+t).modal('hide'); } ); uploader.on('uploadProgress',function(file){ self.setDemoBoxLoading($this); }); returnuploader; }); }, bindDelAudioBtn:function(dom){ this.bindDelFileBtn(dom,'真的要删除这个音频吗?'); }, bindDelImageBtn:function(dom){ this.bindDelFileBtn(dom,'真的要删除这个图片吗?'); }, bindDelFileBtn:function(dom,msg){ varself=this; $(dom).click(function(){ var$target=$(this); vart=HHJsLib.initPopover($(this),msg); $('#btn-sure-'+t).click(function(){ if(1!=$target.attr('data-new')){ $.get( queryUrl+'timelineele/adel', {id:$target.attr('data-id')}, function(response){ if(false===response.rs){ returnHHJsLib.warn(response.message); } self.delDemoFieldInfo($target); $target.popover('destroy'); } ); return; } self.delDemoFieldInfo($target); $target.popover('destroy'); }); }); }, delDemoFieldInfo:function($target){ $($target.attr('data-demo-box')).html(''); $($target.attr('data-box')).removeClass('uploaded').addClass('no-file'); $($target.attr('data-field')).attr('data-id','').attr('data-src',''); }, bindAddAnswerBtn:function(dom){ varself=this; $(dom).click(function(){ varid=$(this).attr('data-id'); varanswerHtml=eleTplMap.answerTpl.replace(/{id}/g,id); $('#answer-box-'+id).append(answerHtml); self.bindDelAnswerBtn('#answer-box-'+id+'a.btn-del-answer'); }); }, bindDelAnswerBtn:function(dom){ varself=this; $(dom).click(function(){ var$target=$(this); if(2>$target.parent().parent().find('textarea.answer-editor').length){ returnHHJsLib.warn('至少需要有一个答案!'); } vart=HHJsLib.initPopover($target,'您确定要删除这个答案吗?'); $('#btn-sure-'+t).click(function(){ $target.parent().remove(); }); }); }, bindAppendNewElement:function(dom){ varself=this; $(dom).unbind('click').click(function(){ vartype=$(this).attr('data-type'); varheading=$(this).parent().parent().attr('data-heading-id'); if('heading'==type){ self.addNewElePartBox(); $("#new-item-box-"+heading).hide(); return; } self.addNewEleToPartBox(heading,type); }); }, addNewElePartBox:function(){ vart=this.getTimestamp(); varpartBoxHtml=eleTplMap.partBox.replace(/{t}/g,t); varheadingHtml=this.initItemTplByType('heading',t,t); varitemHtml=this.initItemTplByType('text',t,t); varitemBoxHtml=this.initItemBoxTpl(itemHtml,t,t,'left','text'); partBoxHtml=partBoxHtml.replace(/{heading}/g,headingHtml); partBoxHtml=partBoxHtml.replace(/{item}/g,itemBoxHtml); $("#main-box").append(partBoxHtml); this.bindDelItemBtn('#item-'+t+'a.btn-del-item'); this.movePlusBtnBox(t); }, addNewEleToPartBox:function(heading,type){ vartotal=$('#ele-part-box-'+heading+'div.item-ele-box').length; varside=total%2===0?'left':'right'; vart=this.getTimestamp(); varitemHtml=this.initItemTplByType(type,t,heading); varitemBoxHtml=this.initItemBoxTpl(itemHtml,heading,t,side,type); //清掉原有高度DIV $('#clearfix-'+heading).remove(); $('#ele-part-box-'+heading).find('div.eles-box').append(itemBoxHtml); //绑定Dom事件 this.bindDelItemBtn('#item-'+t+'a.btn-del-item'); this.movePlusBtnBox(heading); this.bindNewEleUpload(type); }, bindNewEleUpload:function(type){ varself=this; switch(type){ case'image': case'question': case'know': self.bindUploadModal('a.btn-upload'); break; case'audio': self.bindUploadEleAudioBtn('a.audio-upload-btn'); self.bindDelAudioBtn('a.btn-del-audio'); break; } }, initItemTplByType:function(type,t,heading){ varitemHtml=eleTplMap[type].replace(/{t}/g,t); itemHtml=itemHtml.replace(/{sort_num}/g,this.getNewEleSortNum(heading)); returnitemHtml.replace(/{headingId}/g,heading); }, initItemBoxTpl:function(content,heading,t,side,type){ varitemBoxHtml=eleTplMap.itemBox.replace(/{t}/g,t); itemBoxHtml=itemBoxHtml.replace(/{headingId}/g,heading); itemBoxHtml=itemBoxHtml.replace(/{side}/g,side); itemBoxHtml=itemBoxHtml.replace(/{content}/g,content); itemBoxHtml=itemBoxHtml.replace(/{hash}/g,hex_md5(t)); itemBoxHtml+='<divclass="clearfix"id="clearfix-'+heading+'"></div>'; returnitemBoxHtml.replace(/{type}/g,type); }, movePlusBtnBox:function(heading){ //删除原有 $('#new-item-box-'+heading).remove(); //加入新 varplusBtnHtml=eleTplMap.plusBtn.replace(/{headingId}/g,heading); $(plusBtnHtml).insertBefore('#clearfix-'+heading); var$items=$('#ele-part-box-'+heading).find('div.item-ele-box'); if($items.length<2){ $($items[0]).find('a.btn-del-item').hide(); }else{ $($items[0]).find('a.btn-del-item').show(); } //绑定事件 this.bindAppendNewElement('#new-item-box-'+heading+"ul.new-item-list-boxlia"); this.bindPlusBtn('#btn-plus-'+heading); }, bindNewItemBoxClose:function(dom){ $(dom).click(function(){ $('div.new-item-box').hide(); }); }, bindPlusBtn:function(dom){ $(dom).click(function(event){ $('div.new-item-box').hide(); varid=$(this).attr('data-heading-id'); $('#new-item-box-'+id+'div.new-item-box').removeClass('hide').attr('data-show','1').show(); event.preventDefault(); }); }, initPlusBtn:function(){ varself=this; $('div.ele-part-box').each(function(){ vardataId=$(this).attr('data-heading'); self.movePlusBtnBox(dataId); }); }, bindDelItemBtn:function(dom){ varself=this; $(dom).click(function(){ var$target=$(this); vart=HHJsLib.initPopover($target,'您确定要删除这项吗?'); varid=$target.attr('data-id'); varheading=$('#item-'+id).attr('data-heading-id'); $('#btn-sure-'+t).click(function(){ if(1==$target.attr('data-new')){ $.get( queryUrl+'timelineele/adel', {id:$target.attr('data-id')}, function(response){ if(false===response.rs){ returnHHJsLib.warn(response.message); } $('#item-'+id).fadeOut('fast',function(){ $(this).remove(); self.movePlusBtnBox(heading); self.reArrangeItem(heading); }); $target.popover('destroy'); } ); return; } $target.popover('destroy'); $('#item-'+id).fadeOut('fast',function(){ $(this).remove(); self.movePlusBtnBox(heading); self.reArrangeItem(heading); }); }); }); }, reArrangeItem:function(heading){ varrank=1; $('#ele-part-box-'+heading).find('div.item-ele-box').each(function(){ if(rank%2===0){ $(this).removeClass('pull-leftitem-left') .addClass('pull-rightitem-right'); }else{ $(this).removeClass('pull-rightitem-right') .addClass('pull-leftitem-left'); } rank++; }); }, bindNewConBtn:function(){ varself=this; $('#btn-new-con-item').click(function(){ vart=self.getTimestamp(); varconItemHtml=eleTplMap.conItemTpl.replace(/{t}/g,t); $('#conclusion-box').append(conItemHtml); self.bindDelConBtn('#btn-del-con-'+t); self.bindUploadModal('a.btn-upload'); }); }, bindDelConBtn:function(dom){ varself=this; $(dom).click(function(){ var$target=$(this); vart=HHJsLib.initPopover($target,'您确定要删除这个结论吗?'); varid=$target.attr('data-id'); $('#btn-sure-'+t).click(function(){ if(1==$target.attr('data-new')){ $.get( queryUrl+'timelineele/adel', {id:$target.attr('data-id')}, function(response){ if(false===response.rs){ returnHHJsLib.warn(response.message); } $('#item-con-'+id).fadeOut('fast',function(){ $(this).remove(); }); $target.popover('destroy'); } ); return; } $target.popover('destroy'); $('#item-con-'+id).fadeOut('fast',function(){ $(this).remove(); }); }); }); }, getNewEleSortNum:function(heading){ returnparseInt(this.getMaxSortNum(heading))+1; }, getMaxSortNum:function(heading){ varsortNums=[]; $('.ele-sort-'+heading).each(function(){ sortNums.push($(this).val()); }); sortNums=sortNums.sort(function(a,b){ if(a===b){ return0; } if(typeofa===typeofb){ returna>b?-1:1; } returntypeofa>typeofb?-1:1; }); returnsortNums[0]==null?0:sortNums[0]; }, bindUploadEleImageBtn:function(){ this.bindUploadModal('a.btn-upload'); }, bindUploadEleAudioBtn:function(dom){ varself=this; $(dom).click(function(){ var$this=$(this); vart=HHJsLib.modal.confirm( '上传音频', '<divclass="text-center">' +'<p>浏览您电脑里,从中选择一个音频文件。</p>' +'<divclass="btn-boxbtnbtn-blue">' +'<divid="upload-btn">从电脑上传</div>' +'</div>' +'</div>' ); varuploader=HJZUploader.createAudio( '#upload-btn', { formData:{model:'timeline'}, }, function(response){ if(false==response.rs){ self.setDemoBoxInit($this); returnHHJsLib.warn(response.message); } self.setDemoAudioInfo($this,response.data); $('#dialog-box-'+t).modal('hide'); } ); uploader.on('uploadProgress',function(file){ self.setDemoBoxLoading($this); }); returnuploader; }); }, setDemoAudioInfo:function($target,data){ varaudioHtml='<audiocontrols="controls"><sourcesrc="'+siteUrl+data.src+'"/></audio>'; $($target.attr('data-demo-box')).html(audioHtml).show(); $($target.attr('data-field')).attr('data-id',data.id).attr('data-src',data.src); }, bindUploadModal:function(dom){ varself=this; $(dom).unbind('click').click(function(){ var$this=$(this); vart=HHJsLib.modal.confirm( '上传图片', '<divclass="text-center">' +'<p>浏览您电脑里的图片,从中选择一张。</p>' +'<divclass="btn-boxbtnbtn-blue">' +'<divid="upload-btn">从电脑上传</div>' +'</div>' +'</div>' ); varuploader=HJZUploader.createImage( '#upload-btn', { formData:{model:'timeline'} }, function(response){ if(false==response.rs){ self.setDemoBoxInit($this); returnHHJsLib.warn(response.message); } varimgHtml='<imgsrc="' +siteUrl+response.data.src +'"alt="'+response.data.name+'"/>'; $($this.attr('data-demo-box')).html(imgHtml).show(); $($this.attr('data-field')).val(response.data.id).attr('data-src',response.data.src); $('#dialog-box-'+t).modal('hide'); } ); uploader.on('uploadProgress',function(file){ self.setDemoBoxLoading($this); }); self.bindDelImageBtn('a.btn-del-image'); returnuploader; }); }, bindPreviewBtn:function(){ varself=this; $('#edit-btn,#preview-btn').click(function(){ try{ self.verifyBaseInfo(); self.verifyEleInfo(); self.verifyConclusionInfo(); $('#timeline-form').submit(); }catch(e){ returnHHJsLib.warn(e); } }); }, verifyBaseInfo:function(){ HHJsLib.isEmptyByDom('#image-path','时间轴大图'); HHJsLib.isEmptyByDom('#cover','时间轴封面'); HHJsLib.isEmptyByDom('#name','标题'); HHJsLib.isEmptyByDom('#description','描述'); }, verifyEleInfo:function(){ this.verifyHeaderEleInfo(); this.verifyTextEleInfo(); this.verifyImageEleInfo(); this.verifyVideoEleInfo(); this.verifyAudioEleInfo(); this.verifyQuestionEleInfo(); this.verifyKnowEleInfo(); }, verifyHeaderEleInfo:function(){ $('div.item-heading-box').each(function(){ HHJsLib.isEmpty($(this).find('textarea').val(),'头条内容'); }); }, verifyTextEleInfo:function(){ $('div.item-text-box').each(function(){ HHJsLib.isEmptyByDom('#ele-text-'+$(this).attr('data-id'),'文本内容元素'); }); }, verifyImageEleInfo:function(){ $('div.item-image-box').each(function(){ HHJsLib.isEmptyByDom('#ele-image-hash-'+$(this).attr('data-id'),'图片地址'); HHJsLib.isEmptyByDom('#ele-image-content-'+$(this).attr('data-id'),'图片介绍'); }); }, verifyVideoEleInfo:function(){ $('div.item-video-box').each(function(){ HHJsLib.isEmptyByDom('#ele-video-hash-'+$(this).attr('data-id'),'视频地址'); HHJsLib.isEmptyByDom('#ele-video-content-'+$(this).attr('data-id'),'视频介绍'); }); }, verifyAudioEleInfo:function(){ $('div.item-audio-box').each(function(){ HHJsLib.isEmptyByDom('#ele-audio-hash-'+$(this).attr('data-id'),'音频地址'); HHJsLib.isEmptyByDom('#ele-audio-content-'+$(this).attr('data-id'),'音频介绍'); }); }, verifyQuestionEleInfo:function(){ $('div.item-question-box').each(function(){ HHJsLib.isEmptyByDom('#ele-question-content-'+$(this).attr('data-id'),'问题内容'); HHJsLib.isEmptyByDom('#ele-question-extend-'+$(this).attr('data-id'),'问题答案解释'); HHJsLib.isEmpty(answerLen,'问题答案'); $('#answer-box-'+$(this).attr('data-id')).find('textarea').each(function(){ HHJsLib.isEmpty($(this).val(),'问题答案'); }); }); }, verifyKnowEleInfo:function(){ $('div.item-know-box').each(function(){ HHJsLib.isEmptyByDom('#ele-know-hash-'+$(this).attr('data-id'),'知道图片地址'); HHJsLib.isEmptyByDom('#ele-know-content-'+$(this).attr('data-id'),'知道介绍'); }); }, verifyConclusionInfo:function(){ varlength=$('#conclusion-boxdiv.item-con').length; HHJsLib.isEmpty(length,'总结'); $('#conclusion-boxdiv.item-con').each(function(){ vardataId=$(this).attr('data-id'); HHJsLib.isEmptyByDom('#ele-con-hash-'+dataId,'总结图片'); HHJsLib.isEmptyByDom('#ele-con-content-'+dataId,'总结详情'); }); }, bindDownloadEleAudioBtn:function(){ varself=this; $('a.download-audio-btn').click(function(){ var$this=$(this); try{ HHJsLib.isEmptyByDom("#item-audio-upload-hash-"+$this.attr('data-id'),'下载地址'); varurl=$("#item-audio-upload-hash-"+$this.attr('data-id')).val(); if('mp3'!=url.substring(url.lastIndexOf('.')+1).toLowerCase()){ returnHHJsLib.warn('格式不支持,必须是Mp3格式!'); } vart=HHJsLib.modal.info( '下载音频', '<pclass="text-center">正在下载音频文件中,请稍等...<p>' ); self.setDemoBoxLoading($this); $.getJSON( siteUrl+'index.php/public/resource/adownload', {url:encodeURIComponent(url)}, function(response){ if(false==response.rs){ self.setDemoBoxInit($this); returnHHJsLib.warn(response.message); } $('#dialog-box-'+t).modal('hide'); self.setDemoAudioInfo($this,response.data); } ); }catch(e){ returnHHJsLib.warn(e); } }); }, setDemoBoxLoading:function($target){ $($target.attr('data-box')).removeClass('no-file').addClass('uploaded'); $($target.attr('data-file-box')).html(''); }, setDemoBoxInit:function($target){ $($target.attr('data-box')).removeClass('uploaded').addClass('no-file'); $($target.attr('data-file-box')).html(''); }, bindSetPreviewVideo:function(){ $('input.ele-video').change(function(){ varurl=$(this).val(); if(url!=''){ if('swf'!=url.substring(url.lastIndexOf('.')+1).toLowerCase()){ returnHHJsLib.warn('视频地址不合法,请输入有效的在线观看Flash地址!'); } varpreviewHtml='<embedsrc="'+url+'"quality="high"width="495"height="220"align="middle"allowScriptAccess="always"allowFullScreen="true"mode="transparent"type="application/x-shockwave-flash"></embed>'; $($(this).attr('data-demo-box')).html(previewHtml); } }); }, bindDelEleBtnFormEdit:function(){ this.bindDelUploadImgBtn(); }, getTimestamp:function(){ return(newDate()).getTime(); } });
以上所述就是本文给大家分享的全部内容了,希望能够对大家学习javascript有所帮助。