目录

11-JavaScrpit-模块化

优质
小牛编辑
134浏览
2023-12-01

模块化

  • 不使用模块化
  • 使用模块化
  • AMD
  • CommonJS
  • ES6

不使用模块化

  • util getFormatDate函数
  • a-util.js 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(data) {
  9. //返回
  10. return getFormatDate(date,2);
  11. }
  12. // a.js
  13. var dt = new Date()
  14. console.log(aGetFormatDate(dt));
  • 使用
  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.js ,但是他知道还需要依赖于util.js吗? -->

使用模块化

  1. //util.js
  2. export{
  3. getFormatDate:function (data,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. //那两个函数,没必要做成全局变量,不会带来污染和覆盖

#