【RequireJS】requireJS的基础知识

时间 2019-12-18

标签 RequireJS requirejs 基础知识栏目 JavaScript 繁體版

原文原文链接

1. requirejs的优势html

　　1）异步加载依赖的文件git

　　2）管理文件加载顺序github

　　3）管理文件加载的包路径异步

2. requirejs下载地点async

　　https://github.com/jrburke/requirejs函数

3. requirejs demorequirejs

依赖文件以下：ui

　　1）index.html 主页面，引入requirejs ，指定整个页面js执行入口spa

　　2）main.js　　页面执行入口，定义js的baseUrl 及公共包code

　　3）lib.js　　main.js依赖的module

index.html


<!DOCTYPE html> 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>报表平台</title>
</head>
<body>

</body>
<script src="/resources/um_report/js/require.js"  defer async="true"  data-main='/resources/um_report/js/main.js'></script>


</html>

main.js

requirejs.config({
  baseUrl: '/resources/js/'
});

require(['lib'],function(Lib){
    console.log('Lib');
    Lib.say('hello');
    console.log(Lib.color);
});

lib.js

define(function(){
    var say1 = function(msg){
            console.log(msg);
        }
    return {
        say: say1,
        color:'red'
    };
});

流程以下：

1）index.html加载require.js 获取入口data-main定义的main函数

2）main.js定义了全部js的基路径，后面引入的js都在基路径的相对路径,

还引入了基路径下的一个叫lib的module，并执行了lib的say方法，并打印了lib.color

3）lib.js定义了一个对象，返回了say方法和color对象