为返回顶部按钮完善全部功能,深度定制
- 在封装一个backtop.js模块,并且引用scrollTo模块,完成返回顶部按钮的隐藏消失以及返回功能
// 未返回顶部按钮深度定制一个模块,包括显示隐藏和回到顶部功能
define(['jquery','scrollTo'],function($,scrollTo){
// 需要传入执行的按钮对象,以及参数
function BackTop(el,opts){
this.opts = $.extend({},BackTop.DEFAULTS,opts);
console.log($(el));
// 把传入的对象el赋值给this.$el
this.$el = $(el);
var opts = this.opts;
this.scroll = new scrollTo.ScrollTo({
destination:opts.destination,
speed:opts.speed
});
this._checkPosition();
// _ 的意思是这个方法是内部调用,不是外部接口
// 这里就是调用的时候this._move在scrollTo中指的是实例化的对象,现在就变成了按钮,所以要改变this
this.$el.on('click',$.proxy(this._move,this));
$(window).on('scroll',$.proxy(this._checkPosition,this));
}
// 添加方法
BackTop.prototype._checkPosition = function(){
var $el = this.$el;
if($(window).scrollTop() > this.opts.pos){
$el.show();
}else{
$el.hide();
}
}
BackTop.prototype._move = function(){
// 调用scroll模块里的move()方法
this.scroll.move();
}
// 添加默认值
BackTop.DEFAULTS = {
pos : $(window).height(),
destination:0,
speed: 500
}
return {
BackTop:BackTop
}
});
- main.js现在只需要实例化BackTop构造函数就可以了
// 通过config给一些引用设置别名
requirejs.config({
//注意paths写法,我已经栽了两次跟头了
paths:{
jquery:'jquery-2.1.1.min'
}
});
// 引入模块,并通过一个变量表示引入模块,惯例用$
// 引入scrollTo模块
requirejs(['jquery','BackTop'],function($,BackTop){
var backtop = new BackTop.BackTop($('#backTop'),{
pos : 500,
destination:0,
speed: 2000
});
});
- scrollTo.js代码不变,但是改为在BackTop模块中引用
// 通过define定义模块,抽取功能
define(['jquery'],function($){
//创建一个构造函数,传递一个对象,并添加默认值
function ScrollTo(opts){
// 通过jq的extend方法实现,用户传递的参数覆盖默认参数,生成一个新的对象,并返回这个对象
//这个extend实质是合并opts和DEFAULTS的参数,如果有重复的则用后者覆盖前者
this.opts = $.extend({},ScrollTo.DEFAULTS,opts);
console.log(this.$el);
//目前有点不是很懂这个
this.$el = $('html,body');
}
//为构造函数添加方法,通过原型,这样可以节约内存
ScrollTo.prototype.move = function(){
var opts = this.opts,
destination = opts.destination;
console.log(this.$el);
// 这里需要注意的是如果不添加判断当前运动是否停止的条件控制,如果一直不停点击返回顶部,就会一直执行动画
// 判断现在不在目的地也不再运动状态才执行运动命令
if($(window).scrollTop != destination && !this.$el.is(':animated')){
//如果按照以下方式写this.$el,那么this会绑定到按钮backTop上,所以需要用到jq中的$.proxy-main.js
this.$el.animate({
scrollTop:destination
},opts.speed);
}
};
// 添加默认值一般会在函数内创建新的变量,但是当每次创建这个对象时,就会造成空间的浪费,
// 所以可以直接在ScrollTo构造函数上添加默认属性。
ScrollTo.DEFAULTS = {
//滚动到的位置
destination:0,
// 运动速度
speed:500
};
//通过return一个对象,属性为ScrollTo,属性值为ScrollTo,达到与外部通信的目的
return {
ScrollTo:ScrollTo
};
});
总结:这里这个侧边栏组件功能已经完成,难点在于,构造函数的实例化的层层嵌套对于我这个小菜鸟比较难受,以及this的各种变化,由于他用的是jq这个库,对于比较本质的一些理解可能会出现问题,所以还需要多读书啊,这个组件都这么复杂,TOT