require.js的用法:
1.作用:
1》实现js文件的异步加载,避免网页失去相应。
2》管理模块之间的依赖性,便于代码的编写和维护。
2.下载
官网下载地址:http://requirejs.org/docs/download.html#latest
3.在主界面(index.html)中引入require.js
脚本文件放到</html>结束标签下面,有助于页面的先显示。
<script data-main="js/main.js" src="js/require.js"></script>
1》RequireJS默认假定所有的依赖资源都是js脚本,因此无需在module ID上再加".js"后缀
所以可以重写为:<script data-main="js/main" src="js/require.js"></script>
2》require.js 在加载的时候会检察data-main 属性
data-main指向的脚本中设置模板加载 选项,然后加载第一个应用模块。.
你在main.js中所设置的脚本是异步加载的。
注意:如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。
如下面的例子:
<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>
4.在main.js中用config方法,配置模块的加载顺序
main.js代码如下
require.config({
baseUrl: "js/lib",
paths: {"some":"some/v1.0","some1","some1/v1.0"},
shim:{"backbone":{deps: ['underscore', 'jquery'],exports: 'Backbone'},
"newOne":{deps: ['underscore', 'jquery'],exports: 'Backbone'}},
map:{ 'some/newmodule': {'foo': 'foo1.2'},
'some/oldmodule': {'foo': 'foo1.0'}},
urlArgs:"bust=" + (new Date()).getTime(),
deps:['app'] //会优先加载app.js的。
});
1》baseUrl:所有模块的查找根路径
2》paths:path映射那些不直接放置于baseUrl下的模块名,
用于模块名的path不应含有.js后缀,因为一个path有可能映射到一个目录。
路径解析机制会自动在映射模块名到path时添加上.js后缀。
3》shim:为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。
1>deps数组:表明该模块的依赖性(依赖什么js包)
2>exports:(输出的变量名),表明这个模块外部调时的名称。
4》map:对于给定的模块前缀,使用一个不同的模块ID来加载该模块。
5》urlArgs:RequireJS获取资源时附加在URL后面的额外的query参数。作为浏览器或服务器未正确配置时的“cache bust”手段很有用。
在开发中这很有用,但请记得在部署到生成环境之前移除它。
6》deps:指定要加载的一个依赖数组。
当将require设置为一个config object在加载require.js之前使用时很有用。一旦require.js被定义,这些依赖就已加载。使用deps就像调用require([]),
但它在loader处理配置完毕之后就立即生效。它并不阻塞其他的require()调用,它仅是指定某些模块作为config块的一部分而异步加载的手段而已。
5.require.config()方法还有好多对象的属性:packages,nodeIdCompat,waitSeconds,context,callback,enforceDefine,xhtml,
scriptType,skipDataMain。可以去官网上学习。
6.require();的用法:来加载所有你需要运行的scripts
1》它的执行优先于require.config()方法;
2》语法:
require(['jqery','b'],function($,b){});
数组为模块,毁掉函数为要执行的方法:其中参数$为jQuery。
7.AMD规范就是其中比较著名一个,全称是Asynchronous Module Definition,即异步模块加载机制
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
1》module-name: 模块标识,可以省略。
2》array-of-dependencies: 所依赖的模块,可以省略。
3》module-factory-or-object: 模块的实现,或者一个JavaScript对象。或者一个函数。
综合上述:require.config()写在main.js中,require()和define()写在app.js中
require.js的用法:
最新推荐文章于 2024-08-14 03:07:10 发布