本节将简述RequireJS经常使用的功能javascript
RequireJS 实现了 Asynchronous Module API.css
目录:java
Nuget:Install-Package RequireJS(会包含2个文件.r.js是用来经过nodejs压缩js的)node
<script src="scripts/require.js" defer async="true"></script>jquery
<script src="scripts/require.js" data-main="scripts/main"></script> git
包括baseUrl,paths,shim,map,enforceDefinegithub
<script data-main="main" src="Scripts/require.js"></script>api
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); });
定义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')); });
咱们的项目若是使用新版本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扩展名.
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)