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 ? '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 ? -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">'
        + ' <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();
   }
});

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

(0)

相关推荐

  • javascript类继承机制的原理分析

    目前 javascript的实现继承方式并不是通过"extend"关键字来实现的,而是通过 constructor function和prototype属性来实现继承.首先我们创建一个animal 类 js 代码 复制代码 代码如下: var animal = function (){ //这就是constructor function 了 this .name = 'pipi'; this .age = 10; this .height = 0; } //建立一个动物的实例 var

  • javascript中使用new与不使用实例化对象的区别

    我们先来看个实例 function Me(name,age,job){ this.name = name; this.age = age; this.job = job; } 请问这以下两种实例化对象方式有什么区别呢? var mefun1 = new Me('fei','20','it'); var mefun2 = Me('fei','20','it'); 简单的说 第一种是构造函数式,即通过new运算符调用构造函数Function来创建函数 第二种不是实例化,只是调用函数把返回值赋给变量.

  • Javascript无参数和有参数类继承问题解决方法

    说到Javascript的类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷. 无参数类继承的问题 先看一段示例代码,实现B继承于A: 复制代码 代码如下: function A() { } A.prototype.a1 = function() { }; function B() { } B.prototype = new A(); B.prototype.b1 = function() { }; var b = new B(); alert(b.constructor == A

  • 再论Javascript的类继承

    无参数类继承的问题 先看一段示例代码,实现B继承于A: 复制代码 代码如下: function A() { } A.prototype.a1 = function() { }; function B() { } B.prototype = new A(); B.prototype.b1 = function() { }; var b = new B(); alert(b.constructor == A); // true alert(b.constructor == B); // false

  • JavaScript类继承及实例化的方法

    本文实例讲述了JavaScript类继承及实例化的方法.分享给大家供大家参考.具体如下: (function(){ var Class = { //扩展类 create: function(aBaseClass, aClassDefine){ var $class = function(){ for(var member in aClassDefine){ this[member] = aClassDefine[member]; } if('undefined'===typeof aClassD

  • JavaScript中的类继承

    JavaScript Inheritance DouglasCrockfordwww.crockford.com And you think you're so clever and classless and free--John Lennon JavaScript一种没有类的,面向对象的语言,它使用原型继承来代替类继承.这个可能对受过传统的面向对象语言(如C++和Java)训练的程序员来说有点迷惑.JavaScript的原型继承比类继承有更强大的表现力,现在就让我们来看看. Java Jav

  • javascript一个无懈可击的实例化XMLHttpRequest的方法

    复制代码 代码如下: function getHTTPRequest() { var xhr = false; if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); //IE除外的浏览器 else if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxm12.XMLHTTP");//最新版的ActiveX对象 } catch(e) { try { xhr = n

  • 浅谈javascript构造函数与实例化对象

    前言--讲在前面 我想有很多以前很少接触后台编程语言的初学者朋友跟我一样,对javascript里面一系列的"名词"搞的一头雾水.好像大概知道讲的是什么,但其实理解的还是不清楚:我想,学习任何一种知识,首当其冲应该把最基本的名词解释搞清楚(知道它讲的到底是什么,有助于我们更好的理解它.)即知其然知其所以然,这样对以后的进阶学习是很有帮助的.下面的简单讲一下我自己对这样一些看似不重要但又不得不清楚的知识点的理解.(若有出入,欢迎指正) 1.什么是构造函数 构造函数 ,是一种特殊的方法.主

  • Javascript代码实现仿实例化类

    Javascript能做的事情越发的多了起来,随之而来的问题即是Js代码量的增加,面对代码的加多,我选择了仿面向对像类实例化里的构造函数自动启动的方式,把所有的js代码,以注册的形式,类化了起来. 代码 /** * @version $Id$ * @author xjiujiu <xjiujiu@foxmail.com> * @description HHJsLib Framework Apps * @copyright Copyright (c) 2011-2012 http://www.x

  • 5个书写JavaScript代码的坏习惯,看看你中枪了没?

    Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态.如此被广泛使用.如此根植于我们的生活中的另外一种语言.它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型.其实,你和Javascript都站错了立场,而现在,你让Javascript很生气.这里有五个原因能说明你的Javascript技术很烂. 1. 你没有使用命名空间. 是否还记得在大学里老师告诉你不要在家庭作业里使用全局变量?Javascript里的

  • 深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点

    具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以帮助你写出更好的,更易于理解和维护的代码,这些代码在几个月或是几年之后再回过头看看也是会觉得很自豪的. 书写可维护的代码(Writing Maintainable Code ) 软件bug的修复是昂贵的,并且

  • 编写高质量JavaScript代码的基本要点

    才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

  • iOS中使用JSPatch框架使Objective-C与JavaScript代码交互

    JSPatch是GitHub上一个开源的框架,其可以通过Objective-C的run-time机制动态的使用JavaScript调用与替换项目中的Objective-C属性与方法.其框架小巧,代码简洁,并且通过系统的JavaScriptCore框架与Objective-C进行交互,这使其在安全性和审核风险上都有很强的优势.Git源码地址:https://github.com/bang590/JSPatch. 一.从一个官方的小demo看起 通过cocoapods将JSPath集成进一个Xcod

  • 把JavaScript代码改成ES6语法不完全指南(分享)

    目录 * 核心例子 * 修改成静态变量(const)或块级变量(let) * 开始修改 * 疑问解释(重复定义会发生什么) * 疑问解释(let的块级作用域是怎样的) * 疑问解释(const定义的变量在基础数据类型和引用类型中的差异) * 修改成Promise的形式 * 预备知识(回调函数是什么) * 预备知识(如何把回调函数改为Promise) * 开始修改 * 修改成箭头函数(Arrow Function) * 预备知识(箭头函数是什么) * 预备知识(箭头函数函数中的this是个坑) *

  • 优化 JavaScript 代码的方法小结

    优化 JavaScript 代码 作者: Gregory Baker, GMail 软件工程师 和 Erik Arvidsson, Google Chrome 软件工程师 需要的经验: JavaScript 相关工作知识 客户端脚本能让你的应用更加地动态和活跃, 但是浏览器对代码的解析可能造成效率问题, 而这种性能差异在客户端之间也不尽相同. 这里我们讨论和给出一些优化你的 JavaScript 代码的提示和最佳实践. 使用字符串 字符串连接操作会对 Internet Explorer 6 和

  • JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

    本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果.分享给大家供大家参考.具体如下: 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单,并非使用了Mootools,但效果却和使用了Mootools差不多,动画效果平滑,操作舒服,给菜单增色不少. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下: <!DOCTYPE html

  • javascript代码规范小结

    1. Javascript代码应符合Douban-JSLint检验标准 1-1. 语句必须都有分号结尾,除了for, function, if, switch, try, while 1-2. 只有长语句可以考虑断行,如: TEMPL_SONGLIST.replace('{TABLE}', da['results']) .replace('{PREV_NUM}', prev) .replace('{NEXT_NUM}', next) .replace('{CURRENT_NUM}', curre

  • JavaScript+CSS实现仿天猫侧边网页菜单效果

    本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果.分享给大家供大家参考.具体如下: 这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网.天猫购物.京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-st

随机推荐