require.js 学习基础

RequireJS 是一个JavaScript模块加载器，他的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。

先看下面示例：

　　大家都知道js阻塞浏览器渲染，就是在加载页面内容时，遇到JS，在加载JS时，会停止对页面的加载，等JS加载完了，才会继续对页面进行加载，这样就会导致页面加载时间过长，使用RequireJS，就可以解决这个问题

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/require.js" data-main='js/main.js' type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="">
            fdfdfdfdfd
        </div>
    </body>
</html>

a.js:

alert('111');

main.js:

require.config({
    paths:{
        a:'a'
    }
});
require(['a']);

在执行alert的时候页面内容已经加载出来了

require.js 可以防止js加载阻塞页面渲染

基本API

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短

define 从名字就可以看出这个api是用来定义一个模块
require 加载依赖模块，并执行加载完后的回调函数

大家可以看见页面顶层<script>标签含有一个特殊的属性data-main，这里就是入口JS，require.js使用它来启动脚本加载过程

main.js

require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
    paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
        'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
        'base':'g-ZFbase'
    }
});
require(['jquery'], function() {
    //这样jquery 不是全局的，你要使用的时候通过require调用，如下
   $('div').click(function(){
           alert($(this).html());
   });
});
require(['jquery','base'], function($,base) {
    //在比如我自己封装了一个g-ZFbase.js，要用里面的ajax，ajax在ajax()方法里,但是他依赖于jquery,
    //可以2个一起调用
   ajax();
});

define: 定义一个模块，然后再页面中使用：

　　例如：在a.js里定义一个define

a.js:

define(['jquery','base'],function($,base){
    //如上，我要用g-ZFbase.js里的ajax()方法，他依赖于jquery，所以2个一起调用
    ajax();
});

在main.js里：

require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
    paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
        'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
        'base':'g-ZFbase',
        a:'a'
    }
});
//require(['jquery','base'], function($,base) {
//    //在比如我自己封装了一个g-ZFbase.js，要用里面的ajax,但是他依赖于jquery,
//    //可以2可一起调用
// ajax();
//});

require(['a']);

就相当于原来在main.js里写的内容单独写到一个JS文件里把他看成一个模块，然后调用，这里把他放在了a.js里面了

一个JS文件里只能放一个define，一个define只能有一个返回值/对象

调用define 中的方法：

　main.js:

require.config({//配置模块加载位置-也就是要加载JS的路劲，不用后缀.js
    paths:{//通过paths的配置会使我们的模块名字更精炼，paths还有一个重要的功能，就是可以配置多个路径，如果远程cdn库没有加载成功，可以加载本地的库，如：
        'jquery':["http://libs.baidu.com/jquery/2.0.3/jquery","jquery-1.7.min"],
        'base':'g-ZFbase',
        a:'a'
    }
});
require(['a'],function(obj){//obj-接收返回值,名字可不和返回值同名
    obj.t1();
});

a.js:

define(function(){
    function test(){
        alert('test');
    }
    function t(){
        alert('t');
    }
    var obj = {
        t1:test,
        t2:t
    }
    return obj;
})

只有一个调用函数，可直接返回函数名 return t;