较复杂js的书写格式

我感觉一个良好的结构要有两点:一是要有一个统一的入口,这样就保证了程序的可阅读性;二是要能够灵活的设置参数,这样就保证了程序的可扩展性。

下面是我在平时写代码时常用到的两种结构,先看第一种结构,示例代码如下:

var scrollElement = { timer : null, init : function( options ){ var nowOptions = this.setOptions( options ) this.runSetInterval( nowOptions ) this.hoverElement( nowOptions ) }, setOptions: function(options) { var defaultOptions = { "speed" : 1000,//动画效果的步速 "time" : 3000, //定时器时间间隔 "num" : 1,//每次滚动几个元素 "scrollContainer" : null,//要滚动元素的父级元素 "height" : ""//单个滚动元素的高度 } return $.extend( defaultOptions, options || {} ) }, runSetInterval : function( options ){ this.timer = setInterval(function(){ var scrollContainer = options.scrollContainer scrollContainer.animate({ "marginTop" : -options.height*options.num }, options.speed, function(){ for( var i =0; i < options.num; i++ ){ scrollContainer.find("li").first().appendTo( scrollContainer ) } scrollContainer.css( { "marginTop" : 0 } ) }) }, options.time) }, hoverElement : function( options ){ var me = this options.scrollContainer.on("mouseenter", "li", function(){ clearInterval( me.timer ) $(this).addClass("cur") }).on("mouseleave", "li", function(){ me.runSetInterval.call( me, options ) $(this).removeClass("cur") }) } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwgwdx.html