一、下载requires
可以在终端安装下载： MAC下 npm install requirejs 或者 sudo npm install cpm -g requirejs sudo为管理员用户下 －g 为全局安装
下载后会生成一个node_modules文件夹下
在学习requirejs之前；先看看先前如果页面引入的js文件很多，就会出现一些情况；例如：js的依赖顺序，以及变量名字重复等。
所以很有必要进行js文件包的管理
二、requirejs的使用
requirejs就是进行模块的管理
模块定义的方式：
方式一：定义为对象的形式
define({
key: val,
key1: val1
});
方式二：函数方式
define(arg1,arg2,fn);定义一个模块；第一个参数为模块的名字，如果没有默认为路径下的文件名；第二个参数为一个数组，里面是定义的该模块所依赖的模块；第三个参数为回调函数，函数列表对应为依赖列表。
模块的定义：
1、功能的集合
2、需要输入，require里面通过第二个参数设置依赖，第三个参数的函数列表对应依赖。
3、提供输出。
requirejs的引入
<
script
src=
"../lib/require.js"
data-main=
"js/app.js"></
script>
<
script
src=
"../lib/require.js"
data-main=
"js/app"></
script>
当不用.js后缀名也可以，因为requirejs会自动加上
data-main为require中的特殊属性；
require.js使用它来启动脚本加载过程；就是相当于入口脚本。
requirejs引入模块是一个异步的过程，运行时会在script标签中加入
async属性；该属性是个布尔值，表示浏览器是否在允许的情况下异步执行该脚本；该属性对没有src属性的脚本无作用
随便提一下
defer属性：也是个布尔值，是定义该脚本是否会延迟到文档解析完成后再执行。
async与
defer的区别：
简单来说
async会告诉浏览器，尽量的异步去执行脚本；
defer则告诉浏览器，在文档稳定解析完成河DOMContentLoaded之前执行
DOMContentLoaded事件与loaded事件的区别：
DOMContentLoaded：
在初识文档下载解析好的时候触发，（不用等待图片、样式表、iframe框架的完成）
loaded：
所有资源加载好的时候触发
require模块引用的一个简单例子：
页面引入require；入口模块为app.js
<!DOCTYPE
html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title> Index</ title>
< script src= "../lib/require.js" data-main= "js/app"></ script>
</ head>
< body>
< button class= "loginBtn"> login</ button>
< button class= "regBtn"> reg</ button>
</ body>
</ html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title> Index</ title>
< script src= "../lib/require.js" data-main= "js/app"></ script>
</ head>
< body>
< button class= "loginBtn"> login</ button>
< button class= "regBtn"> reg</ button>
</ body>
</ html>
模块app；同时它依赖login与reg两个模块
define([
'./login',
'./reg'],
function (
login,
reg) {
var run = function () {
login();
reg();
};
var loginBtn = document. querySelector( '.loginBtn');
var regBtn = document. querySelector( '.regBtn');
loginBtn. onclick = function () {
console. log( 'login请求');
login();
};
regBtn. onclick = function () {
console. log( 'reg请求');
reg();
};
run();
});
var run = function () {
login();
reg();
};
var loginBtn = document. querySelector( '.loginBtn');
var regBtn = document. querySelector( '.regBtn');
loginBtn. onclick = function () {
console. log( 'login请求');
login();
};
regBtn. onclick = function () {
console. log( 'reg请求');
reg();
};
run();
});
login模块，此时它依赖net模块
define([
'./net'],
function (
request) {
var login = function () {
request( 'zs', '123');
}
return login;
});
var login = function () {
request( 'zs', '123');
}
return login;
});
reg模块，此时它依赖net模块
define(
function () {
var request = function ( name, pwd) {
console. log( '请求数据' +[ name, pwd]);
}
return request;
});
var request = function ( name, pwd) {
console. log( '请求数据' +[ name, pwd]);
}
return request;
});
net模块，这时它没有依赖的模块
define(
function () {
var request = function ( name, pwd) {
console. log( '请求数据' +[ name, pwd]);
}
return request;
});
var request = function ( name, pwd) {
console. log( '请求数据' +[ name, pwd]);
}
return request;
});
循坏依赖（即a依赖b，b同时又依赖a）：
在这种情形下当b的模块函数被调用的时候，它会得到一个undefined的a。b可以在模块已经定义好后用require()方法再获取(记得将require作为依赖注入进来)
例子：
页面
<!DOCTYPE
html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title> Title</ title>
</ head>
< script src= "../lib/require.js" data-main= "js/main.js"></ script>
< body>
</ body>
</ html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< title> Title</ title>
</ head>
< script src= "../lib/require.js" data-main= "js/main.js"></ script>
< body>
</ body>
</ html>
模块a
define([
'./b'],
function (
b) {
return {
break : function () {
console. log( 'break out');
},
listen : function ( str) {
console. log( str);
}
};
});
return {
break : function () {
console. log( 'break out');
},
listen : function ( str) {
console. log( str);
}
};
});
模块b
define([
'./a',
'require'],
function (
a,
require) {
return {
help : function () {
console. log( 'help you');
},
say : function ( str) {
var aa = require( './a');
aa. listen( str);
}
};
});
return {
help : function () {
console. log( 'help you');
},
say : function ( str) {
var aa = require( './a');
aa. listen( str);
}
};
});
主模块main
define([
'./a',
'./b'],
function (
a,
b) {
var run = function () {
a. break();
b. help();
b. say( 'hahahhaha');
};
run();
});
var run = function () {
a. break();
b. help();
b. say( 'hahahhaha');
};
run();
});
三、requirejs的其本配置
requirejs.config({
属性：属性值
...
});
目录结构
require.config({
//baseUrl默认情况下,就是data-main里面的js文件
baseUrl : 'js/',
/**
* paths: paths映射那些不直接放置于baseUrl下的模块名;设置paths的起始位置是相对于baseUrl的,
* 除非paths设置以'/'开头的或含有URL协议(如http:)。很方便模块的引用,例如以后版本的更新,引用新的插件,方便修改
*
*/
paths : {
'weapon' : 'tool/weapon',
'jquery3' : '../../lib/jquery/jquery-3.1.0.min'
},
/**
* 在放弃加载一个脚本之前等待的秒数,设置为0时禁用等待超时,默认为7秒。
* 就是说等待一个脚本加载的时间,如果在规定时间内加载不完脚本,就放弃加载。
*/
waitSeconds : 5
});
//baseUrl默认情况下,就是data-main里面的js文件
baseUrl : 'js/',
/**
* paths: paths映射那些不直接放置于baseUrl下的模块名;设置paths的起始位置是相对于baseUrl的,
* 除非paths设置以'/'开头的或含有URL协议(如http:)。很方便模块的引用,例如以后版本的更新,引用新的插件,方便修改
*
*/
paths : {
'weapon' : 'tool/weapon',
'jquery3' : '../../lib/jquery/jquery-3.1.0.min'
},
/**
* 在放弃加载一个脚本之前等待的秒数,设置为0时禁用等待超时,默认为7秒。
* 就是说等待一个脚本加载的时间,如果在规定时间内加载不完脚本,就放弃加载。
*/
waitSeconds : 5
});
欢迎各位大神指点；大家交流共同进步
1705
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
