require,js 在项目中的应用
<script src="js/require.js" data-main="js/main"></script> //main.js requirejs.config({ paths:{ jquery:'jquery-1.11.1' } }) requirejs(['jquery','backtop'],function($,backtop){ $('#backTop').backtop({ mode:'go' }) //new backtop.BackTop($('#backTop'),{ mode:'move', pos:100, speed:2000 //}) })
//backtop.js define(['jquery','scrollto'],function($,scrollto){ function BackTop(el,opts){ this.opts=$.extend({},BackTop.DEFAULTS,opts); this.$el=$(el); this.scroll=new scrollto.ScrollTo({ dest:0, speed:this.opts.speed, }) this._checkPosition(); $(window).on('scroll',$.proxy(this._checkPosition,this)); if(this.opts.mode=='move'){ this.$el.on('click',$.proxy(this._move,this)); }else{ this.$el.on('click',$.proxy(this._go,this)); } } BackTop.DEFAULTS={ mode:'move', pos:$(window).heigth(), speed:800 } BackTop.prototype._move=function(){ this.scroll.move(); } BackTop.prototype._go=function(){ this.scroll.go(); } BackTop.prototype._checkPosition=function(){ var $el=this.$el; if($(window).scrollTop()>this.opts.pos){ $el.fadeIn(); }else{ $el.fadeOut(); } } $.fn.extend({ backtop:function(opts){ return this.each(function(){ new BackTop(this,opts); }) } }) })
define(['jquery'],function($){ function ScrollTo(opts){ this.opts=$.extend({},ScrollTo.DEFAULTS,opts); this.$el=$('html,body'); } ScrollTo.DEFAULTS={ dest:0, speed:800 } ScrollTo.prototype.move=function(){ var opts=this.opts; if($(window).scrollTop()!=opts.dest){ if(!this.$el.is(':animated')){ this.$el.animate({ scrollTop:opts.dest },opts.speed); } } } ScrollTo.prototype.go=function(){ var dest=this.opts.dest; if($(window).scrollTop()!=dest){ this.$el.scrollTop(dest); } } return{ ScrollTo:ScrollTo } })