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 ...
随机推荐
- git之生成SSH key
git之生成SSH key SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定.利用 SSH 协议可以有效防止远程管理过程中的信 ...
- javaWeb 开发的成长路线
感觉最近技术到了一个瓶颈,好长时间没有感觉进步了,本着活到老学到老的态度,笔者就去逛了下,看看前辈们写的文章,觉得他们写的非常不错,在这里特别贴出一张特别值得收藏的图片,不是说其他总结的图片不值得收藏 ...
- Zabbix 源码编译安装
简介: Zabbix 分布式监控系统,源码编译安装记录 ( 记不得是第多少次了 ) 下载地址:http://jaist.dl.sourceforge.net/project/zabbix/ZABBIX ...
- tree的所有节点都勾选上或者取消勾选
还有一个功能,就是让tree的所有节点都勾选上或者取消勾选,在api中找了一下有一个方法: check target 选中指定节点. 那我们只能是选中根节点后,实现全选. getRoot none 获 ...
- ArraySegment的用法
string[] myArr = { "Overred", "Medloy", "Xiaoguai", "Hare" } ...
- Superset安装
Superset version 1.8.5 # Install superset pip install cairocffi pip install superset yum ...
- JSP的原理、JSP的执行过程
Jsp的本质是servlet, 通过response的printWriter返回,response的getOutputStream只能调用一次,返回流就不能返回页面刷新. JSP起源 在很多动态网页中 ...
- Java-随机数工具类
import java.util.Random; import java.util.concurrent.ThreadLocalRandom; import org.apache.commons.la ...
- 10-stack
c++ stl栈stack介绍 C++ Stack(堆栈) 是一个容器类的改编,为程序员提供了堆栈的全部功能,——也就是说实现了一个先进后出(FILO)的数据结构. c++ stl栈stack的头文件 ...
- Setuptool+pip安装
https://pypi.python.org/pypi/setuptools 1. 下载ez_setup.py文件,cmd进入安装目录: 2. python setup.py install htt ...