• 11-JavaScrpit-模块化
    • 模块化
      • 不使用模块化
      • 使用模块化
  • #

    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. //那两个函数，没必要做成全局变量，不会带来污染和覆盖

    #