Javascript代码实现仿实例化类
Javascript能做的事情越发的多了起来，随之而来的问题即是Js代码量的增加，面对代码的加多，我选择了仿面向对像类实例化里的构造函数自动启动的方式，把所有的js代码，以注册的形式，类化了起来。
代码
/**
* @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();
}
});
以上所述就是本文给大家分享的全部内容了，希望能够对大家学习javascript有所帮助。
本文地址：https://www.stayed.cn/item/11950
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)