Javascript代碼實(shí)現(xiàn)仿實(shí)例化類(lèi)
更新時(shí)間：2015年04月03日 09:11:56 投稿：hebedich
這篇文章主要介紹了Javascript代碼實(shí)現(xiàn)仿實(shí)例化類(lèi)的相關(guān)資料并附上示例，非常不錯(cuò)的文章,需要的朋友可以參考下
Javascript能做的事情越發(fā)的多了起來(lái)，隨之而來(lái)的問(wèn)題即是Js代碼量的增加，面對(duì)代碼的加多，我選擇了仿面向?qū)ο耦?lèi)實(shí)例化里的構(gòu)造函數(shù)自動(dòng)啟動(dòng)的方式，把所有的js代碼，以注冊(cè)的形式，類(lèi)化了起來(lái)。
代碼
/**
* @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>瀏覽您電腦里，從中選擇一個(gè)視頻文件。</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, '真的要?jiǎng)h除這個(gè)音頻嗎？');
},
bindDelImageBtn: function(dom) {
this.bindDelFileBtn(dom, '真的要?jiǎng)h除這個(gè)圖片嗎？');
},
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('至少需要有一個(gè)答案！');
}
var t = HHJsLib.initPopover($target, '您確定要?jiǎng)h除這個(gè)答案嗎？');
$('#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, '您確定要?jiǎng)h除這項(xiàng)嗎？');
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, '您確定要?jiǎng)h除這個(gè)結(jié)論嗎？');
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>瀏覽您電腦里，從中選擇一個(gè)音頻文件。</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', '時(shí)間軸大圖');
HHJsLib.isEmptyByDom('#cover', '時(shí)間軸封面');
HHJsLib.isEmptyByDom('#name', '標(biāo)題');
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(), '頭條內(nèi)容');
});
},
verifyTextEleInfo: function() {
$('div.item-text-box').each(function() {
HHJsLib.isEmptyByDom('#ele-text-' + $(this).attr('data-id'), '文本內(nèi)容元素');
});
},
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'), '問(wèn)題內(nèi)容');
HHJsLib.isEmptyByDom('#ele-question-extend-' + $(this).attr('data-id'), '問(wèn)題答案解釋');
HHJsLib.isEmpty(answerLen, '問(wèn)題答案');
$('#answer-box-' + $(this).attr('data-id')).find('textarea').each(function() {
HHJsLib.isEmpty($(this).val(), '問(wèn)題答案');
});
});
},
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, '總結(jié)');
$('#conclusion-box div.item-con').each(function() {
var dataId = $(this).attr('data-id');
HHJsLib.isEmptyByDom('#ele-con-hash-' + dataId, '總結(jié)圖片');
HHJsLib.isEmptyByDom('#ele-con-content-' + dataId, '總結(jié)詳情');
});
},
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">正在下載音頻文件中，請(qǐng)稍等...<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('視頻地址不合法，請(qǐng)輸入有效的在線觀看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();
}
});
以上所述就是本文給大家分享的全部?jī)?nèi)容了，希望能夠?qū)Υ蠹覍W(xué)習(xí)javascript有所幫助。
相關(guān)文章
在WEB開(kāi)發(fā)中，許多開(kāi)發(fā)者都比較喜歡使用javascript來(lái)獲取當(dāng)前url網(wǎng)址，本文就此為大家總結(jié)一下比較常用獲取URL的javascript實(shí)現(xiàn)代碼2015-06-06
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)微信小程序開(kāi)發(fā)一個(gè)簡(jiǎn)單的二維碼生成器，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
這篇文章主要給大家介紹了如何通過(guò)一篇文章讓你輕松記住js的隱式轉(zhuǎn)化的相關(guān)資料,通過(guò)在各種情況下發(fā)生的隱式類(lèi)型的例子,來(lái)詳細(xì)的了解隱式類(lèi)型轉(zhuǎn)換的過(guò)程,需要的朋友可以參考下2022-01-01
JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密,結(jié)合實(shí)例形式分析了CryptoJS進(jìn)行base64加密的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
vant uploader實(shí)現(xiàn)上傳圖片拖拽功能(設(shè)為封面)
這篇文章主要介紹了vant uploader實(shí)現(xiàn)上傳圖片拖拽功能(設(shè)為封面),這個(gè)功能在日常生活中經(jīng)常會(huì)用到，操作非常方便，今天通過(guò)實(shí)例代碼介紹實(shí)現(xiàn)過(guò)程，需要的朋友可以參考下2021-10-10
js實(shí)現(xiàn)StringBuffer的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)StringBuffer的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
javascript html5搖一搖功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript html5搖一搖功能的實(shí)現(xiàn)過(guò)程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript事件監(jiān)聽(tīng)器詳細(xì)介紹
這篇文章主要介紹了JavaScript事件監(jiān)聽(tīng)器詳細(xì)介紹,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-09-09
javascript中全局對(duì)象的isNaN()方法使用介紹
全局對(duì)象的isNaN()方法通常用于檢測(cè) parseFloat() 和 parseInt() 的結(jié)果，下面為大家介紹下其具體的使用，感興趣的朋友可以參考下2013-12-12
uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)全局懸浮按鈕的代碼
這篇文章主要介紹了uniapp開(kāi)發(fā)小程序如何實(shí)現(xiàn)全局懸浮按鈕,但是在uniapp中式?jīng)]有window對(duì)象，和dom元素的，需要獲取頁(yè)面上節(jié)點(diǎn)的幾何信息，具體實(shí)例代碼詳細(xì)跟隨小編一起看看吧2022-03-03