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

为返回顶部按钮完善全部功能，深度定制

• 在封装一个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