requirejs测试
参考资料：http://www.ruanyifeng.com/blog/2012/11/require_js.html
一、文件目录
二、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>require-js-test</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
<script data-main="js/main.js" src="js/require.js"></script>
</head>
<body>
</body>
</html>
三、mainjs
require.config({
paths: {
"jquery": "helper/jquery",
}
});
require(["jquery"],function ($) {
alert("jquery已经加载完毕");
})
或者另外一种写法
require.config({
baseUrl:"js/helper",
paths: {
"jquery": "jquery",
}
});
require(["jquery"],function ($) {
alert("jquery已经加载完毕");
})
四、在main中调用jquery，必须让jquery中先定义再返回，经过查找源码知：
define( "jquery", [], function() {
return jQuery;
} );
五、扩展，假设我在helper增加一个自己写的加法math.js，
W11.png)
define(function(){
function sum(a,b) {
return a+b;
};
return{
add:sum,
};
})
下面来看main.js
require.config({
paths: {
"jquery": "helper/jquery",
"math":"helper/math"
}
});
require(["jquery","math"],function ($,math) {
$(".box").css("color","red");
alert(math.add(1,2));
})
六、加载非规范的模块（针对没有用AMD规范写的js，想要在main.js中引用）
理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
回答是可以的。
这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。
举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。
require.config({
shim: {
'underscore':{
exports: '_'
},'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}}
});
require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。
比如，jQuery的插件可以这样定义：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
requirejs测试的更多相关文章
- 利用Angularjs测试引擎Karma进行自动化单元测试
Karma是Google用于angularjs框架单元测试的js引擎(javascript test runner ), angular1 和angular2项目源码的单元测试都是基于karma和ja ...
- SeaJS与RequireJS最大的区别
SeaJS与RequireJS最大的区别 U_U 2013-06-20 16:21:12 执行模块的机制大不一样-----------------------------------由于 Requir ...
- ES6新特性：使用export和import实现模块化
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工 ...
- Sea.js
SeaJS与RequireJS最大的区别 执行模块的机制大不一样-----------------------------------由于 RequireJS 是执行的 AMD 规范, 因此所有的 ...
- export和import实现模块化
export和import实现模块化 阅读目录 ES6的模块化的基本规则或特点: 下面列出几种import和export的基本语法: ES6导入的模块都是属于引用: 循环依赖的问题: 浏览器兼容: 参 ...
- ES6新特性：使用export和import实现模块化（转载）
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工 ...
- angularJS+requireJS并集成karma测试实践
最近在为下一个项目做前端技术选型,Angular是必须要用的(BOSS指定,个人感觉也不错,开发效率会很高).由于需要加载的JS很多,所以打算看看angular和requirejs一起用会怎么样.在g ...
- karma+requirejs+angular 测试
http://karma-runner.github.io/0.8/plus/RequireJS.html karma 不是测试框架,只是一个运行测试框架的服务器 karma测试的原理是,将所有的文件 ...
- requirejs 打包 添加版本号收集资料 待测试
https://www.npmjs.org/package/rjs-optimhttps://www.npmjs.org/package/grunt-requirejs-md5指定js版本号 但不是M ...
随机推荐
- 快速掌握RabbitMQ(五)——搭建高可用的RabbitMQ集群
RabbitMQ的集群是依赖erlang集群的,而erlang集群是通过.erlang.cookie文件进行通信认证的,所以我们使用RabbitMQ集群时只需要配置一下.erlang.cookie文件 ...
- 会话跟踪技术Cookieless
会话跟踪技术Cookieless 在Web应用中,通常使用Cookie记录用户的状态,如用户名.访问时间等信息.当进行HTTP请求的时候,会自动发送Cookie信息给服务器.服务器接收到,就可以判 ...
- jdk1.8中nashorn不支持ECMAScript6的问题
背景 在项目中需要使用java调用javascript脚本,有两种方案,一种是faas,使用开源的openwhisk.另一种本地运行的方式,使用jdk的nashorn调用javascript,jdk版 ...
- Java线程池的内部实现
一.线程池介绍 线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池可以对线程进行统一的分配.调优和监控,并有以下好处: (1)降低资源消耗. (2)提高响应速 ...
- .net 哈希
using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptograph ...
- 如何查看pip安装包的所有版本；以及ipython的安装
安装ipython很简单,直接使用pip就行 比如mac环境下:pip install ipython:提示安装失败,原因是pip默认安装的ipython版本6.0+不适用python3.3以下版本 ...
- Direct2D教程（十二）图层
什么是Layers? Layer,中文译成图层,在Direct2D中可以用来完成一些特殊效果,使用Layer的时候,先将Layer Push到render target,然后进行绘制,此时是直接绘制在 ...
- vscode格式化代码无效--可能的解决方法
因为vscode默认启用了根据文件类型自动设置tabsize的选项,因此,可以通过关闭自动设置选项,防止格式覆盖.在用户设置里添加如下配置即可: "editor.detectIndentat ...
- 安装惠普M1136打印机一直处于“新设备已连接”状态怎么办？
百度的答案是从控制面板的添加打印机入手,我试了遇到找不到设备的问题. 其实问题的原因是在安装驱动时一直把打印机到电脑的USB插着.我的解决方案是: 1.点击M1130MFP_M1210MFP开始安装, ...
- vue2.0 + vux （三）MySettings 页
1.MySettings.vue <!-- 我的设置 --> <template> <div> <img class="img_1" sr ...