ES6中如何导入和导出模块 · PHP学习

# ES6中如何导入和导出模块在node中导入导出模块 ``` <pre class="calibre10">``` //导出（向外暴露成员） module.exports = {} //导入 var 名称 = require('模块标识符') ``` ``` 在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等 ## **在ES6中导出模块（向外暴露成员）** ``` <pre class="calibre10">``` //使用export default 和 export 向外暴露成员 //在一个模块中，export default 只允许向外暴露一次,即在test.js只能存在一次export default // test.js export default { name: 'zs', age: 20 } //或者 var info = { name: 'zs', age: 20 } export default info ``` ``` ## **ES6中导入模块** ``` <pre class="calibre10">``` import *** from *** import person from './test.js' console.log(person);//{age:20,name:'zs'} ``` ``` 在上面ES6导出模块除了export default 还可以使用export导出模块，且export可在导出多次 ``` <pre class="calibre10">``` export var name= 'zs' export var age =20 //导出函数 export function func(b){ return b+1 } export let words = 'hello world!!!' //export function output() { } ``` ``` 接收export导出的模块 ``` <pre class="calibre10">``` import {name, age as age1, func,words} from './test.js' console.log(name+ '=======' + age1); console.log(func(6));//7 console.log(words);//'hello world!!! ``` ``` export default 与export可以在同一模块同时导出 ``` <pre class="calibre10">``` // test.js var info = { name: 'zs', age: 20 } export default info export var title = '小星星' export var content = '哈哈哈' ``` ``` 接收test.js导出的模块 ``` <pre class="calibre10">``` import person, {title, content as content1} from './test.js' console.log(person); console.log(title + '=======' + content1); ``` ``` **export default的变种方式** 如果不使用export default ，使用如下指令也可以。 let是当前作用域下声明变量 ``` <pre class="calibre10">``` let info={ name:'zx', age:20 } export(info); ``` ``` 注意: 在HTML中 1、在html页面中导入导出需要将javascript 的type改为module 2、导入的是export default{}由于一个模块只能有一个所以不能加{} 3、导入时需要加.js ``` <pre class="calibre17">``` // test.js //默认输出 export default { name: 'dash', sayHi: function() { console.log("Hi!"); } } // test.html 需要加module <script type="module" src="./test.js"></script> <script type="module"> //导入模块错误方法export default时不能加{} import {user} from './test.js'; //导入模块正确的方法(.html必须加上.js后缀 .js中导入则不需要这个？) import user from './test.js'; //引用模块中的变量和方法 console.log(user.name); user.sayHi(); </script> ``` ```