更多模块化的知识，请参考前端视频专题《前端为什么需要模块化》

第一步，下载RequireJS

下载过程略......

第二步，编写模块

//-----moduleA.js

define([],function(){
   //通过return输出模块A
    return {
        f1(){ ... }，
        f2(){ ... }
    }
})

//-----moduelB.js
//模块B引用了模块A

define(["moduleA"],function(ma){
    //参数ma就是模块A,可以直接使用
   return ...; //根据需要输出B模块
})

//-----moduleC.js
//模块C引用了模块B，和模块jquery
define(["moduleB","jquery"],function(mb, $){
    //参数mb对应模块B
    //参数$对应模块jquery
   //数组中声明的模块会被自动注入到参数中，编写时没有先后顺序
    return ...; //根据需要输出模块C
})

第三步，编写配置文件

requirejs({
    baseUrl : "http://localhost:8000/myproject/",
    paths : {
        "vali" : "scripts/jquery.validate",
        "jquery" : "scripts/jquery-2.0.3",
        "swiper" : "scripts/swiper",
        "moduleA" : "mymodules/inputauto",
      "jq.cookie" : "scripts/jquery.cookie", //不符合AMD规范的JS
        "bootstrap" : "scripts/bootstrap" //不符合AMD规范的JS
    },
    shim : { //对于不符合AMD规范的模块，需要使用shim配置
        "jq.cookie" : {
            deps : ["jquery"] //使用deps声明该模块依赖jquery
        },
        "bootstrap" : {
            deps : ["jquery"]
        }
    }
})

重要说明：

AMD规范要求

一个标准模块必须使用define函数来定义

就像上面的例子那样。

对于不符合AMD规范的代码，无法被视为一个标准的模块

这会带来一个问题，那就是它无法使用标准的方式来引入它需要的其它模块，例如jquery等

于是才有了shim配置

它可以有效地解决非规范模块的依赖问题

例如 jquery.cookie.js 文件

$.extend({
    addCookie: function(){
        console.log("add cookie");
    },
    getCookie: function() {
        console.log("get cookie");
    },
    removeCookie : function(){
        console.log("remove cookie");
    }
})

由于这个文件不符合AMD规范的写法

这个文件实际上依赖了jquery

但requireJS无法管理它的依赖

如果不使用shim进行配置，将会出现找不到$的错误

第四步，编写业务文件，使用这些模块

//-----home.js

//加载配置文件，使其生效，注意配置文件的路径要根据实际情况编写
require(["./conf/config.js"],function(){
    //加载所有你需要的模块，模块名称需要跟配置文件中一致
    //数组中声明的依赖模块会被自动加载，并注入到对应的参数中
    require(["jquery","swiper","moduleA","jquery.cookie"], function($,Swiper,ma){
        //$对应jquery模块，Swiper对应swiper模块，ma对应moduleA模块
        //由于jquery.cookie模块本身没有输出内容
        //只是对jquery的扩展，因此不需要写参数来接收

        //编写正常的业务代码
    })
})

第五步，页面引入JS文件

到此为止，基本就可以使用了

不过在实战当中，这显然是不够完美的

因为我们的CSS还没有被模块化

第六步，下载样式处理文件css.js

该文件非官方提供，需要自行百度

或私聊我，发你

第七步，改造配置文件

requirejs({
    baseUrl : "http://localhost:8000/myproject/",
    paths : {
        "vali" : "scripts/jquery.validate",
        "jquery" : "scripts/jquery-2.0.3",
        "swiper" : "scripts/swiper",
        "moduleA" : "mymodules/inputauto",
        "jq.cookie" : "scripts/jquery.cookie",
        "bootstrap" : "scripts/bootstrap",
        "css" : "scripts/css" //处理CSS样式的模块
    },
    shim : {
        "jq.cookie" : {
            deps : ["jquery"]
        },
        "swiper" : {
            //css文件也可以被当成模块，直接声明依赖，自动加载
            deps : ["css!styles/swiper.css"]
        },
        "bootstrap" : {
            deps : [
                "jquery",
                //css文件也可以被当成模块，直接声明依赖，自动加载
                "css!styles/bootstrap.css"
            ]
        }
    }
})

通过css.js的处理，一个JS模块，可以自动依赖对应的样式文件

加载模块时，将更加的省力、省心

require(["swiper"],function(Swiper){
    //除了swiper对应的js文件外
    //由于之前做了shim配置，并声明了css依赖
    //swiper.js和swiper.css将会被作为一个整体一起加载
    //真正做到了模块化的思维方式
})

第八步，完。