版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chenlinIT/article/details/80707392
使用CommonsJS模块化开发,模块的加载是运行时同步加载,在浏览器中需要使用Browserify进行编译和打包。AMD规范和CommonsJS不同,RequireJS主要运用在浏览器中,模块的加载是异步的,也可以用在其他环境中,比如 Node。本文只讨论在浏览器中是如何使用的。
下载
文件目录
|--requirejs_test
|--js
|--libs
|--require.js
|--jquery-1.10.1.js
|--modules
|--teacher.js
|--xiaoming.js
|--xiaowang.js
|--main.js
|--index.html
定义模块
1、简单的键值对
//直接在define()中传个对象。
define({
name:"小王",
age:"10"
});
2、定义一个无依赖的模块
//difine()中只传入一个回调函数。
define(function () {
var name = "小明"
function fun () {
return "滚出去……"
}
function getName () {
return name;
}
//只向外暴露两个方法,不暴露name属性
return {
fun:fun,
getName:getName
}
})
3、定义一个有依赖的模块
//依赖xiaoming.js模块,define()方法中传入两个参数,
//第一个是一个数组,数组中包含依赖模块的路径,或者require.config中设置的名称,下面会讲。
//第二个参数是回调函数,毁掉函数的参数是前面数组中的每一项的别名,顺序与数组中的顺序一一对应,
//建议别名与依赖的模块名一致或者一眼能辨别。
define(['./modules/xiaoming'],function(xiaoming){
return {
say: function(someone) {
var student = someone||xiaoming
console.log(student.getName()+student.fun())
},
introduce:function(student){
console.log("这是你们的新同学"+student.name+",今年"+student.age+"岁。")
}
}
})
配置require.config
所有配置项详见 RequireJS中文网-配置选配
//基本配置
//所有模块名应该小写
require.config({
baseUrl: "js", //设置模块查找根目录
paths: {
"teacher": "modules/teacher",
"xiaowang": "modules/xiaowang",
"jquery": "libs/jquery-1.10.1", //jquery支持AMD规范,可以直接引入,但是主要模块名要小写,否则会报错。
},
//引入非AMD规范的第三方库
//如模块underscore和backbone都没有采用AMD规范编写。
//deps属性表明该模块的依赖模块。
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
引入html
//main.js
require.config({
baseUrl: "js",
paths: {
"teacher": "modules/teacher",
"xiaowang": "modules/xiaowang",
"jquery": "libs/jquery-1.10.1",
},
});
(function () {
define([
"teacher",
"xiaowang",
"jquery"
], function (teacher, xiaowang, $) {
teacher.say();
teacher.introduce(xiaowang);
$('body').css("background", "green");
});
})()
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--data-main的作用是指定程序的主模块-->
<script data-main="./js/main.js" src="./js/libs/require.js"></script>
</body>
</html>