首先得把下载好的require.js文件链接到html文档中：
1. <script src="require.js" data-main="main"></script>
require.js加载完成后会到页面上查找script[data-main]的值，找到之后会加载data-main指定的js文件，main是入口文件 main.js可以省略.js后缀名
**main.js**
1. console.log('main loading')
2. // 同时加载js1/和js2文件也可以加载更多的js文件
3. // 脚本加载完成后 会调用第二参数指定的回调函数
4. // require.js会自动在head标签中注入script标签
5. // require.js添加script标签带有async属性
6. // async属性会使浏览器同时开始异步js
7. // 使用require.js可以很方便的的导入js文件 但是需要解决js文件中
8. // 变量名 方法名与其他js文件中变量名方法名冲突的问题
9. // 造成这个问题的原因
10. // 浏览器端js存在共用的全局作用域 全局变量 方法名 有可能被覆盖掉
11. // NodeJS中每一个js文件都是一个独立作用域 不存在共用的全局作用域
12. // NodeJS的js文件是相互隔离的 js文件之间只能通过模块导出的方法相互使用
13. require(['js1','js2','js3'],function(){
14. console.log('js/1,2,3已经加载完毕')
15. var total = number1 + number2 + number3
16. console.log(total)
17. hello()
18. hello2()
19. hello3()
20. })
require模块加载
** m.js**
1. // var number = 1
2. // 全局作用域一直存在 除非页面关闭或跳转到其他页面含刷新
3. // 全局作用域是页面级 而不是网站级的
4. // define是require.js提供的模块定义函数
5. // 在这个函数中可以定义模块 方法是 调用define 给它传一个参数
6. // 模块的所有代码都写在这个函数中 模块代码在函数作用域中 不会干扰、污染全局作用域
7.
8. // 函数作用域存在的时间非常短 而且在外面无法得到
9. // 函数作用域内部的内容 所以需要使用return将需要导出的内容返回到函数外部
10. define(function(){
11. // 函数作用域
12. // 调用函数时 代码执行到函数内部时创建的函数作用域
13. // 函数的代码执行完毕后 函数作用域会立刻销毁
14. // 函数作用域销毁时 函数内部定义的变量和函数都会销毁
15. var number = 1
16. var number2 = 2
17. var hello = function () {
18. alert('hello' + number)
19. }
20. // return 将一个值返回给函数的调用者
21. // return返回的值会跳出函数作用域
22. // 返回的值比函数作用域生存的时间长
23. return{
24. number1:number,
25. number2:number2,
26. hello:hello
27. }
28. });
** m2.js**
1. // 让requireJS虚拟出来一个module module通过传
2. // 参数的方式进入函数作用域
3. define(['require','module'],function(require,module){
4. var number1 = 1
5. var number2 = 2
6. var hello = function(){
7. console.log('hello wangBaoQiang')
8. }
9. // 使用rrequire加载其它js模块
10. var exports = require('exports')
11. // 导出模块 requireJS中导出模块的方法
12. // module.exports = {
13. // number1:number1,
14. // number2:number2,
15. // hello:hello
16. // }
17. exports.number1 = number1
18. exports.number2 = number2
19. exports.hello = hello
20. })
require配置
这里不同目录的require.js引入是这样的：
1. <script data-main="./scripts/main" src="./libs/require.js"></script>
**这是main.js**
1. // requireJS默认会把入口js(本例中的main.js)所在的文件夹
2. // ./scripts/)的路径当做基本路径 当使用require加载其它的js文件时
3. // 会把基本路径(./scripts/) + 模块名字 + .js作为模块js的完整路径
4. // ./scripts/jquery.js
5. // define('jquery',[],function(){
6. // return jQuery
7. // })
8. // 1. 模块名称
9. // 2.依赖项 依赖项会在你定义的模块加载前加载
10. // 3.函数作用域 你的模块代码所在位置
11. // require(['../libs/jquery'],function($){
12. // alert($)
13. // })
14.
15. // CDN Content Distribute NetWorking 内容分布网络
16. require.config({
17. // baseUrl指的是文件的基本路径
18. baseUrl:'libs',
19. paths:{
20. jquery:'jquery',
21. // jquery:'https://cdn.bootcss.com/jquery/3.2.1/jquery.min',
22. fullScreen:'jquery.fullScreen',
23. m:'../scripts/m'
24. },
25. // 为那些没有使用define()来声明依赖关系、
26. // 设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。
27. shim:{
28. // fullScreen:{
29. // deps:['jquery'],
30. // // exports:'fullScreena'
31. // }
32. fullScreen:['jquery']
33. }
34. })
35. require(['jquery','m','fullScreen'],function($,m,fullScreena){
36. console.log(fullScreena)
37. if($.support.fullscreen){
38. console.log('vvvvvvvv')
39. $('#fullscreen').click(function(e){
40. $('#content').fullScreen();
41. e.preventDefault();
42. });
43. }
44. })
Require-css
在使用require.js的时候，想要在其中设置css样式的话需要require-css插件，具体的实现方法和代码请点击下面的演示效果，按照上图的文件结构修改地址查看源代码。
演示效果
实践 - 工资计算器
使用上次做的工资计算器进行使用require.js修改。
只修改了工资总额的计算，其他的同理。
**main.js**
1. require(['jquery','gongzi'],function($,$$){
2. // $$计算工资数据
3. console.dir($$)
4.
5.
6. $('button').click(function(){
7. var jishu = $('#jishu').val(),
8. jixiao = $('#jixiao').val(),
9. jiangjin = $('#jiangjin').val()
10. jishu = parseFloat(jishu) || 0
11. jixiao = parseFloat(jixiao) || 0
12. jiangjin= parseFloat(jiangjin) || 0
13.
14. var data = $$.calc(jishu,jixiao,jiangjin)
15. console.log(data)
16.
17. $('#zonge').text(data.total.toFixed(2))
18. $('section').slideDown()
19. })
20. // 监听form表单的input事件 当用户输入时 隐藏计算结果
21. $('form').on('input',function(){
22. $('section').fadeOut()
23. })
24. })
**gongzi.js**
1. // 定义一个工资计算模块
2. // 这个模块导出一个函数 这个函数接受三个参数
3. // 分别表示基本工资 绩效工资 奖金
4. // 通过计算返回一个对象
5. // requireJS定义模块的步骤
6. // 1.写一个define函数调用
7. // 2.在define中写一个函数作用域
8. // 3. 在函数作用域写代码
9. // 4. 将指定的内容导出
10. // define(function(){
11. // function calc(jishu,jixiao,jiangjin){
12. // // 工资总额
13. // var total = jishu + jixiao + jiangjin
14. // return {
15. // total:total
16. // }
17. // }
18. // return calc
19. // })
20. // define(['module'],function(module){
21. // function calc(jishu,jixiao,jiangjin){
22. // // 工资总额
23. // var total = jishu + jixiao + jiangjin
24. // // 其它计算数据
25. // return {
26. // total:total
27. // }
28. // }
29. // module.exports = calc
30. // })
31. define(['exports'],function(exports){
32. function calc(jishu,jixiao,jiangjin){
33. // 工资总额
34. var total = jishu + jixiao + jiangjin
35. // 其它计算数据
36. return {
37. total:total
38. }
39. }
40. // 直接给exports赋值是不能导出的
41. // exports = calc
42. // 使用exports只能以属性的方式导出内容
43. exports.calc = calc
44. })
查看其他源代码请点击 效果演示