初学 require.js（一）

---

作用：

1. 实现js文件的异步加载，避免网页失去响应；
2. 管理模块之间的依赖性，便于代码的编写和维护。

require必须掌握三点：

requirejs.config : 配置别名
requirejs ： 引入其他模块
define ： 定义新的模块

具体使用

第一步：官网下载：require.js

第二步： 在html中引入文件：

<script src="js/require.js" type="text/javascript" charset="utf-8" data-main="js/main"></script> 

其中：data-main 定义了入口文件是main.js ，data-main默认不写文件后缀.js

第三步： 在该入口文件中main.js做相关配置：

• 1、引入jq文件

    //main.js
    requirejs.config({
        paths:{
            jquery: 'jquery-1.11.0.min'   //为 jquery-1.11.0.min 定义别名：jquery
        }
    });

• 2、 使用jquery

requirejs(['jquery'],function($){
        $('body').css('background-color','#02B2B5');//观察背景色是否改变
    })

• 3、 编写validate模块

  模块必须采用特定的define()函数来定义，当该模块依赖其他模块时，define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。使用return 返回定义好的函数，必须要有返回值，否则其他模块无法成功加载该模块

    define(['jquery'],function($){
        return {
            isEmpty: function(){ }, //定义函数isEmpty()，判断是否为空
            isEqual: function(str1,str2){  //定义函数isEqual()，判断密码是否一致，参数：()
                return str1 == str2;
            }
        }
    })

• 4、 加载主模块依赖的其他模块

  这里加载上面编写好的validate模块

    //main.js
    requirejs(['jquery','validate'],function($,validate){
        $('body').css('background-color','#02B2B5');
        console.log(validate); // 打印出 validate模块中定义的函数
    })

requirejs() 函数接收两个参数。第一个参数是一个数组，表示所依赖的模块， 如上例中的[‘jquery’,’validate’]，即主模块依赖这两个模块； 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。 加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。)

• 5、在main.js中使用validate模块中定义的方法

requirejs(['jquery','validate'],function($,validate){
        $('body').css('background-color','#02B2B5'); //观察背景色是否改变
        console.log(validate);
        console.log(validate.isEqual(1,2))  //--结果是false，则说明调用validate模块调用成功
    })

第一次写文章，记录自己的前端生涯。