简介
- require.js的主要作用是模块化，规范化js，作为JavaScript脚本加载器，遵循AMD规范；
- require.js中提供了优化器可以优化页面中的js脚本和css文件，以提高页面响应速度，减少http请求次数；
- 可以通过引入一个<script src='require.js' data-main='main.js'></script>加载整个页面；
API中主要函数
- define-该函数用于创建模板，每个模板拥有自己唯一的ID。define函数是全局函数，不需要使用requirejs命名空间；
- require-该函数用于读取依赖。require函数是全局函数，不需要使用requirejs命名空间；
- config-该函数用于配置require路径依赖等信息；
require.config主要参数
- baseUrl-配置模块共同的根目录；
- paths-配置引入模块地址；
- shim-配置引入并没用使用requireJs的初始化函数的模块；
- shim.xxx.deps-配置引入模块的依赖；
- shim.xxx.exports-当外部引入没有使用requireJs需要暴露一个接口时使用；
- shim.xxx.init-当外部引入没有使用requireJs并且需要多个变量暴露的时候使用；
实例：
require.config({
baseUrl:'./public/js',
path:{
add:'add',
shortCut:'shortCut',
jquery:'jquery',
},
skim:{
shortCut:{
exports:'shortCut',
deps:'jquery'
},
jquery:{
exports:'jquery'
}
}
})代码实例
创建index.html并添加<script src="/path/to/require.js" data-main="/path/to/app/config.js"></script>创建入口，具体如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="demo">defineDemo</div>
<button id="button" class="come-on-click">来点一下</button>
</div>
</body>
<script src="js/require.js" data-main="main" type="text/javascript"></script>
</html>这里我们需要再创建一个main.js作为整个页面的入口js，具体如图：
(function (global) {
"use strict"
require.config({
paths: {
add: "js/define/add",
jquery:"js/jquery-3.3.1"
},
skim:{
jquery:{exports:'jquery'}
}
});
require(['add','jquery'],function (add,$) {
debugger;
var myAdd=add();
alert(myAdd.getValue());
alert(myAdd.getValue());
var button=document.getElementById('button');
button.addEventListener('click',function () {
alert(myAdd.getValue());
global.console.log('hello');
});
$('.demo').on('mouseenter',function () {
alert('');
})
})
})(this)编写引入的js，样例如下图：
define(function () {
var add=function () {
this.count=1;
};
add.prototype={
getValue:function () {
return this.count++;
}
}
return function (){
return new add();
};
})这里return的是一个单例的实例。也可以return new add()。
引入css
requireJs是用于引入js的，如果直接去引入css会报错，但我们可以通过引入插件来解决，如下为require-css.js
define(function () {
if ("undefined" == typeof window) return {
load: function (e, t, n) {
n()
}
};
var e = document.getElementsByTagName("head")[0],
t = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/) || 0,
n = !1, r = !0;
t[1] || t[7] ? n = parseInt(t[1]) < 6 || parseInt(t[7]) <= 9 : t[2] || t[8] ? r = !1 : t[4] && (n = parseInt(t[4]) < 18);
var o = {};
o.pluginBuilder = "./css-builder";
var a, i, s, l = function () {
a = document.createElement("style"), e.appendChild(a), i = a.styleSheet || a.sheet
}, u = 0, d = [], c = function (e) {
u++, 32 == u && (l(), u = 0), i.addImport(e), a.onload = function () {
f()
}
}, f = function () {
s();
var e = d.shift();
return e ? (s = e[1], void c(e[0])) : void(s = null)
}, h = function (e, t) {
if (i && i.addImport || l(), i && i.addImport) s ? d.push([e, t]) : (c(e), s = t); else {
a.textContent = '@import "' + e + '";';
var n = setInterval(function () {
try {
a.sheet.cssRules, clearInterval(n), t()
} catch (e) {
}
}, 10)
}
}, p = function (t, n) {
var o = document.createElement("link");
if (o.type = "text/css", o.rel = "stylesheet", r) o.onload = function () {
o.onload = function () {
}, setTimeout(n, 7)
}; else var a = setInterval(function () {
for (var e = 0; e < document.styleSheets.length; e++) {
var t = document.styleSheets[e];
if (t.href == o.href) return clearInterval(a), n()
}
}, 10);
o.href = t, e.appendChild(o)
};
return o.normalize = function (e, t) {
return ".css" == e.substr(e.length - 4, 4) && (e = e.substr(0, e.length - 4)), t(e)
}, o.load = function (e, t, r) {
(n ? h : p)(t.toUrl(e + ".css"), r)
}, o
});首先和其他js一样的引入require-css.js，并对其进行命名，注意命名不要为css，Css、requireCss等等均可；
require.config({
paths: {
add: "js/define/add",
jquery:"js/jquery-3.3.1",
requireCss:'js/define/require-css'
},
skim:{
jquery:{exports:'jquery'}
}
});之后通过require函数引入，不过有点不同的是需要加前缀，前缀为刚刚命名加!，即Css！、requireCss！。
require(['requireCss!cssDemo']);
现在我们可以愉快的体验css了。
最后提示一下，define函数完全可以替代掉require函数，但是为了语义化一般不这么做，define就是用来创建模板，require就是用来引入并且关联。