参考资料: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,

我想在main中调用,下面来看mathjs中代码,必须用return返回一个json,这样main.js才可以调用
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测试的更多相关文章

  1. 利用Angularjs测试引擎Karma进行自动化单元测试

    Karma是Google用于angularjs框架单元测试的js引擎(javascript test runner ), angular1 和angular2项目源码的单元测试都是基于karma和ja ...

  2. SeaJS与RequireJS最大的区别

    SeaJS与RequireJS最大的区别 U_U 2013-06-20 16:21:12 执行模块的机制大不一样-----------------------------------由于 Requir ...

  3. ES6新特性:使用export和import实现模块化

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工 ...

  4. Sea.js

    SeaJS与RequireJS最大的区别   执行模块的机制大不一样-----------------------------------由于 RequireJS 是执行的 AMD 规范, 因此所有的 ...

  5. export和import实现模块化

    export和import实现模块化 阅读目录 ES6的模块化的基本规则或特点: 下面列出几种import和export的基本语法: ES6导入的模块都是属于引用: 循环依赖的问题: 浏览器兼容: 参 ...

  6. ES6新特性:使用export和import实现模块化(转载)

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工 ...

  7. angularJS+requireJS并集成karma测试实践

    最近在为下一个项目做前端技术选型,Angular是必须要用的(BOSS指定,个人感觉也不错,开发效率会很高).由于需要加载的JS很多,所以打算看看angular和requirejs一起用会怎么样.在g ...

  8. karma+requirejs+angular 测试

    http://karma-runner.github.io/0.8/plus/RequireJS.html karma 不是测试框架,只是一个运行测试框架的服务器 karma测试的原理是,将所有的文件 ...

  9. requirejs 打包 添加版本号收集资料 待测试

    https://www.npmjs.org/package/rjs-optimhttps://www.npmjs.org/package/grunt-requirejs-md5指定js版本号 但不是M ...

随机推荐

  1. JAVA通过使用sort方法排序

    java 代码: 对集合排序: //升序public void listSort1(){ List<Integer> list = new ArrayList<Integer> ...

  2. Maven依赖机制理解

    假设一个项目需要用到日志组件Log4j,那么有如下方式添加这个组件. 一.传统方式: 1.访问官网https://logging.apache.org/log4j/2.x/download.html, ...

  3. 【前台 ajax】前台ajax请求,地址正确,但是报错不进入后台

    前台ajax请求,地址正确,但是报错不进入后台 出现上述问题,可能的情况是 1.ajax用的post,而后台限定用get,或者所有的post请求都被拦截,所以不能正常进入并且报错403 @Reques ...

  4. lfu-cache(需要O(1),所以挺难的)

    https://leetcode.com/problems/lfu-cache/ 很难,看了下面的参考: https://discuss.leetcode.com/topic/69137/java-o ...

  5. Spring核心(ioc控制反转)

     IoC,Inversion Of Control 即控制反转,由容器来管理业务对象之间的依赖关系,而非传统方式中的由代码来管理. 其本质.即将控制权由应用程序代码转到了外部容器,控制权的转移就是 ...

  6. C# Window编程随记——ClickOnce程序部署

    关于ClickOnce我们要说的主要有一下两点: 什么是ClickOnce? ClickOnce的使用 一.什么是ClickOnce(来自百度)         ClickOnce 是一种部署技术,使 ...

  7. vue2.0 自定义 饼状图 (Echarts)组件

    1.自定义  图表  组件 Echarts.vue <!-- 自定义 echart 组件 --> <template> <div> <!-- echart表格 ...

  8. C++继承:公有,私有,保护(转)

    公有继承(public).私有继承(private).保护继承(protected)是常用的三种继承方式. 1. 公有继承(public) 公有继承的特点是基类的公有成员和保护成员作为派生类的成员时, ...

  9. 我对C语言输入和输出和一些其他的疑惑点

    gets(字符串数组) 用来接收字符串数组 等同于 scanf("%s",字符串数组名)  需要说的一点是 字符串的数组名 就表示数组的第一个元素的地址 所以加不加&取地址 ...

  10. Java泛型 类型变量的限定

    有时候,类和方法须要对类型变量加以约束.比方你有一个方法,你仅仅希望它接收某个特定类型及其子类型作为參数. 以下就举一个方法限定接收參数的类型的样例来说明怎样限定类型变量. 首先有几个简单的辅助类: ...