我绝不是一名程序员...我从未真正上过计算机科学类(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 运行的)。
- 您有未声明的变量,例如
upColor
和downColor
。用var
声明它们. - 您只有“config”中的部分值。为什么其余的都是内联的?
- 最好避免使用“神奇数字”,例如
20
在您的示例中(scrollto < 20
)。在描述性名称下单独定义它们。 - 一些选择器字符串 - 例如“#content-scroll” - 在整个脚本中重复;最好将它们放入配置中(同时使事情更具可扩展性和DRY)。
- 与
null
比较在这种情况下似乎没有必要(options.scrollerColor.upColor == null
)。我会下降null
并利用隐式类型转换(这也会捕获空字符串!)
关于javascript - 有人愿意看一下这个自定义滚动条的 JS 代码吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1423637/