What is RequireJs

RequireJs is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

IE 6+ ………. compatible ✔Wha
Firefox 2+ ….. compatible ✔
Safari 3.2+ …. compatible ✔
Chrome 3+ …… compatible ✔
Opera 10+ …… compatible ✔

Get started then check out the API.

引入RequireJs 有哪些好处

  • 防止js加载阻塞页面渲染

    • 什么是js加载阻塞?

    • index.html:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <!DOCTYPE html>
      <html>
      <head>
      <script type="text/javascript" src="a.js"></script>
      </head>
      <body>
      <span>body</span>
      </body>
      </html>
    • a.js:

      1
      2
      3
      4
      5
      function fun1(){
      alert("it works");
      }

      fun1();
    • 当运行上面两种例子时不知道你是否注意到,alert执行的时候,HTML内容是一片空白的,即body并未被显示,当点击确定后,才出现,这就是JS阻塞浏览器渲染导致的结果。

  • 使用程序调用的方式加载js,防出现如下丑陋的场景

  • <script type="text/javascript" src="a.js"></script>
    <script type="text/javascript" src="b.js"></script>
    <script type="text/javascript" src="c.js"></script>
    <script type="text/javascript" src="d.js"></script>
    <script type="text/javascript" src="e.js"></script>
    <script type="text/javascript" src="f.js"></script>
    <script type="text/javascript" src="g.js"></script>
    <script type="text/javascript" src="h.js"></script>
    <script type="text/javascript" src="i.js"></script>
    <script type="text/javascript" src="j.js"></script>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101


    ## 基础用法

    ### 基本API

    > require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短
    >
    > - define 从名字就可以看出这个api是用来定义一个模块
    > - require 加载依赖模块,并执行加载完后的回调函数

    ### 案例

    - HTML页面加载**'jquery', 'bootstrap', 'backend', 'table', 'echarts', 'echarts-theme', 'template'**
    - 这些**JS模块**之后再返回JS对象执行特定的函数

    ```javascript
    define(['jquery', 'bootstrap', 'backend', 'table', 'echarts', 'echarts-theme', 'template'],
    function($, undefined, Backend, Table, Echarts, undefined, Template) {
    var Controller = {
    my: function() {},
    platform: function() {
    // 基于准备好的dom,初始化echarts实例
    var myChart = Echarts.init(document.getElementById('echart'), 'walden');

    // 指定图表的配置项和数据
    var option = {
    title: {
    text: '',
    subtext: ''
    },
    tooltip: {
    trigger: 'axis'
    },
    legend: {
    data: [__('Sales'), __('Orders')]
    },
    toolbox: {
    show: false,
    feature: {
    magicType: { show: true, type: ['stack', 'tiled'] },
    saveAsImage: { show: true }
    }
    },
    xAxis: {
    type: 'category',
    boundaryGap: false,
    data: Orderdata.column
    },
    yAxis: {},
    grid: [{
    left: 'left',
    top: 'top',
    right: '10',
    bottom: 30
    }],
    series: [{
    name: __('Sales'),
    type: 'line',
    smooth: true,
    areaStyle: {
    normal: {}
    },
    lineStyle: {
    normal: {
    width: 1.5
    }
    },
    data: Orderdata.paydata
    },
    {
    name: __('Orders'),
    type: 'line',
    smooth: true,
    areaStyle: {
    normal: {}
    },
    lineStyle: {
    normal: {
    width: 1.5
    }
    },
    data: Orderdata.createdata
    }
    ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    $(document).on("click", ".btn-refresh", function() {
    setTimeout(function() {
    myChart.resize();
    }, 0);
    });

    },
    company: function() { }
    };
    return Controller;
    });

模块定义

  1. 那么刚才上述的JS模块是如何定义且让RequireJs知道的?