Javascript代碼實(shí)現(xiàn)仿實(shí)例化類
更新時(shí)間：2015年04月03日 09:11:56 投稿：hebedich
這篇文章主要介紹了Javascript代碼實(shí)現(xiàn)仿實(shí)例化類的相關(guān)資料并附上示例，非常不錯(cuò)的文章,需要的朋友可以參考下
Javascript能做的事情越發(fā)的多了起來，隨之而來的問題即是Js代碼量的增加，面對(duì)代碼的加多，我選擇了仿面向?qū)ο耦悓?shí)例化里的構(gòu)造函數(shù)自動(dòng)啟動(dòng)的方式，把所有的js代碼，以注冊(cè)的形式，類化了起來。
代碼
/**
* @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'), '問題內(nèi)容');
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, '總結(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)文章
javascript 數(shù)組排序函數(shù)sort和reverse使用介紹
reverse方法將一個(gè)Array對(duì)象中的元素位置進(jìn)行反轉(zhuǎn)，sort方法返回一個(gè)元素已經(jīng)進(jìn)行了排序的 Array 對(duì)象，下面為大家介紹下2013-11-11
使用JavaScript判斷用戶輸入的是否為正整數(shù)(兩種方法)
在項(xiàng)目開發(fā)中，需要使用JavaScript驗(yàn)證用戶輸入的是否為正整數(shù)，下面小編給大家分享兩種方法，需要的朋友參考下2017-02-02
圖片翻轉(zhuǎn)效果具體實(shí)現(xiàn)代碼
想必大家對(duì)圖片翻轉(zhuǎn)效果都有所了解吧，其實(shí)很容易實(shí)現(xiàn)的，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2014-01-01
深入學(xué)習(xí) JavaScript中的函數(shù)調(diào)用
可能很多人在學(xué)習(xí) JavaScript 過程中碰到過函數(shù)參數(shù)傳遞方式的迷惑，本著深入的精神，我給大家分享了一篇教程關(guān)于javascript中的函數(shù)調(diào)用知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2017-03-03
webpack?打包后圖片加載報(bào)錯(cuò)的解決辦法
使用webpack打包后,圖片沒有加載出來,頁面空白,報(bào)錯(cuò)圖片引用的路徑不對(duì),本文給大家介紹webpack?打包后圖片加載報(bào)錯(cuò)的解決辦法,感興趣的朋友一起看看吧2024-03-03
返回頂部組件是一種極其常見的網(wǎng)頁功能，需求簡(jiǎn)單：頁面滾動(dòng)一定距離后，顯示返回頂部的按鈕，點(diǎn)擊該按鈕可以將滾動(dòng)條滾回至頁面開始的位置,接下來通過本文給大家介紹原生JS實(shí)現(xiàn)平滑回到頂部組件，需要的朋友參考下吧2016-03-03
深入剖析JavaScript中的函數(shù)currying柯里化
下面小編就為大家?guī)硪黄钊肫饰鯦avaScript中的函數(shù)currying柯里化。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-04-04
原生JS發(fā)送異步數(shù)據(jù)請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了原生JS發(fā)送異步數(shù)據(jù)請(qǐng)求的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JavaScript如何判斷對(duì)象有某屬性,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JavaScript數(shù)組和對(duì)象的復(fù)制
本篇文章主要介紹了JavaScript數(shù)組和對(duì)象的復(fù)制的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03