为了账号安全,请及时绑定邮箱和手机立即绑定

Module

标签:
Html5

Module的基本用法

1.什么时候要加type = ‘module’

答:只要你会用到import或export,在使用script标签加载时侯,就要加上type = ‘module’


export  default 和对应的 import

1.认识导出和导入

答:导出的东西可以被导入(import),并访问到

    一个模块没有导出,也可以将其导入,被导入的代码都会执行一遍,也仅会执行一遍

2.基本用法

  const age = 18;     export  default age;   //导出

3.一个模块只能有一个export  default 不然会报错

 <script type = "module">import age from'./module文件名.js';</script>     导入

export  和对应的 import

1.基本用法

export不能像export  default一样后面跟一个值,要跟声明或则变量

const age = 18;     export const age = 18; ;   //导出    export {age};               //还可以这样导出        <script type = "module">import {age} from'./module文件名.js';</script>     导入                       //这里的命名要加花括号,命名要和导出的值相同,不能随意命名

2.多个导出

①可以每一个都导一次,不会报错

②第二种方法

const age = 18; function fun(){}; export {age,fun};     //中间用逗号分隔 ②第二种方法  <script type = "module">              import {age,fun} from'./module文件名.js';     //导入多个 </script>

3.导出导入时起别名

export {age,fun as func};      //导出前起别名 ,用as import {age,fun as func} from'./module文件名.js';     //导入后起别名,用as

4.整体导入

答:会导入所有的输出,包括expoer  default导出的

import *as obj from'./module文件名.js';   //*号表示全部的,然后用as给他起一个名,这个就会成为一个对象,方法都在这个对象里面

5.同时导入      两个导出方式,在一起导入

import age,{age2,fun} from'./module文件名.js'; //把两个放到一个语句,export  default在前‘age’,export 在后‘{age2,fun}’,不然就会报错


Module的注意事项

1.模块顶层的this指向

答:在模块中,顶层的this指向undefined

2.import 关键字和import()函数

import命令具有提升效果,会提升到整个模块的头部,率先执行

答:import执行的时候,代码还没有执行, mport和export命令只能在模块的顶层,不能在代码中执行

console.log('沙发'); console.log('ab'); import'./module.js';            //先执行这一句,

3.导入和导出的复合写法

复合写法导出,无法在当前的模块中使用

export {age} from './module.is';


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消