Javascript代码实现仿实例化类
前端之家收集整理的这篇文章主要介绍了
Javascript代码实现仿实例化类，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Javascript能做的事情越发的多了起来，随之而来的问题即是Js代码量的增加，面对代码的加多，我选择了仿面向对像类实例化里的构造函数自动启动的方式，把所有的js代码，以注册的形式，类化了起来。
代码
* @description HHJsLib Framework Apps
* @copyright Copyright (c) 2011-2012 http://www.xjiujiu.com.All right reserved
*/
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-Box ul li a');
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) {
var self = this;
$(dom).click(function() {
var $this = $(this);
var t = HHJsLib.modal.confirm(
'上传本地视频','<div class="text-center">'
- '
浏览您电脑里，从中选择一个视频文件。
'
- ' <div class="btn-Box btn btn-blue">'
- ' <div id="upload-btn">从电脑上传
'
' '
' '
);
var uploader = HJZUploader.createVideo(
'#upload-btn',{
formData: {model: 'timeline'},},function(response) {
if(false == response.rs) {
self.setDemo
BoxInit($this);
return HHJsLib.warn(response.message);
}
self.setDemoAu
dioInfo($this,response.data);
$('#dialog-
Box-' + t).modal('hide');
}
);
uploader.on('uploadProgress',function(file) {
self.setDemo
BoxLoading($this);
});
return uploader;
});
},bindDelAudioBtn: function(dom) {
this.bindDelFileBtn(dom,'真的要删除这个音频吗？');
},bindDelImageBtn: function(dom) {
this.bindDelFileBtn(dom,'真的要删除这个图片吗？');
},bindDelFileBtn: function(dom,msg) {
var self = this;
$(dom).click(function() {
var $target = $(this);
var t = 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) {
return HHJsLib.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) {
var self = this;
$(dom).click(function() {
var id = $(this).attr('data-id');
var answerHtml = eleTplMap.answerTpl.replace(/{id}/g,id);
$('#answer-Box-' + id).append(answerHtml);
self.bindDelAnswerBtn('#answer-Box-' + id + ' a.btn-del-answer');
});
},bindDelAnswerBtn: function(dom) {
var self = this;
$(dom).click(function() {
var $target = $(this);
if(2 > $target.parent().parent().find('textarea.answer-editor').length) {
return HHJsLib.warn('至少需要有一个答案！');
}
var t = HHJsLib.initPopover($target,'您确定要删除这个答案吗？');
$('#btn-sure-' + t).click(function() {
$target.parent().remove();
});
});
},bindAppendNewElement: function(dom) {
var self = this;
$(dom).unbind('click').click(function() {
var type = $(this).attr('data-type');
var heading = $(this).parent().parent().attr('data-heading-id');
if('heading' == type) {
self.addNewElePartBox();
$("#new-item-Box-" + heading).hide();
return;
}
self.addNewEleToPartBox(heading,type);
});
},addNewElePartBox: function() {
var t = this.getTimestamp();
var partBoxHtml = eleTplMap.partBox.replace(/{t}/g,t);
var headingHtml = this.initItemTplByType('heading',t,t);
var itemHtml = this.initItemTplByType('text',t);
var itemBoxHtml = this.initItemBoxTpl(itemHtml,'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) {
var total = $('#ele-part-Box-' + heading + ' div.item-ele-Box').length;
var side = total % 2 === 0 ? 'left' : 'right';
var t = this.getTimestamp();
var itemHtml = this.initItemTplByType(type,heading);
var itemBoxHtml = this.initItemBoxTpl(itemHtml,heading,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) {
var self = 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,heading) {
var itemHtml = eleTplMap[type].replace(/{t}/g,t);
itemHtml = itemHtml.replace(/{sort_num}/g,this.getNewEleSortNum(heading));
return itemHtml.replace(/{headingId}/g,heading);
},initItemBoxTpl: function(content,type) {
var itemBoxHtml = 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 += '<div class="clearfix" id="clearfix-' + heading + '">
';
return item<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Html.replace(/{type}/g,type);
},movePlusBtnBox: function(heading) {
//删除原有
$('#new-item-Box-' + heading).remove();
//加入新
var plusBtnHtml = 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-box li a");
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();
var id = $(this).attr('data-heading-id');
$('#new-item-box-' + id + ' div.new-item-box').removeClass('hide').attr('data-show','1').show();
event.preventDefault();
});
},initPlusBtn: function() {
var self = this;
$('div.ele-part-box').each(function() {
var dataId = $(this).attr('data-heading');
self.movePlusBtnBox(dataId);
});
},bindDelItemBtn: function(dom) {
var self = this;
$(dom).click(function() {
var $target = $(this);
var t = HHJsLib.initPopover($target,'您确定要删除这项吗？');
var id = $target.attr('data-id');
var heading = $('#item-' + id).attr('data-heading-id');
$('#btn-sure-' + t).click(function() {
if(1 == $target.attr('data-new')) {
$.get(
queryUrl + 'timelineele/adel',function(response) {
if(false === response.rs) {
return HHJsLib.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) {
var rank = 1;
$('#ele-part-box-' + heading).find('div.item-ele-box').each(function() {
if(rank % 2 === 0) {
$(this).removeClass('pull-left item-left')
.addClass('pull-right item-right');
} else {
$(this).removeClass('pull-right item-right')
.addClass('pull-left item-left');
}
rank ++;
});
},bindNewConBtn: function() {
var self = this;
$('#btn-new-con-item').click(function() {
var t = self.getTimestamp();
var conItemHtml = eleTplMap.conItemTpl.replace(/{t}/g,t);
$('#conclusion-box').append(conItemHtml);
self.bindDelConBtn('#btn-del-con-' + t);
self.bindUploadModal('a.btn-upload');
});
},bindDelConBtn: function(dom) {
var self = this;
$(dom).click(function() {
var $target = $(this);
var t = HHJsLib.initPopover($target,'您确定要删除这个结论吗？');
var id = $target.attr('data-id');
$('#btn-sure-' + t).click(function() {
if(1 == $target.attr('data-new')) {
$.get(
queryUrl + 'timelineele/adel',function(response) {
if(false === response.rs) {
return HHJsLib.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) {
return parseInt(this.getMaxSortNum(heading)) + 1;
},getMaxSortNum: function(heading) {
var sortNums = [];
$('.ele-sort-' + heading).each(function() {
sortNums.push($(this).val());
});
sortNums = sortNums.sort(function(a,b) {
if (a === b) {
return 0;
}
if (typeof a === typeof b) {
return a > b ? -1 : 1;
}
return typeof a > typeof b ? -1 : 1;
});
return sortNums[0] == null ? 0 : sortNums[0];
},bindUploadEleImageBtn: function() {
this.bindUploadModal('a.btn-upload');
},bindUploadEleAudioBtn: function(dom) {
var self = this;
$(dom).click(function() {
var $this = $(this);
var t = HHJsLib.modal.confirm(
'上传音频','<div class="text-center">'
- '
浏览您电脑里，从中选择一个音频文件。
'
- ' <div class="btn-Box btn btn-blue">'
- ' <div id="upload-btn">从电脑上传
