本节将简述RequireJS常用的功能
RequireJS 实现了 Asynchronous Module API.
目录:
Nuget:Install-Package RequireJS(会包含2个文件.r.js是用来通过nodejs压缩js的)
为什么使用RequireJS
- 加载script标签会停止响应
- js文件存在依赖性
- 模块化开发
加载RequireJS
- 异步加载script
<script src="scripts/require.js" defer async="true"></script>
- 加载自定义js
<script src="scripts/require.js" data-main="scripts/main"></script>
RequireJS函数
- require.config({}):配置Require信息
包括baseUrl,paths,shim,map,enforceDefine
- require([],funcLoad,funcErro):加载模块后,执行方法
- define([],func):加载模块,定义模块
Hello World
- 加载requirejs
<script data-main="main" src="Scripts/require.js"></script>
- 编写main.js
require.config({
baseUrl: 'Scripts',
paths: {
jquery: ['//cdn.bootcss.com/jquery/2.2.3/jquery', 'jquery-2.2.4']
}
});
require(['jquery'], function (a) {
alert(a.fn.jquery);
});
-
- baseUrl默认与mainjs同一目录
- paths支持多个js源
- paths默认为地址加上.js
- require第一个参数为依赖的模块
- require第二个参数方法中的变量名依次与依赖模块一一对应
自定义模块
定义1个Cache模块,缓存页面中的js对象.
define(['jquery'], function ($) {
var cache = {};
return {
set: function (key, val) {
cache[key] = val;
},
get: function (key) {
return cache[key];
}
}
});
main.js
require(['cache'], function (cache) {
alert(jQuery.fn.jquery);
cache.set('a', 'hello');
});
require(['cache'], function (cache) {
alert(cache.get('a'));
});
引入第三方插件
很多js库 并没有支持AMD方式的模块化开发.
本例子实现上面的cache功能
定义cached.js
var cache = {
data: {},
set: function (key, val) {
this.data[key] = val;
},
get: function (key) {
return this.data[key];
}
};
main.js
require.config({
baseUrl: 'Scripts',
paths: {
jquery: ['//cdn.bootcss.com/jquery/2.2.3/jquery', 'jquery-2.2.4']
},
shim: {
cached: {
exports: 'cache',
deps: ['jquery']
}
}
});
require(['cached'], function (cache) {
cache.set('a', 'hello');
});
require(['cached'], function (cache) {
alert(cache.get('a'));
});
- shim解决依赖与非AMD载入方式.
- exports指定js中提供的对象或方法名.
- deps指定依赖的js库
多版本js库处理
我们的项目如果使用新版本js功能,但又不能直接替换老版本的js.多个版本共存的时候.
使用map函数
requirejs.config({
map: {
'*': {
'jquery': 'scripts/jquery-2.2.4'
},
'scripts/cache': {
'jquery': '//cdn.bootcss.com/jquery/2.2.3/jquery.js'
}
}
});
require(['scripts/cache'], function (a) {
alert($.fn.jquery);
});
map定义了2种jquery版本
*表示默认情况下的jquery模块使用本地2.2.4
scripts/cache表示模块名为此的时候,jquery使用远程库.远程库需添加js扩展名.
RequireJS插件
https://github.com/requirejs/requirejs/wiki/Plugins
AMD(中文版):
https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)