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

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

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

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

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

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

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

首先在HTML中初始化requirejs：在標(biāo)簽之前:

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

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

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

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

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

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

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

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

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

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

//1.先定義這個(gè)模塊，因?yàn)橐玫絡(luò)query，所以還要引入jquery
    define(["jquery"],function($){
        //定義構(gòu)造函數(shù)
        function ScrollTo(opts){
            this.opts = $.extend({},ScrollTo.DEFAULTS,opts);   //實(shí)現(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);
        };
    
        //定義默認(rèn)的參數(shù)
        ScrollTo.DEFAULTS = {
            dest:0,
            speed:800
        };
        
        //定義接口
        return {
            ScrollTo:ScrollTo
        };
        
    });
    

代碼詳解：

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

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

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

在原型上添加move和go方法

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

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

上述代碼中有一點(diǎn)需要注意：

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

此時(shí)瀏覽器控制臺(tái)會(huì)報(bào)錯(cuò)：Uncaught TypeError: Cannot read property "ScrollTo" of undefined

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

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

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

bug分析：

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

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

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

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

    define(["jquery"],function($){
        //定義構(gòu)造函數(shù)
        function ScrollTo(opts){
            this.opts = $.extend({},ScrollTo.DEFAULTS,opts);   //實(shí)現(xiàn)傳參覆蓋
            this.$el = $("html, body");
        }
    
        //原型添加方法
        ScrollTo.prototype.move = function (){
            var opts = this.opts;
            if ($(window).scrollTop() != opts.dest){  //判斷是否到達(dá)指定位置
                if(!this.$el.is(":animated")){    //判斷是否在運(yùn)動(dòng)
                    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);
            }
        };
    
        //定義默認(rèn)的參數(shù)
        ScrollTo.DEFAULTS = {
            dest:0,
            speed:800
        };
        
        //定義接口
        return {
            ScrollTo:ScrollTo
        };
              
    });
    

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

所以目前的項(xiàng)目目錄如下圖：

第一步：現(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é)點(diǎn)
            this.scroll = new scrollto.ScrollTo({
                dest: 0,
                speed: this.opts.speed     
            });
            
            this._checkPosition();   //加載時(shí)就檢查位置，解決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));
 
        }
    
        //定義默認(rèn)屬性部分
        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();
            }
        };
    
        //暴露模塊接口，返回整個(gè)對(duì)象
        return{
            BackTop: BackTop
        };
    
    
    });

第二步：scrollto.js保持不變

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

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

    });
    

這個(gè)demo中的模塊化是這樣一種思想：

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

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

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

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

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