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有所帮助。