Javascript boleh melakukan lebih banyak perkara, dan masalah yang datang dengannya ialah peningkatan jumlah kod JS Menghadapi peningkatan dalam kod, saya memilih untuk meniru pembina automatik dalam instansi kelas berorientasikan objek kaedah permulaan mengklasifikasikan semua kod js dalam bentuk pendaftaran.
Kod
/**
* @version $Id$
* @author xjiujiu <xjiujiu@foxmail.com>
* @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">'
+ ' <p>浏览您电脑里，从中选择一个视频文件。</p>'
+ ' <div class="btn-box btn btn-blue">'
+ ' <div id="upload-btn">从电脑上传</div>'
+ ' </div>'
+ ' </div>'
);
var uploader = HJZUploader.createVideo(
'#upload-btn',
{
formData: {model: 'timeline'},
},
function(response) {
if(false == response.rs) {
self.setDemoBoxInit($this);
return HHJsLib.warn(response.message);
}
self.setDemoAudioInfo($this, response.data);
$('#dialog-box-' + t).modal('hide');
}
);
uploader.on('uploadProgress', function(file) {
self.setDemoBoxLoading($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, t);
var itemBoxHtml = 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) {
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, t, heading);
var itemBoxHtml = 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) {
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, t, 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, heading, t, side, 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 + '"></div>';
return itemBoxHtml.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',
{id: $target.attr('data-id')},
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',
{id: $target.attr('data-id')},
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">'
+ ' <p>浏览您电脑里，从中选择一个音频文件。</p>'
+ ' <div class="btn-box btn btn-blue">'
+ ' <div id="upload-btn">从电脑上传</div>'
+ ' </div>'
+ ' </div>'
);
var uploader = HJZUploader.createAudio(
'#upload-btn',
{
formData: {model: 'timeline'},
},
function(response) {
if(false == response.rs) {
self.setDemoBoxInit($this);
return HHJsLib.warn(response.message);
}
self.setDemoAudioInfo($this, response.data);
$('#dialog-box-' + t).modal('hide');
}
);
uploader.on('uploadProgress', function(file) {
self.setDemoBoxLoading($this);
});
return uploader;
});
},
setDemoAudioInfo: function($target, data) {
var audioHtml = '<audio controls="controls"><source src="' + 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) {
var self = this;
$(dom).unbind('click').click(function() {
var $this = $(this);
var t = HHJsLib.modal.confirm(
'上传图片',
'<div class="text-center">'
+ ' <p>浏览您电脑里的图片，从中选择一张。</p>'
+ '<div class="btn-box btn btn-blue">'
+ ' <div id="upload-btn">从电脑上传</div>'
+ ' </div>'
+ ' </div>'
);
var uploader = HJZUploader.createImage(
'#upload-btn',
{
formData: {model: 'timeline'}
},
function(response) {
if(false == response.rs) {
self.setDemoBoxInit($this);
return HHJsLib.warn(response.message);
}
var imgHtml = '<img src="'
+ 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');
return uploader;
});
},
bindPreviewBtn: function() {
var self = this;
$('#edit-btn, #preview-btn').click(function() {
try{
self.verifyBaseInfo();
self.verifyEleInfo();
self.verifyConclusionInfo();
$('#timeline-form').submit();
}catch(e) {
return HHJsLib.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() {
var length = $('#conclusion-box div.item-con').length;
HHJsLib.isEmpty(length, '总结');
$('#conclusion-box div.item-con').each(function() {
var dataId = $(this).attr('data-id');
HHJsLib.isEmptyByDom('#ele-con-hash-' + dataId, '总结图片');
HHJsLib.isEmptyByDom('#ele-con-content-' + dataId, '总结详情');
});
},
bindDownloadEleAudioBtn: function() {
var self = this;
$('a.download-audio-btn').click(function() {
var $this = $(this);
try{
HHJsLib.isEmptyByDom("#item-audio-upload-hash-" + $this.attr('data-id'), '下载地址');
var url = $("#item-audio-upload-hash-" + $this.attr('data-id')).val();
if('mp3' != url.substring(url.lastIndexOf('.') + 1).toLowerCase()) {
return HHJsLib.warn('格式不支持，必须是Mp3格式！');
}
var t = HHJsLib.modal.info(
'下载音频',
'<p class="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);
return HHJsLib.warn(response.message);
}
$('#dialog-box-' + t).modal('hide');
self.setDemoAudioInfo($this, response.data);
}
);
} catch(e) {
return HHJsLib.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() {
var url = $(this).val();
if(url != '') {
if('swf' != url.substring(url.lastIndexOf('.') +1 ).toLowerCase()) {
return HHJsLib.warn('视频地址不合法，请输入有效的在线观看Flash地址！');
}
var previewHtml = '<embed src="' + 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 (new Date()).getTime();
}
});Di atas adalah semua kandungan yang dikongsi dengan anda dalam artikel ini saya harap ia akan membantu semua orang dalam mempelajari javascript.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
