Javascript代码实现仿实例化类

前端之家收集整理的这篇文章主要介绍了Javascript代码实现仿实例化类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Javascript能做的事情越发的多了起来,随之而来的问题即是Js代码量的增加,面对代码的加多,我选择了仿面向对像类实例化里的构造函数自动启动的方式,把所有的js代码,以注册的形式,类化了起来。

代码

* @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">'

  • '

    浏览您电脑里,从中选择一个视频文件

    '
  • ' <div class="btn-Box btn btn-blue">'
  • ' <div id="upload-btn">从电脑上传
'
  • '
  • '
  • '
  • '
    );
    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);
    var itemBoxHtml = this.initItemBoxTpl(itemHtml,'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,heading);
    var itemBoxHtml = this.initItemBoxTpl(itemHtml,heading,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,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,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 + '">

    ';

    return item<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>Html.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',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',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">'

    • '

      浏览您电脑里,从中选择一个音频文件

      '
    • ' <div class="btn-Box btn btn-blue">'
    • ' <div id="upload-btn">从电脑上传
    '
  • '
  • '
  • '
  • '
    );
    var uploader = HJZUploader.createAudio(
    '#upload-btn',setDemoAudioInfo: function($target,data) {
    var audioHtml = '<audio controls="controls">';
    $($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">'
  • '

    浏览您电脑里的图片,从中选择一张。

    '
  • '<div class="btn-Box btn btn-blue">'
  • ' <div id="upload-btn">从电脑上传
  • '
  • ' '
  • ' '
    );
    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="'
  •   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">正在下载音频文件中,请稍等...

    '
    );
    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">';
    $($(this).attr('data-demo-Box')).html(previewHtml);
    }
    });
    },bindDelEleBtnFormEdit: function() {
    this.bindDelUploadImgBtn();
    },getTimestamp: function() {
    return (new Date()).getTime();
    }
    });

    以上所述就是本文给大家分享的全部内容了,希望能够对大家学习javascript有所帮助。

    原文链接:https://www.f2er.com/js/54962.html
    实例化类

    猜你在找的JavaScript相关文章