//為jquery模塊定義別名
    requirejs.config({
        paths:{
            jquery:"jquery-3.1.0.js"
        }
    });

requirejs()方法（將寫好的模塊進行引入）
requirejs()接收兩個參數(shù)，第一個參數(shù)是一個數(shù)組，寫入要引入的模塊的名字。第二個參數(shù)是一個回調(diào)函數(shù)，需要傳遞一個參數(shù)，來代替前面所引入的模塊。如：引入jquery模塊

    requirejs(["jquery"],function($){
        //寫一段代碼驗證jquery是否被正確引入
        //將body背景顏色變?yōu)榧t色
        $("body").css("background-color","red");
    });

define()(利用它定義編寫模塊，然后在相應(yīng)的地方進行引入。)
define()接收三個參數(shù)，第一個參數(shù)是為本模塊命名的值，可以不寫，第二個參數(shù)表示需要引入的模塊，第三個參數(shù)是各依賴項成功加載后所運行的函數(shù)，傳入的參數(shù)與各個依賴項形成對應(yīng)的關(guān)系。

    define(
        moduleName,  //可選，如果此參數(shù)不寫，則默認使用本模塊所在文件的文件名
        dependencies,    //一個數(shù)組，此數(shù)組包含著此文件所需的各個依賴項目，這個數(shù)組中各項對應(yīng)的是所依賴文件相對于requirejs庫所形成的相對路徑文件名。
        function(parameters){  
            //各依賴項成功加載后所運行的函數(shù)
            //傳入的參數(shù)與dependencies數(shù)組中的各個依賴項形成對應(yīng)關(guān)系
        }
    );

現(xiàn)在先對demo中的基本功能進行實現(xiàn)：

目前的目錄結(jié)構(gòu)如下：

首先在HTML中初始化requirejs：在標簽之前:

在入口文件main.js中實現(xiàn)基本功能

    //1.首先為jquery模塊定義別名
    requirejs.config({
        paths: {
            jquery: "jquery-3.1.0"
        }
    });
        
    //2.然后用requirejs()方法引入jquery模塊實現(xiàn)demo中需求
    requirejs(["jquery"],function($){
    
        //為id值為backTop的第四個按鈕添加點擊回到頂部事件,當點擊時執(zhí)行move函數(shù)回到頂部
        $("#backTop").on("click",move);
        
        //監(jiān)聽一下windows對象的滾動事件，
        //每次滾動都執(zhí)行函數(shù)checkPosition確定一下位置,是否到達設(shè)定的臨界點，以顯示和隱藏第四個按鈕
        $(window).on("scroll",function(){
            checkPosition($(window).height());
        });
        
        //解決bug：在刷新頁面時也出現(xiàn)第四個按鈕，即頁面加載時就檢查一下滾動位置
        checkPosition($(window).height());

//------------------------------分割線------------------------------------------
        //move函數(shù)的具體實現(xiàn)，加動畫效果
        function move(){
            $("html, body").animate({
                scrollTop:0
            },800);
        }
        //go函數(shù)可以立即移動到頂部
        function go(){
            $("html, body").scrollTop(0);
        }

        //checkPosition函數(shù)的具體實現(xiàn)
        function checkPosition(pos){
            if($(window).scrollTop() > pos){
                $("#backTop").fadeIn();
            }else{
                $("#backTop").fadeOut();
            }
        }
    });

分割線以上是執(zhí)行的代碼，分割線以下是寫的被調(diào)用的函數(shù)。

上述代碼雖然實現(xiàn)了功能，但是存在以下問題：

move和go函數(shù)都是到達頂部的功能，實現(xiàn)的功能很相似，作用如果想在其它地方使用這個功能，就要再進行代碼的復(fù)制，不方便功能的復(fù)用。所以應(yīng)該將功能抽象成模塊。

實現(xiàn)功能的功能單一：兩個函數(shù)都是到達頂部，這樣即便抽象成模塊也會受到很大的限制，所以可以進一步將問題抽象成移動滾動條到指定位置。

第一步：創(chuàng)建一個新模塊，用scrollto.js表示，目前這個demo的目錄結(jié)構(gòu)如圖：

第二步：將功能抽象成模塊，寫入scrollto.js中

//1.先定義這個模塊，因為要用到j(luò)query，所以還要引入jquery
    define(["jquery"],function($){
        //定義構(gòu)造函數(shù)
        function ScrollTo(opts){
            this.opts = $.extend({},ScrollTo.DEFAULTS,opts);   //實現(xiàn)傳參覆蓋
            this.$el = $("html, body");
        }
    
        //原型添加方法
        ScrollTo.prototype.move = function (){
            var opts = this.opts;
            this.$el.animate({
                scrollTop:opts.dest
            },opts.speed);
        };
        ScrollTo.prototype.go = function(){
            this.$el.scrollTop(opts.dest);
        };
    
        //定義默認的參數(shù)
        ScrollTo.DEFAULTS = {
            dest:0,
            speed:800
        };
        
        //定義接口
        return {
            ScrollTo:ScrollTo
        };
        
    });
    

代碼詳解：

傳遞的參數(shù)為一個對象，用opts表示

用戶沒有傳遞參數(shù)時，使用默認的參數(shù)，默認參數(shù)直接寫在ScrollTo構(gòu)造函數(shù)上，相當于形成一個靜態(tài)屬性，然后通過jquery的extend()方法進行原型的擴展

實現(xiàn)用戶傳遞參數(shù)用之，不傳遞參數(shù)用默認值。jquery的extend()方法

在原型上添加move和go方法

第三步：在入口文件main.js中引入這個scrollto.js的模塊

    requirejs(["jquery","scrollto"], function($,scrollto){
    
        //為了使用scrollto模塊，需要實例化一下
        var scroll = new scrollto.ScrollTo({
            dest:0,
            speed:2000
        });
        //點擊回到頂部按鈕回到指定位置功能
        $("#backTop").on("click", $.proxy(scroll.move, scroll));
    
    });

上述代碼中有一點需要注意：

在第6行中，如果添加點擊按鈕回到指定位置事件時，這么寫：
$("#backTop").on("click", scroll.move);

此時瀏覽器控制臺會報錯：Uncaught TypeError: Cannot read property "ScrollTo" of undefined

分析原因是因為，在main.js中調(diào)用scrollto.js模塊中在ScrollTo.prototype.move原型方法move時，main.js中this指的是ScrollTo的實例，即scrollto，而在語句$("#backTop").on("click", scroll.move);中，這個this指代的是id為backTop的這個按鈕。

解決辦法：用jquery提供的方法，直接將this指向scroll對象。
$("#backTop").on("click", $.proxy(scroll.move, scroll))

第四步：一個bug
這時基本功能雖然實現(xiàn)了，點擊底部那個按鈕，傳入設(shè)定的返回位置和返回的速度，頁面可以再次返回頂部指定位置，但是目前還存在一個bug：在點擊底部按鈕回到頂部指定位置時，假如連續(xù)多次點擊這個按鈕，則頁面回到頂部后就無法再次向下滾動頁面。

bug分析：

假如執(zhí)行的函數(shù)如上面第三步中代碼，速度設(shè)置成較慢的速度2000，那么在返回頂部指定位置時可以多次點擊這個按鈕，

這樣每次點擊按鈕事件都要調(diào)用move方法執(zhí)行里面的動畫，點擊多少次，這個動畫就要執(zhí)行多少次。

因此在頁面返回頂部后，再次滾動頁面向下會立即執(zhí)行返回頂部動畫，所以在執(zhí)行完點擊次數(shù)的動畫之前，用戶都無法向下滾動。（并且非常耗性能）

解決辦法，在滾動條正在運動或者已經(jīng)到達目的地，就不應(yīng)該執(zhí)行動畫。添加判斷。
所以scrollto.js的代碼可以改成如下：

    define(["jquery"],function($){
        //定義構(gòu)造函數(shù)
        function ScrollTo(opts){
            this.opts = $.extend({},ScrollTo.DEFAULTS,opts);   //實現(xiàn)傳參覆蓋
            this.$el = $("html, body");
        }
    
        //原型添加方法
        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);
            }
        };
    
        //定義默認的參數(shù)
        ScrollTo.DEFAULTS = {
            dest:0,
            speed:800
        };
        
        //定義接口
        return {
            ScrollTo:ScrollTo
        };
              
    });
    

我們把返回的功能函數(shù)move和go都抽象在了scrollto.js模塊中，現(xiàn)在還可以直接把整個返回頂部的功能（包括滾動一定距離后隱藏的按鈕出現(xiàn)，和點擊按鈕之后回到頂部指定位置）
然后在入口文件中只需要引入這個模塊（取名叫backtop.js），這個back.js需要依賴上面定義的scrollto.js模塊。

所以目前的項目目錄如下圖：

第一步：現(xiàn)在來寫backtop.js模塊

    define(["jquery", "scrollto"], function($, scrollto){
        //執(zhí)行函數(shù)部分
        function BackTop(el, opts){
            this.opts = $.extend({}, BackTop.DEFAULTS, opts);
            this.$el = $(el);   //el是節(jié)點
            this.scroll = new scrollto.ScrollTo({
                dest: 0,
                speed: this.opts.speed     
            });
            
            this._checkPosition();   //加載時就檢查位置，解決bug
            
            if(this.opts.mode == "move"){  //是move才執(zhí)行move函數(shù)，其他執(zhí)行g(shù)o
                this.$el.on("click", $.proxy(this._move, this));
            }else{
                this.$el.on("click", $.proxy(this._go, this));
            }
            
            $(window).on("scroll", $.proxy(this._checkPOsition, this));
 
        }
    
        //定義默認屬性部分
        BackTop.DEFAULTS = {
            mode: "move",
            pos: $(window).height(),
            speed: 800
        };
    
    
        //定義功能函數(shù)部分
        BackTop.prototype._move = function(){
            this.scroll.move();
        };
    
        BackTop.prototype._go = function(){
            this.scroll.go();
        };
    
        BackTop.prototype._checkPosition = function(){
            if($(window).scrollTop() > this.opts.pos){
                this.$el.fadeIn();
            }else{
                this.$el.fadeOut();
            }
        };
    
        //暴露模塊接口，返回整個對象
        return{
            BackTop: BackTop
        };
    
    
    });

第二步：scrollto.js保持不變

第三步：寫main.js入口文件

    //定義別名
    requirejs.config({
        paths: {
            jquery: "jquery-3.1.0"
        }
    });
    
    //調(diào)用backtop.js模塊
    requirejs(["jquery", "backtop"], function($, backtop){
        //實例化BackTop
        new backtop.BackTop($("#backtop"),{
            mode: "move",
            pos:100,
            speed: 2000
        });

    });
    

這個demo中的模塊化是這樣一種思想：

首先把功能函數(shù)放在一個模塊中（move和go）

把整個實現(xiàn)功能也抽象成一個模塊，依賴上一個功能函數(shù)模塊

最后只需要在入口文件中實例化一下這個最外層的模塊，即可完成一系列功能的調(diào)用。

每個模塊都用面向?qū)ο蟮乃枷?，定義模塊并且暴露接口

默認值的用法可以讓調(diào)用者拿起就用，可以不用考慮傳參數(shù)。