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 "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 "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="/UploadFiles/2021-04-02/' + siteUrl + data.src + '">以上所述就是本文给大家分享的全部内容了,希望能够对大家学习javascript有所帮助。
标签:
Javascript,实例化类
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“Javascript代码实现仿实例化类”评论...