[JS] JS模块化开发之RequireJS
2016-07-26 10:02
423 查看
本节将简述RequireJS常用的功能
RequireJS 实现了 Asynchronous Module API.
目录:
js文件存在依赖性
模块化开发
<script src="scripts/require.js" defer async="true"></script>
加载自定义js
<script src="scripts/require.js" data-main="scripts/main"></script>
包括baseUrl,paths,shim,map,enforceDefine
require([],funcLoad,funcErro):加载模块后,执行方法
define([],func):加载模块,定义模块
<script data-main="main" src="Scripts/require.js"></script>
编写main.js
baseUrl默认与mainjs同一目录
paths支持多个js源
paths默认为地址加上.js
require第一个参数为依赖的模块
require第二个参数方法中的变量名依次与依赖模块一一对应
main.js
本例子实现上面的cache功能
定义cached.js
main.js
shim解决依赖与非AMD载入方式.
exports指定js中提供的对象或方法名.
deps指定依赖的js库
使用map函数
map定义了2种jquery版本
*表示默认情况下的jquery模块使用本地2.2.4
scripts/cache表示模块名为此的时候,jquery使用远程库.远程库需添加js扩展名.
AMD(中文版):
https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
RequireJS 实现了 Asynchronous Module API.
目录:
为什么使用RequireJS
加载RequireJS
Hello World
自定义模块
引入第三方插件
多版本js库处理
RequireJS插件
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/PluginsAMD(中文版):
https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)
相关文章推荐
- 转一篇简洁的UIView动画编程方法
- HDU1159 Common Subsequence (LCS)
- (模板题)poj 2524 Ubiquitous Religions(并查集)
- php之require和include
- SVN-提交时出现(413 Request Entity Too Large)错误解决方法
- LeetCode--303. Range Sum Query - Immutable
- 【HDU 1159】Common Subsequence(最长公共序列LCS算法)
- UITextView: 响应键盘的 return 事件(收回键盘)
- easyui datagrid 分页保持checkbox选中状态
- UIToolbar
- lintcode longest-common-subsequence 最长公共子序列 证明
- hibernate 的createSQLQuery的几种用法(转)
- 【代码笔记】iOS-UILable高度自适应(sizeWithFont)
- 【代码笔记】iOS-UILable高度自适应(sizeWithFont)
- JSP内置对象-request
- session.createQuery()与createSQLQuery()区别
- 一个easyui treegrid有意思的地方
- 自定义UITabbar和navigationBar
- WPF 之 调用线程必须为 STA,因为许多 UI 组件都需要
- UITableView之分组案例