本文介绍RequireJS的基本使用方法，包括如何管理JS文件包、模块定义及依赖处理。还讲解了RequireJS配置选项及其解决循环依赖问题的方法。
一、下载requires
可以在终端安装下载： MAC下 npm install requirejs 或者 sudo npm install cpm -g requirejs sudo为管理员用户下 －g 为全局安装
下载后会生成一个node_modules文件夹下
在学习requirejs之前；先看看先前如果页面引入的js文件很多，就会出现一些情况；例如：js的依赖顺序，以及变量名字重复等。
所以很有必要进行js文件包的管理
二、requirejs的使用
requirejs就是进行模块的管理
模块定义的方式：
方式一：定义为对象的形式
define({
key: val,
key1: val1
});
方式二：函数方式
define(arg1,arg2,fn);定义一个模块；第一个参数为模块的名字，如果没有默认为路径下的文件名；第二个参数为一个数组，里面是定义的该模块所依赖的模块；第三个参数为回调函数，函数列表对应为依赖列表。
模块的定义：
1、功能的集合
2、需要输入，require里面通过第二个参数设置依赖，第三个参数的函数列表对应依赖。
3、提供输出。
requirejs的引入
<script src="../lib/require.js" data-main="js/app.js"></script>
<script src="../lib/require.js" data-main="js/app"></script>
当不用.js后缀名也可以，因为requirejs会自动加上
data-main为require中的特殊属性；require.js使用它来启动脚本加载过程；就是相当于入口脚本。
requirejs引入模块是一个异步的过程，运行时会在script标签中加入async属性；该属性是个布尔值，表示浏览器是否在允许的情况下异步执行该脚本；该属性对没有src属性的脚本无作用
随便提一下defer属性：也是个布尔值，是定义该脚本是否会延迟到文档解析完成后再执行。
async与defer的区别：
简单来说
async会告诉浏览器，尽量的异步去执行脚本；
defer则告诉浏览器，在文档稳定解析完成河DOMContentLoaded之前执行
DOMContentLoaded事件与loaded事件的区别：
DOMContentLoaded：
在初识文档下载解析好的时候触发，（不用等待图片、样式表、iframe框架的完成）
loaded：
所有资源加载好的时候触发
require模块引用的一个简单例子：
页面引入require；入口模块为app.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="../lib/require.js" data-main="js/app"></script>
</head>
<body>
<button class="loginBtn">login</button>
<button class="regBtn">reg</button>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script src="../lib/require.js" data-main="js/app"></script>
</head>
<body>
<button class="loginBtn">login</button>
<button class="regBtn">reg</button>
</body>
</html>
模块app；同时它依赖login与reg两个模块
define(['./login','./reg'],function (login,reg) {
var run = function () {
login();
reg();
};
var loginBtn = document.querySelector('.loginBtn');
var regBtn = document.querySelector('.regBtn');
loginBtn.onclick = function () {
console.log('login请求');
login();
};
regBtn.onclick = function () {
console.log('reg请求');
reg();
};
run();
});
var run = function () {
login();
reg();
};
var loginBtn = document.querySelector('.loginBtn');
var regBtn = document.querySelector('.regBtn');
loginBtn.onclick = function () {
console.log('login请求');
login();
};
regBtn.onclick = function () {
console.log('reg请求');
reg();
};
run();
});
login模块，此时它依赖net模块
define(['./net'],function (request) {
var login = function () {
request('zs','123');
}
return login;
});
var login = function () {
request('zs','123');
}
return login;
});
reg模块，此时它依赖net模块
define(function () {
var request = function (name,pwd) {
console.log('请求数据'+[name,pwd]);
}
return request;
});
var request = function (name,pwd) {
console.log('请求数据'+[name,pwd]);
}
return request;
});
net模块，这时它没有依赖的模块
define(function () {
var request = function (name,pwd) {
console.log('请求数据'+[name,pwd]);
}
return request;
});
var request = function (name,pwd) {
console.log('请求数据'+[name,pwd]);
}
return request;
});
循坏依赖（即a依赖b，b同时又依赖a）：
在这种情形下当b的模块函数被调用的时候，它会得到一个undefined的a。b可以在模块已经定义好后用require()方法再获取(记得将require作为依赖注入进来)
例子：
页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../lib/require.js" data-main="js/main.js"></script>
<body>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../lib/require.js" data-main="js/main.js"></script>
<body>
</body>
</html>
模块a
define(['./b'],function (b) {
return {
break: function () {
console.log('break out');
},
listen: function (str) {
console.log(str);
}
};
});
return {
break: function () {
console.log('break out');
},
listen: function (str) {
console.log(str);
}
};
});
模块b
define(['./a','require'],function (a,require) {
return {
help: function () {
console.log('help you');
},
say: function (str) {
var aa = require('./a');
aa.listen(str);
}
};
});
return {
help: function () {
console.log('help you');
},
say: function (str) {
var aa = require('./a');
aa.listen(str);
}
};
});
主模块main
define(['./a','./b'],function (a,b) {
var run = function () {
a.break();
b.help();
b.say('hahahhaha');
};
run();
});
var run = function () {
a.break();
b.help();
b.say('hahahhaha');
};
run();
});
三、requirejs的其本配置
requirejs.config({
属性：属性值
...
});
目录结构
require.config({
//baseUrl默认情况下,就是data-main里面的js文件
baseUrl: 'js/',
/**
* paths: paths映射那些不直接放置于baseUrl下的模块名;设置paths的起始位置是相对于baseUrl的,
* 除非paths设置以'/'开头的或含有URL协议(如http:)。很方便模块的引用,例如以后版本的更新,引用新的插件,方便修改
*
*/
paths: {
'weapon': 'tool/weapon',
'jquery3': '../../lib/jquery/jquery-3.1.0.min'
},
/**
* 在放弃加载一个脚本之前等待的秒数,设置为0时禁用等待超时,默认为7秒。
* 就是说等待一个脚本加载的时间,如果在规定时间内加载不完脚本,就放弃加载。
*/
waitSeconds: 5
});
//baseUrl默认情况下,就是data-main里面的js文件
baseUrl: 'js/',
/**
* paths: paths映射那些不直接放置于baseUrl下的模块名;设置paths的起始位置是相对于baseUrl的,
* 除非paths设置以'/'开头的或含有URL协议(如http:)。很方便模块的引用,例如以后版本的更新,引用新的插件,方便修改
*
*/
paths: {
'weapon': 'tool/weapon',
'jquery3': '../../lib/jquery/jquery-3.1.0.min'
},
/**
* 在放弃加载一个脚本之前等待的秒数,设置为0时禁用等待超时,默认为7秒。
* 就是说等待一个脚本加载的时间,如果在规定时间内加载不完脚本,就放弃加载。
*/
waitSeconds: 5
});
欢迎各位大神指点；大家交流共同进步
扫一扫
1047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
