require.js模块化开发

一、引入require.js

第一步，我们要先去官网将require.js文件下载到我们的电脑上，下载之后将它拖拽放在我们的项目的js文件目录下；
第二步，加载我们放进来的require.js文件

<script src="js/require.js" async="true" defer data-main="js/xxx"></script>
/*
代码中涉及到的参数：
asyns="true",defer:是为了兼容不同的浏览器异步加载js文件；
data-min:指定的是页面的入口文件地址，这个文件名值自定义的，要注意的是文件名是不用加.js后缀的，因为require.js会第一个加载入口文件而且require.js文件的默认后缀名是.js
*/

第三步，当我们执行完第二步，就要判断入口文件是否有效，因为后期的.js代码都是通过这个入口文件来引入的

这个时候再打开控制台，能看到控制台输出“加载完成”的字样，说明入口文件的配置有效了；
第四步：接下来就是要引入模块
首先，我们要引入的js文件可能路径会比较复杂，所以在一开始我们可以通过require.config来管理页面上所使用的所有模块；
(这是文件结构)

（接下来我们要让入口文件xxx.js来声明index.js引用的路径）

引用完了之后我们就要开始使用index文件里面的方法，假设index.js文件里面的代码是这样的：

//遵从AMD规范
define(function(){
    function init(){
        var oBtn=document.getElementById("btn1");
        var oDiv1=document.getElementById("div1");
        var oDiv2=document.getElementById("div2");
        var oDiv3=document.getElementById("div3");
        oBtn.onclick=function(){
            oDiv1.style.display="block";
        }
    }
    function init1(){
        var oDiv1=document.getElementById("div1");
        oDiv1.onclick=function(){
            alert("hello world");
        }
    }

    //将接口暴露出去
    return {
        init:init,
        init1:init1
    }

})

这样我们在入口文件xxx.js加载这个的模块的代码就是：

//使用模块，AMD规范
require(["index"],function(index){
    index.init();
    index.init1(); 
})
/*
require函数的第一个参数是数组，传入的是所依赖的模块，像本例中我们要使用的是index.js文件，所以就要在这里面传入index.js文件名（不带后缀）；
后面跟的是一个回调函数，本例中回调函数传入了一个形参，这个形参是要去接收index文件所暴露出来的接口的，就是init和init1这两个函数；
形参index接收完这两个函数之后就可以对函数进行调用，调用的格式跟对象调用自己的方法是一样的，
*/
至此，函数的模块的加载和调用就完成了。