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 对 ...
随机推荐
- UAC table
CREATE TABLE `sys_dept` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '编号', `name` varchar(50) D ...
- 【待填坑】LG_2467_[SDOI2010]地精部落
不错的dp题...思维难度和码量成反比...
- IPFS私有网络搭建总结
参考:https://mp.weixin.qq.com/s/IKcXAjcX_BxI4siBeVsJUw 测试环境 节点A.B.C为局域网内三台部署了IPFS的节点,A为win7,B为Redhat L ...
- hexo NexT主题首页title链接的优化
在默认设置下,文章链接都会改变,不利于搜索引擎收录,也不利于分享 更改index.swig文件 文件路径是your-hexo-sitethemesnextlayout,将下面代码 1 {% block ...
- __filename意思
__filename 表示当前正在执行的脚本的文件名.它将输出文件所在位置的绝对路径,且和命令行参数所指定的文件名不一定相同. 如果在模块中,返回的值是模块文件的路径.
- 自研接口测试平台（Django2+Bootstrap3+Unittest）
自研接口测试平台(Django2+Bootstrap3+Unittest) HttpRuleTest是一款面向 HTTP 协议的通用测试框架,只需web端维护接口测试数据,即可实现自动化测试.监控.数 ...
- powershell加KeePass实现，加密服务器密码清单文件
powershell加KeePass实现,加密服务器清单文件 powershell传教士翻译,改写. 2020-02-27 原文: https://www.altaro.com/msp-doj ...
- 二进制原码、反码、补码以及Java中的<< 和 >> 和 >>> 详细分析
1.计算机二进制系统中最小单位bit 在计算机二进制系统中: bit (位) :数据存储的最小单元. 简记为b,也称为比特(bit),每个二进制数字0或1就是一个位(bit),其中,每 8bit = ...
- 从头认识js-基本概念（关键字，保留字，数据类型）
语法 ECMAScript的语法大量借鉴了C及其他类C语言(如Java和Perl)的语法.因此,熟悉这些语言的开发人员在接受ECMSAScript更加宽松的语法时,一定会有一种轻松自在的感觉. 区分大 ...
- AE脚本：把SubRip/SRT/TXT/VTT字幕导入到AE
脚本介绍 如果您需要在视频中嵌入字幕以进行网络或磁带传送,那么这个脚本则非常有用.可以将SubRip/SRT/TXT/VTT字幕格式文件通过 pt_ImportSubtitles脚本直接加载到AE软件 ...