【js基礎】之模塊化、AMD、CommonJS

1.AMD

1. require.js
2. 全局 define 函數
3. 全局 require 函數
4. 依賴的JS會自動、異步加載

//util.js
define(function(){
    return {
        getFormatDate : function(date,type){
            if (type === 1) {
                return '2018-09-10';
            }
             if (type === 2) {
                return '2018年9月10日';
            }
        }
    }
})

//a-util.js
define(['./util.js'],function(util){
    return {
        aGetFormatDate : function(date){
            return util.getFormatDate(date,2);
        }
    }
})

//a.js
define(['./a-util.js'],function(aUtil){
    return {
        printDate: function(date){
            console.log(aUtil.aGetFormatDate(date));
        }
    }
})

//main.js
require(['./a.js'],function(a){
    var date = new Date();
    a.printDate(date);
})

//引用
<script src="/require.min.js" data-main="./main.js"></script>

2.CommonJS

//util.js
module.exports = {
    getFormatDate : function(date,type){
            if (type === 1) {
                return '2018-09-10';
            }
             if (type === 2) {
                return '2018年9月10日';
            }
     }
}

//a-util.js
var util = require('util.js')
module.exports = {
     aGetFormatDate : function(date){
            return util.getFormatDate(date,2);
     }
}

3.AMD 和 CommonJS 的使用場景

1. 須要異步加載JS,使用AMD
2. 使用了 npm 以後建議使用 CommonJS