铁雪资源网 Design By www.gsvan.com

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,实例化类

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“Javascript代码实现仿实例化类”

暂无Javascript代码实现仿实例化类的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?