一、介绍
RequireJS是一个非常小巧的Javascript模块载入框架,使用AMD规范(全称Asynchronous Module Definition,即异步模块加载机制。异步强调的是,在加载模块以及模块所依赖的其他模块时,都采用异步加载的方式,避免模块加载阻塞了网页的渲染进度),压缩后只有14k,非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。
有以下优点:
1. 防止js加载阻塞页面渲染
2. 使用程序调用的方式加载js,防止出现多次加载js文件
//view/require1.html
<html>
<head>
<script src="../static/js/require.js"></script>
//通过异步加载的方式来加载js文件,这样可以避免js文件对html渲染的阻塞
<script src="../static/js/require.js" defer async></script>
<script>
require(['../static/js/require1'])
</script>
</head>
<body>
<span>body</span>
</body>
</html>
//../static/js/require1
define(function(){
function fun1(){
alert('it works');
}
fun1();
});
//view/require1.html
<html>
<head>
<script src="../static/js/require1.js"></script>
</head>
<body>
<span>body</span>
</body>
</html>
//../static/js/require1
function fun1(){
alert('it works'); //在body为空白的时候已执行
}
fun1();
二、基本API
三个变量: define, require, requirejs,其中 require === requirejs
1. define 用来定义一个模块
define(function(){
//代码
});
2. require 用来加载依赖模块,并执行加载完后的回调函数。
require([url], function(){
//回调函数代码
})
三、加载文件
require.config 用来配置模块加载位置,就是给模块起一个更短更好记的名字。
//配置模块加载位置
require.config({
paths: {
'jquery': ['http://code.jquery.com/jquery-2.2.4'],
'require1' : ['../static/js/require1']
}
})
//加载依赖模块
require(['jquery','require1'], function($){
$(function(){
alert('load finish');
})
})
四、全局配置
如果每个页面都加入配置,必然显得十分不雅,requirejs提供了一种叫做“主数据”的功能,首先创建一个main.js
//配置模块加载位置
require.config({
paths: {
'jquery': ['http://code.jquery.com/jquery-2.2.4', 'jquery-3.3.1.min'],
'require1' : ['require1']
}
})
require(['jquery', 'require1'], function($) {
$(function(){
alert('finish');
})
})
<script data-main="../static/js/main" src="../static/js/require.js"></script>
require.config({
baseUrl : "js" //在没有使用data-main和config的情况下,baseUrl默认为当前页面的目录
})
四、第三方模块
通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另外一个功能:shim
五、补充
1. 存在依赖的函数式定义
//moduleA.js
define(['moduleB'], function(b) {
var num = 10;
return b.add(num);
}
);
//moduleB.js
define({
add: function(n){
return n+1;
}
});
// moudule1.html
require(['../static/js/moduleA'], function(b){
console.log(b); //11
})