先来看一段常见的场景,通过示例讲解如何运用requirejs:
1、当然首先要到requirejs的网站去下载js -> requirejs.org
2、建立一个html文件,index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
require(["a"]);
</script>
</head>
<body>
<span>body</span>
</body>
</html>
3、建立一个js文件
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
4、用浏览器打开运行。
相关文章:
1:http://www.runoob.com/w3cnote/requirejs-tutorial-1.html
2:http://www.runoob.com/w3cnote/requirejs-tutorial-2.html
3:http://www.oschina.net/translate/getting-started-with-the-requirejs-library?p=2#comments
这只是一个最简单的例子,requirejs在使用上和seajs挺类似的;
附:
RequireJS API 存在于RequireJS载入时创建的命名空间requirejs下。其主要API主要是下面三个函数:
- define– 该函数用户创建模块。每个模块拥有一个唯一的模块ID,它被用于RequireJS的运行时函数,define函数是一个全局函数,不需要使用requirejs命名空间.
- require– 该函数用于读取依赖。同样它是一个全局函数,不需要使用requirejs命名空间.
- config– 该函数用于配置RequireJS.
1:配置函数config
想改变RequireJS的默认配置来使用自己的配置,你可以使用require.configh函数。config函数需要传入一个可选参数对象,这个可选参数对象包括了许多的配置参数选项。下面是一些你可以使用的配置:
require.config({
//By default load any module IDs from scripts/app
baseUrl: 'scripts/app',
//except, if the module ID starts with "lib"
paths: {
lib: '../lib'
},
// load backbone as a shim
shim: {
'backbone': {
//The underscore script dependency should be loaded before loading backbone.js
deps: ['underscore'],
// use the global 'Backbone' as the module name.
exports: 'Backbone'
}
}
})
2:用define定义模块
ReuqireJS提供了define函数用于定义模块。按章惯例每个Javascript文件只应该定义一个模块。define函数接受一个依赖数组和一个包含模块定义的函数。通常模块定义函数会把前面的数组中的依赖模块按顺序做为参数接收。例如,下面是一个简单的模块定义:define(["logger"], function(logger) {
return {
firstName: “John",
lastName: “Black“,
sayHello: function () {
logger.log(‘hello’);
}
}
}
);
例子中,一个包含了logger的模块依赖数组被传给了define函数,该模块后面会被调用。同样我们看所定义的模块中有一个名为logger的参数,它会被设置为logger模块。每一个模块都应该返回它的API(也就是return {属性,函数} 这些供外部使用的变量)这个示例中我们有两个属性(firstName和lastName)和一个函数(sayHello)。然后,只要你后面定义的模块通过ID来引用这个模块,你就可以使用其暴露的API(即通过require函数引入define定义的模块,就可以使用里面定义的属性和函数等)。
3:使用RequireJS函数加载模块
require函数用于加载模块依赖但并不会创建一个模块。例如:下面就是使用require定义了能够使用jQuery的一个函数。require(['jquery'], function ($) {
//jQuery was loaded and can be used now
});