1.不使用模块化的情况

util.js getFormatDate函数.
a-utiljs aGetFormatDate函数,使用getFormatDate
a.js aGetFormatDate

  1. // 引入 util.js
  2. function getFormatDate(date, type) {
  3. // type === 1 返回 2017-06-15
  4. // type === 2 返回 2017年6月15日格}
  5. // ....
  6. }
  7. //引入 a-util.js
  8. function aGetFormatDate(date) {
  9. //要求返回 2017年6月15日 格式
  10. return getFormatDate(date, 2)
  11. }
  12. // 引入 a.js
  13. var dt = new Date()
  14. console.log(aGetFormatDate (dt))


2.使用模块化

  1. <script src="util.js"></script>
  2. <script src="a-util.js"></script>
  3. <script src="a.js"></script>
  4. <!--1,这些代码中的函数必须是全局变量,才能暴露给使用方。全局变量污染->
  5. <!--2, a.js 知道要引用 a-util.is,但是他知道还需要依赖于 util.is吗?-->
  1. // 引入 util.js
  2. export {
  3. getFormatDate:function(date, type) {
  4. // type === 1 返回 2017-06-15
  5. // type === 2 返回 2017年6月15日格}
  6. }
  7. }
  8. //引入 a-util.js
  9. var getFormatDate = require('util.js')
  10. export {
  11. aGetFormatDate: function (date) {
  12. //要求返回 2017年6月15日 格式
  13. return getFormatDate(date, 2)
  14. }
  15. }
  16. // 引入 a.js
  17. var aGetFormatDate = require('a-util.js')
  18. var dt = new Date()
  19. console.log(aGetFormatDate (dt))
  20. //直接'<script src="a.js"><script>',其他的根据依赖关系自动引用
  21. //那两个函数,没必要做成全局变量,不会带来污染和覆盖

3.AMD

require.js
全局 define 函数
全局 require 函数
依赖JS会自动、异步加载

  1. 使用require.js
  2. // util.jS
  3. define(function () {
  4. var util = {
  5. getFormatDate: function (date, type) {
  6. if (type === 1) {
  7. return '2017-06-15'
  8. }
  9. if (type ===2 ) {
  10. return '2017年6月15日'
  11. }
  12. }
  13. }
  14. return util
  15. })
  16. // a-util.js
  17. define(['./util.js'], function (util) {
  18. var aUtil = {
  19. aGetFormatDate: function (date) {
  20. return util.getFormatDate(date, 2)
  21. }
  22. }
  23. return aUtil
  24. })
  25. // a.js
  26. define(['./a-util.js'], function (aUtil) {
  27. var a = {
  28. printDate: function (date) {
  29. console.log(aUtil.aGetFormatDate(date))
  30. }
  31. }
  32. return a
  33. })
  34. // main.js
  35. require(['./a.js'], function (a) {
  36. var date = new Date()
  37. a.printDate(date)
  38. })
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <p>AMD TEST</p>
  11. <script data-main="./main.js" src="https://cdn.bootcss.com/require.js/2.3.3/require.js"></script>
  12. </body>
  13. </html>

4.CommonJS

nodejs模块化规范,现在被大量用前端,原因:
前端开发依赖的插件和库,都可以从npm中获取
构建工具的高度自动化,使得使用npm的成本非常低
CommonJS不会异步加载JS ,而是同步一次性加载出来

  1. // util.js
  2. module.exports = {
  3. getForiatDate: function (date, type) {
  4. if (type === 1) {
  5. return "2017-86-15"
  6. }
  7. if (type === 2) {
  8. return "2017年6月15日"
  9. }
  10. }
  11. }
  12. // a-util.js
  13. var util = require('util.js')
  14. module.exports={
  15. aGetFormatDate: function (date) {
  16. return util.qetFormatDate (date, 2)
  17. }
  18. }

需要构建工具支持
一般和npm一起使用

5.AMD和CommonJS对的使用场景

需要异步加载JS,使用AMD
使用了npm之后建议使用CommonJS