侧边工具条实现 scss+requirejs（2）

使用requirejs 封装插件

• 添加一个scrollTo 的模块，完成回到顶部的按钮，但是对功能进行一些扩展，不再只是回到顶部，而是根据用户传参进行操作

对jquery，extend函数的解释说明

// 通过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 的一些操作，对于我来说，还需要好好理解。