javaScript 基础知识汇总 （十五）
1、模块简介
什么是模块：
模块就是一个文件，一个脚本，通过关键字export 和 import 交换模块之间的功能。
export 关键字表示在当前模块之外可以访问的变量和功能。
import 关键字允许从其他模块中导入一些诸如函数之类的功能。
使用示例：
文件 say.js
export function sayHi(user)
return `Hello ,${user}!`;
}
文件index.html
<!doctype html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John");
</script>
核心模块功能
1)始终使用 use strict
2)模块级作用域
每个模块都有自己的作用域
3)模块代码仅在第一次导入时解析
顶级 “this" 是未定义的（undefined）
在模块中的this与模块中的区别是 普通脚本中的this 是window 而模块中的this则是undefined
<script>
alert(this);//window
</script>
<script type = "moudle">
alert(this);//undefined
</script>
模块脚本是延迟解析的
- 外部模块脚本
<script type="module" src="...">不会阻塞 HTML 的解析，它们与其他资源并行加载。 - 直到 HTML 文档完全解析渲染后（即使模块脚本比 HTML 先加载完成），模块脚本才会开始运行。
- 执行脚本的相对顺序：在前面的先执行。
不允许裸模块
import {sayHi} from 'sayHi'; // Error，“裸”模块 // 模块必须提供路径，例如 './sayHi.js'
2、模块的导入导出
声明前导出
// 导出数组
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 导出 const 声明的变量
export const MODULES_BECAME_STANDARD_YEAR = ; // 导出类
export class User {
constructor(name) {
this.name = name;
}
}
声明后导出
function sayHi(User){
alert(`Hello,${User}!`);
}
fucntion sayBye(user)
alert(`bye,${user}!`);
}
export{sayHi,sayBye};
指明导入的内容
//javaScript 基础知识汇总 （十五）的更多相关文章
- javaScript 基础知识汇总（五）
1.垃圾回收 JavaScript 的内存管理是自动的,不能强制执行或者阻止执行 可达性 JavaScript中主要的内存管理概念是可达性. 什么是可达性? 定义一个对象 let user = { n ...
- JavaScript 基础知识汇总目录
一.标签.代码结构.现代模式.变量.数据类型.类型转换 GO 二.运算符.值的比较.交互.条件运算符.逻辑运算符 GO 三.循环 while 和 for .switch语句.函数.函数表达式和箭头函数 ...
- javaScript 基础知识汇总 （十）
1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...
- javaScript 基础知识汇总 （十二）
1.属性的标志和描述符 属性的标志 对象属性除value外还有三个特殊属性,即标志 writable ----如果为true,则可以修改,否则它只是只读的. enumerable ----如果为tru ...
- javaScript 基础知识汇总 （十四）
1.回调 什么是回调? 个人理解,让函数有序的执行. 示例: function loadScript(src,callback){ let script = document.createElemen ...
- JavaScript基础知识汇总
1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...
- javascript基础学习（十五）
javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的sec ...
- javaScript 基础知识汇总（三）
1.循环:while 和 for while 循环 while(condition){ //代码 循环体 } do ... while 循环 let i =0; do { //循环体 }while( ...
- javaScript 基础知识汇总（六）
1.基本类型与对象的区别 基本类型:是原始类型的中的一种值. 在JavaScript中有6中基本类型:string number boolean symbol null undefined 对 ...
随机推荐
- Archives: 2013/6
OpenStack环境搭建 这一步有两个选择: 一种就是正统的真实搭建,所有都按生产环境来部署,费时费力. 还有一种就是官方推荐的一键安装DevStack,直接安装最新的版本,体验最新的特性. 至于如 ...
- haproxy笔记之六:负载均衡MySQL服务的配置示例
#--------------------------------------------------------------------- # Global settings #---------- ...
- Flash Builder 使用
1. 解决编译慢的问题:用记事本打开安装目录下的 FlashBuilder.ini ,将里面设置的容量都扩大一半,如-Xms256m改为 -Xms512m,另外几项类似修改: 定位到相应版本的sdks ...
- 在 mac osx 上安装OpenOffice并以服务的方式启动
OpenOffice是Apache基金会旗下的一款先进的开源办公软件套件,包含文本文档.电子表格.演示文稿.绘图.数据库等.包含Microsoft office所有功能.它不仅可以作为桌面应用供普通用 ...
- Java ERROR JDWP Unable to get JNI 1.2 environment, jvm
Java: ERROR: JDWP Unable to get JNI 1.2 environment, jvm->GetEnv() return code = -2 DWP exit erro ...
- springboot oauth 鉴权之——授权码authorization_code鉴权
近期一直在研究鉴权方面的各种案例,这几天有空,写一波总结及经验. 第一步:什么是 OAuth鉴权 OAuth2是工业标准的授权协议.OAuth2取代了在2006创建的原始OAuthTM协议所做的工作. ...
- 你还记得2017年火爆的VR街机店，这一年他们过得还好吗？
对于当下太过急于成功.一夜暴富的人们来说,似乎总是会急不可耐地去抓住每一个有可能成为大势的风口.在这份普遍存在的浮躁心理下,蕴含着极大的不确定性--既让大众认识到太多的创新产品和服务,也让很多参与者痛 ...
- failed to load main-class manifest attribute(运行jar包出错)
原因描述:MANIFEST.MF文件中的Main-Class配置不正确或格式不正确 检查方式:以WinRarR的方式打开jar包,如图所示, 点击进入箭头所指的META-INF文件夹 将MAN ...
- Python测试开发-创建模态框及保存数据
Python测试开发-创建模态框及保存数据 原创: fin 测试开发社区 前天 什么是模态框? 模态框是指的在覆盖在父窗体上的子窗体.可用来做交互,我们经常会看到模态框用来登录.确定等等,到底是怎 ...
- TesterHome创始人思寒：如何从手工测试进阶自动化测试？十余年经验分享
做测试十多年,有不少人问过我下面问题: 现在的手工测试真的不行了吗? 测试工程师,三年多快四年的经验,入门自动化测试需要多久? 自学自动化测试到底需要学哪些东西? 不得不说,随着行业的竞争加剧,互 ...