使用requirejs 封装插件
- 添加一个scrollTo 的模块,完成回到顶部的按钮,但是对功能进行一些扩展,不再只是回到顶部,而是根据用户传参进行操作
// 通过define定义模块,抽取功能
define(['jquery'],function($){
//创建一个构造函数,传递一个对象,并添加默认值
function ScrollTo(opts){
// 通过jq的extend方法实现,用户传递的参数覆盖默认参数,生成一个新的对象,并返回这个对象
//这个extend实质是合并opts和DEFAULTS的参数,如果有重复的则用后者覆盖前者
this.opts = $.extend({},ScrollTo.DEFAULTS,opts);
//目前有点不是很懂这个
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
};
});
- 在main.js中使用scrollTo模块
// 通过config给一些引用设置别名
requirejs.config({
//注意paths写法,我已经栽了两次跟头了
paths:{
jquery:'jquery-2.1.1.min'
}
});
// 引入模块,并通过一个变量表示引入模块,惯例用$
// 引入scrollTo模块
requirejs(['jquery','scrollTo'],function($,scrollTo){
// 实例化模块,function中的scrollTo相当于模块中返回的拥有srollTo属性的对象
var scroll = new scrollTo.ScrollTo({
//不传入参数则使用默认值
// destination:500,
// speed:500
});
//移动函数,可以通过设置移动时间来改变交互效果
//$.proxy改变this指向到实例对象scroll
//不改变实例对象时$('#backTop').on('click',scroll.move)这样调用,scrollTo中的this会指向这个按钮,而在没有调用时,scrollTo中的this是指向当前对象的;
$('#backTop').on('click',$.proxy(scroll.move,scroll));
});
总结:使用了面向对象传参的方式,涉及到原型以及更改this 的一些操作,对于我来说,还需要好好理解。