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 对 ...
随机推荐
- JavaScript学习总结（五）原型和原型链详解
转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量 ...
- Mybatis 常见面试题
1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...
- LG_3457_[POI2007]POW-The Flood
题目描述 Description 你手头有一张该市的地图.这张地图是边长为 m∗n 的矩形,被划分为m∗n个1∗1的小正方形.对于每个小正方形,地图上已经标注了它的海拔高度以及它是否是该市的一个组成部 ...
- 与项目欧拉速度比较：C vs Python与Erlang vs Haskell
我从问题#12 ProjectEuler作为编程练习,并比较我在C,Python,Erlang和Haskell中的实现(当然不是最优)实现.为了获得更高的执行时间,我搜索了第一个有1000个以上因子的 ...
- java 通过数据库名获得 该数据所有的表名以及字段名、字段类型
package com.nf.lc.sql_meta_data; import java.sql.*; import java.util.HashMap; import java.util.Map; ...
- 数位dp对于状态描述与发现的一些感悟
今天刷的数位dp 第一题看了题解以后知道了数位dp的基本板子,写数位dp的方式(运用记忆化递归的方法)已经基本固定. 那么接下来的难点主要还是对于题目描述的问题,如何抽象成dp中的状态.就今天刷的题来 ...
- test 5.1 高精度小数（10分）
请写一个程序,输入一个分数,计算出它的小数形式.无论是否可以除尽,输出最多小数点后200位. 题目内容 由于计算机内部表达方式的限制,浮点运算都有精度问题,为了得到高精度的计算结果,就需要自己设计实现 ...
- 【年度开源、工具合集】牛津计划，DMTK，Graph Engine…提高你的工作效率！
本篇合集包括以下三个部分的内容: 1.微软亚洲研究院过去一年的所有开源合集,如分布式机器学习工具包DMTK等. 2.利用微软研究院的技术提高工作效率的工具合集,如让没有机器学习背景的开发人员也能开发出 ...
- P1102 A-B 数对
P1102题库链接:https://www.luogu.org/problem/P1102 难度:普及- 算法标签:模拟,数论,排序,HASH,概率论,二分查找 1.朴素 O(n^2) 得分76 将输 ...
- 7-40 jmu-python-统计成绩 (15 分)
输入一批学生成绩,计算平均成绩,并统计不及格学生人数. 输入格式: 每行输入一个数据,输入数据为负数结束输入 输出格式: 平均分=XX,不及格人数=XX,其中XX表示对应数据.如果没有学生数据,输出没 ...