ES6(7)、模块

作者: 飞天小猪_pig | 来源:发表于2022-04-13 01:04 被阅读0次

    1、使用导出导入模块,必须在script标签写清楚类型 type='module'

    HTML:

    <body>
       <script type='module' src="main.js"></script>
    </body>
    

    2、模块写完,就需要进行导出(export),如module.js:

    let name="小明"
    let age=18
    let module=function(){
      alert(`我是${name},我今年${age}`)
    }
    
    export default module   //默认导出module
    

    3、需要用到某个模块,就需要进行导入(import),如main.js:

    import module from './module.js'  //导入模块
    
    setTimeout(function(){
       module()
    },3000)
    
    一、常见的导入方式(import)
    import xxx from "module.js"  //默认导出情况,导入xxx名字随意
    import * as xx from "module.js" // *将所有内容导入,并挂载在xx上面
    import { name } from "module.js" // 导出是name,导入就可以写name
    import {  name as  name2 } from "module.js" // 可以对导入name进行重新命名为name2
    import { name , age ,module} from "module.js"  //可以选择全部导入,也可以部分导入
    import {  name , age as _age2} from "module.js"  // 可以对导入部分进行重命名
    
    二、常见的导出方式(export)
    export default module  //默认导出
    export default {name,age,module}  //导出多个变量
    

    注意:由于历史原因ES6之前不能使用模块这个功能,所有我们如果要在浏览器上使用模块功能,可以使用安装parcel这个库进行。

    相关文章

      网友评论

        本文标题:ES6(7)、模块

        本文链接:https://www.haomeiwen.com/subject/hxcnsrtx.html