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 对 ...
随机推荐
- C# 开启线程的几种方式
1.异步委托开启线程 public static void Main(string[] args) { Action<int,int> a=add; a.BeginInvoke(,,nul ...
- abrupt|promising
N-VAR 典礼;(宗教)仪式A ritual is a religious service or other ceremony which involves a series of actions ...
- Nginx笔记总结七:root和alias文件路径配置
1. root path 配置段:http.server.location.if location ~ ^/weblogs/ { root /data/weglogs/www.ttlsa.com; a ...
- <USACO07JAN>解决问题Problem Solvingの思路
日常为dp贡献脑细胞 #include<iostream> #include<cmath> #include<cstdio> #include<cstdlib ...
- 将js进行到底：node学习9
node.js数据库篇--Mongoose ODM 介绍mongoose 几乎所有的语言都有原生数据库连接驱动,这个我们上一回已经了解了,比如java的jdbc,mysql-connector,但是实 ...
- JS截取字符串方法集合
使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png&qu ...
- 中国的规模优势，有望帮助AI芯片后来者居上？
芯片一直是个神奇的东西,表面上看是电脑.笔记本.智能手机改变了世界,其实,真正改变世界的硬件内核是芯片,芯片相关的技术才是科技界最实用.最浪漫的基础技术,也正因如此,谁掌握了芯片基础技术,谁就能立于 ...
- Google Play来华 象征意义 跳板而已
Play来华 象征意义 跳板而已" title="Google Play来华 象征意义 跳板而已"> 每当有大事发生,伴随的就是接连不断的小道消息传出来.就像苹 ...
- kafka&&kafka-manager部署安装
一.zk集群部署 二.kafka部署安装 1.创建kafka用户和日志路径,(直接执行) groupadd kafka useradd -g kafka kafka mkdir -p /web/kaf ...
- Yuur persistent XSS
XSS发生在评论处/帖子正文处 index.php:37-38行 $sql="insert into topic set tid='$tid',title='$title',nickname ...