【RequireJS】requireJS的基础知识

时间:2023-03-08 17:11:29
【RequireJS】requireJS的基础知识

1. requirejs的优点

  1)异步加载依赖的文件

  2)管理文件加载顺序

  3)管理文件加载的包路径

2. requirejs下载地点

  https://github.com/jrburke/requirejs

3. requirejs demo

依赖文件如下:

  1)index.html  主页面,引入requirejs ,指定整个页面js执行入口

  2)main.js  页面执行入口,定义js的baseUrl 及公共包

  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对象