es模块化导入和导出

1,830 阅读1分钟

y由于js文件过多,导致一些变量名相同导致冲突。以前大多用闭包形式解决。当其他文件要引用此文件的变量方法时定义一个对象里面包含要传出的变量和方法,并把对象进行返回。这就是最基本的模块化封装。现在越来越多人开始使用模块化思想开发。

ES模块化的导入导出

导出用export,

导出的方式1

const name=‘yu’;

export{

    name

}

导出的方式2

export onst name=‘yu’;

导出函数/类

export function aaa(){

    name=‘123’

}

导出的方式3   :

当导出的变量和方法希望别人调用时可以进行重新命名用export default,且只能导出一个变量或者方法

const name='111'

export default name

export  default function(){

name=‘123’

}

导入方法:

导入时必须在html文件里导入js文件时定义type类型为module

<script src='.mo.js' type='module'></script>

导入使用import

直接导入export定义的变量或者方法

import {name,aaa} form "./mo.js"

导入export default的内容

import add from "./mo.js"    add为新定义的名字

如果一次导入的东西太多可以统一全部导入

import *as aaa from "./mo.js"     aaa为定义接收的名字,调用时写aaa.name

console .log(aaa.name);