Require.JS学习

首先得把下载好的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模块加载

require模块加载

 m.js

  1. // var number = 1
  2. // 全局作用域一直存在 除非页面关闭或跳转到其他页面含刷新
  3. //  全局作用域是页面级 而不是网站级的
  4. // define是require.js提供的模块定义函数
  5. // 在这个函数中可以定义模块 方法是 调用define 给它传一个参数
  6. // 模块的所有代码都写在这个函数中 模块代码在函数作用域中 不会干扰、污染全局作用域
  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配置

这里不同目录的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. // })
  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-css

在使用require.js的时候，想要在其中设置css样式的话需要require-css插件，具体的实现方法和代码请点击下面的演示效果，按照上图的文件结构修改地址查看源代码。

演示效果

实践 - 工资计算器

使用上次做的工资计算器进行使用require.js修改。

只修改了工资总额的计算，其他的同理。

require改写工资计算器

main.js

  1. require(['jquery','gongzi'],function($,$$){
  2.     // $$计算工资数据
  3.     console.dir($$)
  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
  14.           var data = $$.calc(jishu,jixiao,jiangjin)
  15.           console.log(data)
  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. })

查看其他源代码请点击 效果演示