es6导入导出

222 阅读2分钟

在html页面通过 script 标签导入,script 标签需要加上属性 type="module" 。
默认导入导出方式
js 文件默认到处方式,使用 export default 导出一个对象 ,使用 import obj from './1.js',其中 obj 是变量名,可任意取,from 后面的是 导入的js文件路径。

/* 默认导出 */
export default {
    name:'张三'
}

<script type="module">
        /* 默认导入 名字可以任意取*/
        import obj from './1.js'
        console.log(obj)
</script>

命名式导入导出
命名式导出必须要let 或者 const 或者 var 一个变量,可以定义一个变量 export 导出一个,也可以先定义多个变量,在export {} 的格式同时导出,注意:这种导出 {} 只是一种格式 并不是导出一个对象,里面的写法也不是 es6的简写的方式 仅仅代表一种导出的格式。
命名式导入必须要使用 {} 里面的变量名字必须保持一致,导入和导出的顺序可以不一致。
在导入导出时使用 as 变量名可以修改变量名,注意:使用时须使用修改后的变量名。 导出多个变量后,在导入时使用 * as 变量名获得的是一个模块化对象。 export 和 export default 区别:export可以导出多个变量 导出的变量必须要导入的保持一致还需要加上{}; export default只能导出一个对象 不需要加上{} 导入的名字可以自定义。

/* 命名式导入导出 必须要let 或者 const 或者 var 一个变量 */
/* 可以导出多个 */

/* 第一种方式 */
// export let a = '我爱js'

// export const obj = {
//     name:'李四'
// }

// export function fn(){
//     console.log('fn')
// }

/* 第二种方式 */
let a = '我爱js'

const obj = {
    name:'李四'
}

function fn(){
    console.log('fn')
}

/* 这种导出 {} 只是一种格式 并不是导出一个对象
里面的写法也不是 es6的简写的方式 仅仅代表一种导出的格式*/

/* 导入和导出的顺序可以不一致 但是命名必须保持一致 */
export { obj,fn,a }
复制代码

/* 命名式导入必须要使用 {} 里面的变量名字必须保持一致 */
import {a,obj,fn} from './2.js'
console.log(a)
console.log(obj)
fn()
复制代码

<script type="module">
    /* 使用  * as 变量名 导入多个变量*/
    /* 在导入2.js的时候 2.js的内容就会执行一遍 */
    import * as all from './2.js'
    /* 导入同一个js多次,只会执行一遍 */
    // import * as all2 from './2.js'
    // import * as all3 from './2.js'

    /* all 是一个模块化对象 */
    console.log( all.a )
    console.log( all.obj )
    all.fn()      
</script>
复制代码
复制代码