JS-ES6語法運用

import導入模塊，js的模塊化開發

瀏覽器使用ES6模塊化語法（使用module時js代碼自動運行嚴格模式）：

<script type="module" src="b.js"></script>
<script nomodule src="c.js"></script> //向后兼容 當瀏覽器不支持es6語法運行不了b.js時 執行此代碼

1、export與import (b導出a引入)

// b.js 多個導出
export var name = 'yangching';
export function add (x,y) {
    return x+y  
};

// a.js 引入
import {name} from 'b.js'                //單個引入
import {add as newAdd} from 'b.js'      // 單個引入並重命名
console.log(name) //yanching
console.lo(newAdd(1,2)) // 3

// b.js 一起導出
var name = 'yangching';
function add (x,y) {
    return x+y  
};
export {name,add}

 // a.js 一起引入
import {name,add} from 'b.js';
console.log(name)  // yangching

import * as moduleB from 'b.js';    
console.log(moduleB.name) // yangching

 

2、export defult 和 import （b導出a引入）
本質：export default輸出一個叫做default的變量，然后系統允許你為它取任意名字。所以可以為import的模塊起任何變量名，且不需要用大括號包含

 

// b.js 導出
var name = 'yangching';
export default name

// a.js 引入
import bb from 'b.js'
console.log(bb)
import * as lname from 'b.js'
console.log(lname)

 

總結：

1、export與export default均可用於導出常量、函數、文件、模塊等
2、在一個文件或模塊中，export、import可以有多個；export default僅有一個
3、通過export方式導出，在導入時要加{ }；export default則不需要
4、輸出單個值，使用export default；輸出多個值，使用export
5、export default與普通的export不要同時使用