requirejs实例

来源：互联网发布：手机淘宝怎么删晒图编辑：程序博客网时间：2024/06/08 00:17

html引入文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body></body>
<script src="js/requirejs.js" data-main="config.js" defer async >
// data-main="config.js" config.js后的.js可以去掉。因为requireJS源码默认都是以后缀JS文件结尾的。
// async属性表明文件需要异步加载，IE不支持这个属性，只支持defer
</script>
</html>

config.js配置文件

requirejs.config({ // 如果未显示设置baseUrl,则默认值是加载require.js的html所处的位置，如果使用了data-main属性的话，则该路径变成了baseUrl.
baseUrl:'app/', // 该属性通常由requireJS加载的data-main属性基准目录决定
path:{ // paths是映射那些不直接放在baseUrl指定的目录下的文件
app:'app', // 设置paths的起始位置是相对于baseUrl的，除非该path设置是以”/”开头或含有URL协议(http://或者https://

// hello:'hello',
},
shim:{ // shim这个参数可以解决没有使用define(function(){})定义的代码模块或者一些全局变量注入，确保此文件先加载，然后再加载其他文件。
// 解决了使用非AMD方式定义的模块(如jquery插件)及其载入顺序，为那些没有使用define()来声明依赖关系，设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。
//hello:{exports:'hi'} // 1、exports 某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用。
hello:{ // 2、init同时暴露多个全局变量
init:function(){
return {
hi:hi,
hi2:hi2
}
}
}
},
map:{ // 3、 map参数是用来解决同一个模块不同版本的问题
'app/a':{
'jquery': 'js/lib/jquery1.7.js'
},
'app/b':{
'jquery': 'js/lib/jquery1.9.1.js'
}
},
config:{ // 4、 config是指需要将配置信息传给一个模块，这些配置往往是application级别的信息，需要一个手段将他们向下传递给模块。
'app/c': { // 要获取这些信息的模块可以加载特殊的依赖 ”moudle” ,并调用module.config().
size: 'large'
},
'app/d': {
color: 'blue'
}
}
});
// 1、 exports 可以把某个非requirejs方式的代码中的某一个全局变量暴露出去，当作该模块以引用。
//requirejs(['hello'], function(){
// hi();
//});
// 2、同时暴露多个全局变量 exports 与 init 同时存在的时候， exports 将被忽略。
//requirejs(['hello'], function(hello){
// hello.hi();
// hello.hi2();
//});

// 把下面代码独立出一个js文件
requirejs(['app'], function(app) {
app.hello();
});

//// 3、 map 方法调用
requirejs(['app/a'],function(jq){ });
requirejs(['app/b'],function(jq){ });

// 4、在requireJS中，基于requirejs.config()的config配置项来实现。通过config配置项来给app/c.js传递一个模块信息
// 如上面的一个对象{size：large}，而在c.js里面直接可以通过module.config()方法来获取size的值。
require(['app/c'],function(c){
console.log(c);
});

/// 有主的模块 define('jquery', [], function() { ... });
/// 它多了第一个参数'jquery'，表示给当前这个模块起了名字jquery，它已经是有主的了，只能属于jquery .
/// 为什么有的有主，有的无主?
/// 因为像 jquery , underscore 这样的基础库，经常被其它的库依赖。如果声明为无主的，那么其它的库很可能起不同的模块名，这样当我们使用它们时，就可能会多次载入jquery/underscore。

js文件
define([],function(){
return {
hello: function(){
alert('hello, app');
}
}
});

/// define定义一个作用域避免全局空间污染，它可以显示出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入。例如：
///require/app/b.js文件夹下添加基本的requireJS代码如下：
// b.js
define(function(){ /// 函数式的定义
var add = function(x,y) {
return x + y;
};
return {
add : add
}
});

define(function () { ///键值对式的定义直接返回一个对象(可以解决全局变量的理念)
return {
color: "black",
size: "unisize"
}
});

//require/config.js文件夹下
// config.js
require(['app/b'], function(b){
console.log(b.add(1,1));
});
// 浏览器加载顺序 requirejs --> config.js --> b.js。

0 0