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. }
  8. //引入 a-util.js
  9.  function aGetFormatDate(date) {
  10.    //要求返回 2017年6月15日 格式
  11.    return getFormatDate(date, 2)
  12.  }
  14. // 引入 a.js
  15. var dt = new Date()
  16. console.log(aGetFormatDate (dt))


2.使用模块化

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

3.AMD

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

  1. 使用require.js
  3. // util.jS
  4. define(function () {
  5.     var util = {
  6.       getFormatDate: function (date, type) {
  7.         if (type === 1) {
  8.           return '2017-06-15'
  9.         }
  10.         if (type ===2 ) {
  11.           return '2017年6月15日'
  12.          }
  13.       }
  14.     }
  15.     return util
  16.   })
  18. // a-util.js
  19. define(['./util.js'], function (util) { 
  20.     var aUtil = {
  21.       aGetFormatDate: function (date) { 
  22.         return util.getFormatDate(date, 2)
  23.       }
  24.     }
  25.     return aUtil
  26. })
  28. // a.js
  29. define(['./a-util.js'], function (aUtil) {
  30.     var a = {
  31.       printDate: function (date) { 
  32.         console.log(aUtil.aGetFormatDate(date))
  33.         }
  34.      }
  35.      return a
  36. })
  38. // main.js
  39. require(['./a.js'], function (a) {
  40.     var date = new Date()
  41.     a.printDate(date)
  42. })
  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. }
  13. // a-util.js
  14. var util = require('util.js')
  15. module.exports={
  16.   aGetFormatDate: function (date) { 
  17.     return util.qetFormatDate (date, 2)
  18.   }
  19. }

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

5.AMD和CommonJS对的使用场景

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