Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Javascript code to implement imitation instantiation class_javascript skills

Javascript code to implement imitation instantiation class_javascript skills

WBOY
Release： 2016-05-16 16:06:05
Original
1296 people have browsed it

Javascript can do more and more things, and the problem that comes with it is the increase in the amount of JS code. Faced with the increase in code, I chose to imitate the automatic constructor in object-oriented class instantiation. The startup method classifies all js codes in the form of registration.

Code

/**
 * @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 &#63; '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 &#63; -1 : 1;
      }
      return typeof a > typeof b &#63; -1 : 1;
    });
 
    return sortNums[0] == null &#63; 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();
   }
});
Copy after login

The above is all the content shared with you in this article. I hope it will be helpful to everyone in learning javascript.

Related labels：
javascript
source：php.cn
Previous article：Javascript implements background color that changes at any time_javascript skills Next article：Usage example analysis of call and apply in javascript_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template