모방 인스턴스화 class_javascript 기술을 구현하는 Javascript 코드

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 &#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();
   }
});

위 내용은 이 글에서 공유한 모든 내용입니다. 자바스크립트를 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.