require.js的用法:

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中

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值