javascript - 有人愿意看一下这个自定义滚动条的 JS 代码吗?

标签 javascript jquery json jquery-ui

我绝不是一名程序员...我从未真正上过计算机科学类(class),不了解太多理论,但我仍然将通常有效的代码组合在一起。我只是不知道它实际上有多丑陋。我最近写了一段(简单的)JS 代码,想知道我能得到一些关于它的反馈...

如果这不适合发布,请告诉我。谢谢。

--将

    /*
    @author: Will Cavanagh
    @date: 2009-09-14
    * Custom scroll box
    */
    var customScroller = {
 intRegex : /^\d+$/,
 maxScroll : 0,
 inited : false,
 upColor : "#FFF",
 downColor : "#FFF", 
 defSpeed : "#FFF",

 //init function -- sets config values and initallizes jQuery slider.
 //@param options : object containing set up parameters
 //@return null
 init : function(options) {
  //if there are no options/colors specified, make empty object
  if(!options) { options = new Object(); };
  if(!options.scrollerColor) { options.scrollerColor = new Object(); };

  //assign variables, use defaults if not defined.
  var width = this.intRegex.test(options.width) ? options.width : 500
  var height = this.intRegex.test(options.height) ? options.height : 300;
  var vertical = options.vertical == null ? true : options.vertical;
  upColor = options.scrollerColor.upColor == null ? '#4a4a4a' : options.scrollerColor.upColor;
  downColor = options.scrollerColor.downColor == null ? '#333' : options.scrollerColor.downColor;
  var bkgdColor = options.scrollerColor.bkgdColor == null ? '#848484' : options.scrollerColor.bkgdColor;
  defSpeed = options.defaultSpeed == null ? '1000' : options.defaultSpeed;

  //set content width before measuring
  jQuery("#content-scroll").css({width: width});

  //get height of content, subtract height of pane to be shown in
  maxScroll = jQuery("#content-scroll").height() - height;
   //set the height of pane to hold content.  This is done after measuring content height for browser compatability reasons
  jQuery("#content-scroll").css({width: width, height: height});
  if(this.vertical) {
   var orientation = 'vertical';
  } else {
   var orientation = 'horizontal';
  }

  //create the JQuery.UI slider
  jQuery("#content-slider").slider({
   value: 100,
   orientation: 'vertical',
      animate: false,
     change: customScroller.handleSliderChange,
      slide: customScroller.handleSliderSlide,
     start: customScroller.handleSliderStart,
      stop: customScroller.handleSliderStop
     });

     jQuery(".ui-slider-handle").css({background:upColor});
     jQuery("#slider-bkg").css({background:bkgdColor});

     $("#content-scroll").mousewheel(function(objEvent, intDelta){
   scroll(intDelta * -30, 0);
  });

  inited = true;
 },

 //animates a scroll to the beginning of the content
 //@return null
 goTop : function() {
  if(!inited) { return };
  var scrollto = 0;
  jQuery("#content-scroll").animate({scrollTop: scrollto}, {queue:false, duration:defSpeed});
  jQuery("#content-slider").slider('option', 'value', 100*(1-(scrollto/maxScroll)));
 },


 //handler function bound to a slider change event.
 //@param e : event
 //@param ui : slider ui object
 //@return null
 handleSliderChange : function(e, ui) {
  if(!inited) { return };
  jQuery("#content-scroll").animate({scrollTop: ((100-ui.value) / 100) * (maxScroll) }, {queue:false, duration:defSpeed});
 },

 //handler function bound to a slider slide event.
 //@param e : event
 //@param ui : slider ui object
 //@return null
 handleSliderSlide : function(e, ui) {
  if(!inited) { return };
  jQuery("#content-scroll").attr({scrollTop: ((100-ui.value) / 100) * (maxScroll) });
 },

 //handler function bound to a slider start of slide event.
 //@return null
 handleSliderStart : function() {
  if(!inited) { return };
  jQuery(".ui-slider-handle").css({background:downColor});
 },

 //handler function bound to a slider end of slide event.
 //@return null
 handleSliderStop : function() {
  if(!inited) { return };
  jQuery(".ui-slider-handle").css({background:upColor});
 },


 //scroll by a given amount.
 //@param amt : amount to scroll by
 //@param speed : sroll animation speed, defaults to default speed defined in init params
 //@return null
 scroll : function(amt, speed) {
  if(!inited) { return };
  if(!speed) { speed = defSpeed; }
  var scrollto = jQuery("#content-scroll").scrollTop() + amt;
  if(scrollto > (maxScroll - 20)) scrollto = maxScroll; //near or past end of content, scroll to end
  if(scrollto < 20) scrollto = 0; //near or past beginning of content, scroll to beginning

  jQuery("#content-scroll").animate({scrollTop: scrollto}, {queue:false, duration:speed}); //animate content scroll
  jQuery("#content-slider").slider('option', 'value', 100*(1-(scrollto/maxScroll))); //update slider position
 }
    }

最佳答案

一些提示:

  • new Object();可以安全地替换为对象文字 - { } .
  • 语句后缺少一些引号(可能是通过 JSLint 运行的)。
  • 您有未声明的变量,例如upColordownColor 。用 var 声明它们.
  • 您只有“config”中的部分值。为什么其余的都是内联的?
  • 最好避免使用“神奇数字”,例如 20在您的示例中( scrollto < 20 )。在描述性名称下单独定义它们。
  • 一些选择器字符串 - 例如“#content-scroll” - 在整个脚本中重复;最好将它们放入配置中(同时使事情更具可扩展性和DRY)。
  • null比较在这种情况下似乎没有必要( options.scrollerColor.upColor == null )。我会下降null并利用隐式类型转换(这也会捕获空字符串!)

关于javascript - 有人愿意看一下这个自定义滚动条的 JS 代码吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1423637/

相关文章:

javascript - 这个 jquery 代码是做什么的?

json - 有人可以用 Go 解释这个接口(interface)示例吗?

javascript - 如何将访问 token 从 .NET(代码隐藏)传递到 Javascript

javascript - 用于根据用户从 JSON 数据集中选择的选项构建 Url 的 Ckeditor 对话框

javascript - 如何在屏幕任意位置单击时隐藏下拉菜单

javascript - 如何在 Twitter 嵌入式时间线刷新之前设置超时?

javascript - 在 "enter"上使输入元素在单元格中消失,但保留文本内容

javascript - 需要修复表中的左列

javascript - 使用 transformRequest 将 JSON 转换为 FormURL 编码数据

javascript - 如何修复从 json 文件导入时 undefined object 数组的变量?