Js模塊化

Js模塊化規範：

一：CommonJS

1，只有node環境下支持；

2，導出：

2.1，使用exports或module.exports，等號導出

2.2，導出原理：

因爲js的對象複製僅僅是改變指針位置，所以exports與module.exports寫法一樣；

exports寫法上exports.a=xxx,exports.b=xxx，逐個給exports對象設置值，可以寫多個，

module.exports={a:xxx,b:xxx}，導出是一個對象;

    //原理理解爲每個模塊爲一個函數，自動輸入一個module參數，require相當於執行這個函數：
        function(module){
            module.exports = {};
            var exports = module.exports;
            //模塊的代碼
            return module.exports
        }

3，導入

3.1，使用require導入，導入路徑必須爲相對路徑，即以./或../開頭

3.2，模塊後綴爲.js可以省略

3.3，導入模塊存在緩存，重複導入會使用第一次導入的值

 

二，ES6模塊化

1，導出使用export或export default；

2，導出的接受的變量不能更改；

3，export基本導出可以使用多個，export default默認導出只有一個；

4，基本導出有聲明，

        export var a = 1;
        export var b = function(){}；
        export function fun(){};
        var c =3;
        export {c};
        export {c as temp};

5，默認導出一般用export default{}

        export default 3;
        export default function(){};
        export {c as default};
        export {a,b,c as deafault};a,b基本導出，c默認導出

6，導入的是一個對象，導入的default不能作爲變量名；

7，導入存在緩存，導入不能寫到條件或判斷裏面，CommonJS可以；

        {a:xxx,b:xxx,default:xxx}
        import {a,b} from 'xxx';
        import c,{a,b} from 'xxx';  //其中導入的c是default
        import * as obj from 'xxx;  //導入的所有的東西放到obj裏面