requireJS基本配置相关
requireJS:
(1)实现js文件的异步加载,避免页面失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
加载:
<script src="js/require.js" ></script>
由于加载的模块较多,可能会造成页面失去响应,故可以将此 script 标签 放到 <body> 的后面
(you could also place the script tag end of the <body> section if you do not want the loading of the require.js script to block rendering)
<script src="js/require.js" defer async="true" ></script>
或者是个该标签加上 async 属性,由于IE只支持 defer,故把该属性也一并加上
(For browsers that support it, you could also add an async attribute to the script tag.)
<script src="js/require.js" data-main="js/main"></script>
date-main 指定程序的主模块入口,(由于require.js默认文件后缀是js,故main.js可以简写成main)
程序主模块入口文件:main.js
require(['jQuery', 'underscore', 'backbone', 'moduleA', 'moduleB', 'moduleC'], function($, _, Backbone, moduleA, moduleB, moduleC) {
//some code do sth
})
第一个参数:数组,程序所依赖的模块
第二个参数:回调函数,当把前面指定的模块都加载完成后,回调函数将被调用,前面所加载的模块讲义
注:此种情况加载成功的前提是,依赖模块与main.js在同一目录下,(涉及require另已配置属性baseUrl)
模块加载自定义:require.confige()
位置:主模块main.js的顶部
参数:一个对象{}
对象属性:
/* 逐一指定路径 */
baseUrl: '',//默认值为main.js所在目录
paths:{ //相对baseUrl的路径
"jquery": "jquery",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
/* 改变基目录 baseUrl,模块取相对基目录的路径 */
baseUrl: 'js',//默认值为main.js所在目录
paths:{
//相对baseUrl的路径,路径别名,
//requery()函数的第一个参数中的元素即该属性对象的属性名如:jquery
"jquery": "libs/jquery",
"underscore": "libs/underscore.min",
"backbone": "libs/backbone.min"
}
/* 在另一台主机上 */
paths:{
"jquery": "https://code.jquery.com/jquery-3.1.1.min.js"
}
此时如果加载多个模块的话,就会发送多次HTTP请求,为了不影响页面的加载速度,可以在模块部署完毕后,借用require.js的优化工具 ———— r.js,将这多个模块合并到一个文件中,以减少HTTP请求数。
shim: { //配置不兼容的模块
"underscore": {
exports: '_'
},
"backbone": {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
//exports: 输出变量名,外部模块调用时该模块的名称
//deps: 该模块的依赖模块
requery.js加载的模块必须是 按照AMD规范、用define()函数定义的模块,由于很多库不符合该规范,故requeryJS提供了 shim 配置属性来做到兼容
http://www.ruanyifeng.com/blog/2012/11/require_js.html
http://requirejs.org/docs/api.html
http://www.requirejs.cn/
requireJS基本配置相关的更多相关文章
- Hibernate 系列 04 - Hibernate 配置相关的类
引导目录: Hibernate 系列教程 目录 前言: 通过上一篇的增删改查小练习之后,咱们大概已经掌握了Hibernate的基本用法. 我们发现,在调用Hibernate API的过程中,虽然Hib ...
- linux网络配置相关命令、虚拟网络接口eth0:0
网络接口(interface)是网络硬件设备在操作系统中的表示方法,比如网卡在Linux操作系统中用ethX,是由0开始的正整数,比如eth0.eth1...... ethX.而普通猫和ADSL的接口 ...
- GBrowse配置相关资料
GBrowse配置相关资料(形状.颜色.配置.gff3) http://gmod.org/wiki/Glyphs_and_Glyph_Optionshttp://gmod.org/wiki/GBrow ...
- memcached的基本命令(安装、卸载、启动、配置相关)
memcached的基本命令(安装.卸载.启动.配置相关):-p 监听的端口 -l 连接的IP地址, 默认是本机 -d start 启动memcached服务 -d restart 重起memcac ...
- linux网络配置相关文件
网络接口(interface)是网络硬件设备在操作系统中的表示方法,比如网卡在Linux操作系统中用ethX,是由0开始的正整数,比如eth0.eth1...... ethX.而普通猫和ADSL的接口 ...
- Tomcat 参数配置相关
Tomcat参数配置相关 by:授客 QQ:1033553122 目的: 对Tomcat配置的点滴学习总结,主要目的在于分析Tomcat与性能相关的一些参数设置,以便性能调优时选择最优配置 环境: ...
- Nginx 参数配置相关
Nginx参数配置相关 by:授客 QQ:1033553122 目的: 对Nginx配置的点滴学习总结,主要目的在于分析Nginx与性能相关的一些参数设置,以便性能调优时选择最优配置 环境: $ ...
- 【树莓派】服务配置相关3:基于Ubuntu Server的服务配置
该文接续之前写过的两篇: [树莓派]服务配置相关 [树莓派]服务配置相关2:基于RPi Desktop的服务配置 这是我个人用来进行树莓派盒子安装配置的脚本,对于外部其他博友,可以部分参考,但不需要逐 ...
- 【树莓派】服务配置相关2:基于RPi Desktop的服务配置
该文接续之前写过的一篇:[树莓派]服务配置相关. 这是我个人用来进行树莓派盒子安装配置的脚本,对于外部其他博友,可以部分参考,但不需要逐个引用. 现在有一定更新,部分按如下脚本来操作: step1: ...
随机推荐
- CentOS 6.* 安装node
CentOS6 安装node 使用node -v 是报错 ./node: error while loading shared libraries: libstdc++.so.6: cannot op ...
- 1141 PAT Ranking of Institutions (25 分)
After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- jQuery序列化表单 serialize() serializeArray()
1.serialize()方法 描述:序列化表单内容为字符串,用于Ajax请求. 格式:var data = $(form).serialize(); 2.serializeArray()方法 描述: ...
- JavaScript 精简笔记
JavaScript 精简笔记,摘自 廖雪峰的官方网站. [From] https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51 ...
- JS禁用浏览器退格键实现思路及代码
[From] http://www.jb51.net/article/42562.htm 上周提交了一个项目(内部使用的),一同事提出个BUG,说要禁用退格键(backspace或者叫后退键),因为这 ...
- 【VBA研究】Excel VBA利用ADODB访问数据库使用小结
[转自] http://blog.csdn.net/iamlaosong/article/details/18043433 作者:iamlaosong ▲连接Oracle数据库 Set cnn = C ...
- Oracle分析函数系列之first_value/last_value:在记录集中查找第一条记录和最后一条记录
[转自] http://blog.csdn.net/rfb0204421/article/details/7675911 注意:与max,min的区别,虽然也可以实现,但只是针对数字字段. 1.初始化 ...
- python 文件处理(基础字符)
基于字符read & write 最基本的文件操作当然就是在文件中读写数据.这也是很容易掌握的.现在打开一个文件以进行写操作: 1. fileHandle = open ( 'test.txt ...
- jq api --css
.css() $("p").css("color","red"); $("p").css({ "color&q ...