11-JavaScrpit-模块化

模块化

  • 不使用模块化
  • 使用模块化
  • 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));
  21. //直接‘<script src="a.js"></script>’,其他的根据依赖关系自动引用
  22. //那两个函数，没必要做成全局变量，不会带来污染和覆盖

#