requirejs 配制
baseUrl: 用来配制动态加载脚本时,脚本文件的起始位置,此属性可以指定值,也可以由 requirejs 自动计算出值:
1:不进行任何配制: 假如 a.html 中引用 require.js 文件 <script src="require.js"></script>
这样在 require(['util'],...) 的时候,util.js 的路径就是和 a.html 在同一个目录.
2:通过 data-main 属性指定主文件:假如 a.html 中引用 require.js 文件 <script data-main="../app/main.js" src="require.js"></script>
这种情况下,requirejs 会把 "../app/" 作为 baseUrl 属性的值,在 require(['util'],...) 的时候,util.js 的路径就是 ../app/util.js 了。
3:显示指定 baseUrl 属性:假如 /admin/home.html 中引用 require.js 文件 <script data-main="../app/main.js" src="require.js"></script>
在 main.js 中配制了 baseUrl 的值为 'lib' 值,在 require(['util'],...) 的时候,util.js 的路径就是 lib/util.js, 这是相对于 home.html 文件, 对于网站的绝对地址就是 /admin/lib/util.js 了。
从上面的三种情况可以看取, requirejs 生成脚本路径的时候,就是把 baseUrl 加上 脚本的路径。
另外一个比较特殊的方式加载js文件。当以以下三种方式来加载js文件时,加载的路径将绕过上述的这些配置(意思是设置什么路径就以什么路径加载,不对路径进行任何处理)。这三种方式包括:
1、以/开头的路径。
2、以.js结尾的路径
3、以协议http或https开头的路径
paths: 用来配制一些路径的别名,在 require 的时候直接使用别名就可以加载相应的脚本。
paths 也可以文件夹的别名,如控件全部放在 lib/common/controls/ 目录下面,如果在不取别名的情况下,引用一个控件需要这样 require(['lib/common/controls/date'], ...), 如果在 paths 里配制了 'controls': 'lib/common/controls' 后, 就可以 require(['controls/date'], ...) 了。
paths 还有备错配制功能,如 jquery 的库默认从 cdn 上加载,如果 cdn 加载不成功就从本地加载:
'jquery':['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min', 'lib/jquery']
shim: 配制一些未按 AMD 模式定义的库,(在 requirejs 中,模块使用 define 方法定义,define 方法会有一个返回值,这返回值就是模块的对象),如 jquery 的一些插件及以前一些老点的库,都没有按这些方式做,所以需要通过 shim 属性来配制一下:
shim: {
'bold': [
'deps': ['jquery'],
'exports': 'jQuery.fn.bold'
]
}
上面的代码中,主要是 exports 属性,这此属性的意思是当文件加载成功后, requirejs 从哪个变量中获取文件中所定义的对象,其实就是一个变量名称,requirejs 通过这个变量名称获取到一个值,并传递到相应的方法。
urlArgs: 用来指定在加载脚本时,附加在脚本 url 地址后面的参数,如 urlArgs: 'ver=10001', 那么在动态加载的所有的脚本文件中,都会加上这个参数。
bundles: 当一个文件中定义了多个模块时,就需要使用此属性来进行相应的配制 bundles: { jsUtil:['MathUtil', 'DateUtil'] }, jsUtil 是文件名称, MathUtil 和 DateUtil 是通过 define 定义的模块名称,这样定义后,就可以使用 require(['MathUtil', 'DateUtil']...) 的方式对模块进行相应的引用。
requirejs 配制的更多相关文章
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 实现一个类 RequireJS 的模块加载器 (二)
2017 新年好 ! 新年第一天对我来说真是悲伤 ,早上兴冲冲地爬起来背着书包跑去实验室,结果今天大家都休息 .回宿舍的时候发现书包湿了,原来盒子装的牛奶盖子松了,泼了一书包,电脑风扇口和USB口都进 ...
- 使用RequireJS并实现一个自己的模块加载器 (一)
RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...
- 使用gulp解决RequireJS项目前端缓存问题(二)
1.前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有 ...
- AngularJs2与AMD加载器(dojo requirejs)集成
现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...
- angularjs集成requirejs
其实说成使用requirejs加载angularjs应用会更贴切一些 <body> <span ng-controller="homeController"> ...
- 《连载 | 物联网框架ServerSuperIO教程》- 14.配制工具介绍,以及设备驱动、视图驱动、服务实例的挂载
注:ServerSuperIO二次开发套件授权码申请---截止到:2016-12-09 1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架Server ...
- 使用gulp解决RequireJS项目前端缓存问题(一)
1.前言 前端缓存一直是个令人头疼的问题,你有可能见过下面博客园首页的资源文件链接: 有没有发现文件名后面有一串不规则的东东,没错,这就是运用缓存机制,我们今天研究的就是这种东西. 先堵为快,猛戳链接 ...
- linux学习日记之目录配制
linux目录管理遵循FHS标准,主要目标是希望让使用者可以了解已安装软件通常放置于哪个目录上,所以他们希望独立的软件开发商.操作系统制作者.以及想要维护系统的用户,都遵循FHS的标准.也就是说FHS ...
随机推荐
- 使用Spring MVC创建 REST API--2
1.提供资源之外的其他内容 @ResponseBody提供了一种很有用的方式,能够将控制器返回的Java对象转换为发送到客户端的资源表述.实际上,将资源表述发送给客户端只是整个过程的一部分.一个好的R ...
- python学习——练习题(6)
""" 题目:斐波那契数列. 程序分析:斐波那契数列(Fibonacci sequence),又称黄金分割数列,指的是这样一个数列:0.1.1.2.3.5.8.13.21 ...
- arcserver 跨域问题
http://resources.arcgis.com/en/help/rest/apiref/config.html#jcrossOriginAccesshttp://enable-cors.org ...
- Console2支援中文顯示的正式設定法
1.用regedit找到HKEY_CURRENT_USER\Console,把底下的Console2 command window機碼給砍了.2.Console2的View功能表中,有個Console ...
- 伸展树(SplayTree)的实现
优点:伸展树(splay tree)是一种能自我调整的二叉搜索树(BST).虽然某一次的访问操作所花费的时间比较长,但是平摊(amortized) 之后的访问操作(例如旋转)时间能达到O(logn)的 ...
- Bower 使用
Bower:客户端库管理工具 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 概述 常用操作 项目初始化 库的安装 库的搜索和查看 库的更新和卸载 列出所有库 ...
- 数组和集合(三):Set集合的使用总结
一.概述 · 继承collection接口 · 无序(不记录添加顺序).不允许元素重复.只允许存在一个null元素 二.实现类 1. HashSet · 底层其实是包装了一个HashMap实现的 · ...
- cdoj31-饭卡(card) (01背包)
http://acm.uestc.edu.cn/#/problem/show/31 饭卡(card) Time Limit: 3000/1000MS (Java/Others) Memory ...
- 微软人工智能公开课 https://mva.microsoft.com/colleges/microsoftai#!jobf=Developer
https://mva.microsoft.com/colleges/microsoftai#!jobf=Developer
- 14-敌兵布阵(HDU1166线段树 & 树状数组)
http://acm.hdu.edu.cn/showproblem.php?pid=1166 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory ...