es6中export、export default、import的理解

export 與 import 的使用

export 與import是es6中新增模塊功能最主要的兩個命令。咱們要知道在es6中，實現了模塊功能，並且至關簡單，意在取代commonjs和AMD規範。成爲一種模塊化的通用解決方案。

其設計思想爲儘可能的靜態化，咱們能夠理解爲在加載以前就知道本身所須要依賴的是哪一個文件，而非在運行的時候才知道依賴誰。es6的那模塊不是對象，經過export輸出指令，經過import輸入。就目前來講 不用一些編譯器的話 最新版的瀏覽器是不識別import這個關鍵字的

在es6模塊中是自動採用嚴格模式的。具體條例咱們能夠參考阮一峯老師寫的es6入門中的moule模塊

最簡單的使用：

　　我是在vue-cli腳手架中進行驗證，由於其環境支持es6的語法

　　首先在src下面新建一個export文件夾 裏面新建兩個js 分別爲a.js,b.js

　　

　　a.js裏面最簡單的代碼：

      

export var a = 'my name is xiaoming';

　　而後必定要在hello模板中import該js，這裏的路徑是我本身配置的一些模板，新建的vue-cli中應該是hello模板

import {a} from '../../export/a.js';
console.log(a)

　　from後面的路徑要寫對 而後不能寫到app.vue或者main.js中由於是入口文件 裏面import都是各類依賴包

其中{}是必定要有的 

　export多個文件

var a='my name is xiaoming',b='my name is xiaohong';
export {a,b}

　　而後import

import {a,b,} from '../../export/a.js';
console.log(a,b)

　若是不想暴露變量的名稱：使用as能夠重命名關鍵字

var a='my name is xiaoming',b='my name is xiaohong';
export {a as x, b as y}

export default 的用法

export 以後加上default意指默認接口的意思，在一個文件裏面默認的只能有一個 其區別就是{} 在export中 引入須要用{}來盛放

var a='my name is xiaoming'
export default a;

import a from '../../export/a.js'; 

要是多個變量

var a='my name is xiaoming',b='this is a bird';
export default {
　　a,b
};

在須要使用的js中

import anyoneword from '../../export/a.js'
console.log(anyoneword)//一個對象裏面包含a,b兩個變量。

是否是發現和vue組件很像。　

總結 其中export和export default最大的區別就是export不限變量數 能夠一直寫，而export default  只輸出一次 並且 export出的變量想要使用必須使用{}來盛放，而export default 不須要 只要import任意一個名字來接收對象便可。　

export default能夠跟在非匿名函數以前，也能夠跟在匿名函數以前，同時也能夠是一個對象以前。

 import 

import  '**' from 'vue'直接尋找的是依賴包裏的文件

若是import '**' from './vue' 表示是同級文件下的js。