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 基础知识汇总 (十五)的更多相关文章

  1. javaScript 基础知识汇总(五)

    1.垃圾回收 JavaScript 的内存管理是自动的,不能强制执行或者阻止执行 可达性 JavaScript中主要的内存管理概念是可达性. 什么是可达性? 定义一个对象 let user = { n ...

  2. JavaScript 基础知识汇总目录

    一.标签.代码结构.现代模式.变量.数据类型.类型转换 GO 二.运算符.值的比较.交互.条件运算符.逻辑运算符 GO 三.循环 while 和 for .switch语句.函数.函数表达式和箭头函数 ...

  3. javaScript 基础知识汇总 (十)

    1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...

  4. javaScript 基础知识汇总 (十二)

    1.属性的标志和描述符 属性的标志 对象属性除value外还有三个特殊属性,即标志 writable ----如果为true,则可以修改,否则它只是只读的. enumerable ----如果为tru ...

  5. javaScript 基础知识汇总 (十四)

    1.回调 什么是回调? 个人理解,让函数有序的执行. 示例: function loadScript(src,callback){ let script = document.createElemen ...

  6. JavaScript基础知识汇总

    1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...

  7. javascript基础学习(十五)

    javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的sec ...

  8. javaScript 基础知识汇总(三)

    1.循环:while 和 for while 循环 while(condition){ //代码 循环体 } do ... while  循环 let i =0; do { //循环体 }while( ...

  9. javaScript 基础知识汇总(六)

    1.基本类型与对象的区别 基本类型:是原始类型的中的一种值. 在JavaScript中有6中基本类型:string number  boolean  symbol  null  undefined 对 ...

随机推荐

  1. JavaScript学习总结(五)原型和原型链详解

    转自:http://segmentfault.com/a/1190000000662547 私有变量和函数 在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量 ...

  2. Mybatis 常见面试题

    1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...

  3. LG_3457_[POI2007]POW-The Flood

    题目描述 Description 你手头有一张该市的地图.这张地图是边长为 m∗n 的矩形,被划分为m∗n个1∗1的小正方形.对于每个小正方形,地图上已经标注了它的海拔高度以及它是否是该市的一个组成部 ...

  4. 与项目欧拉速度比较:C vs Python与Erlang vs Haskell

    我从问题#12 ProjectEuler作为编程练习,并比较我在C,Python,Erlang和Haskell中的实现(当然不是最优)实现.为了获得更高的执行时间,我搜索了第一个有1000个以上因子的 ...

  5. java 通过数据库名获得 该数据所有的表名以及字段名、字段类型

    package com.nf.lc.sql_meta_data; import java.sql.*; import java.util.HashMap; import java.util.Map; ...

  6. 数位dp对于状态描述与发现的一些感悟

    今天刷的数位dp 第一题看了题解以后知道了数位dp的基本板子,写数位dp的方式(运用记忆化递归的方法)已经基本固定. 那么接下来的难点主要还是对于题目描述的问题,如何抽象成dp中的状态.就今天刷的题来 ...

  7. test 5.1 高精度小数(10分)

    请写一个程序,输入一个分数,计算出它的小数形式.无论是否可以除尽,输出最多小数点后200位. 题目内容 由于计算机内部表达方式的限制,浮点运算都有精度问题,为了得到高精度的计算结果,就需要自己设计实现 ...

  8. 【年度开源、工具合集】牛津计划,DMTK,Graph Engine…提高你的工作效率!

    本篇合集包括以下三个部分的内容: 1.微软亚洲研究院过去一年的所有开源合集,如分布式机器学习工具包DMTK等. 2.利用微软研究院的技术提高工作效率的工具合集,如让没有机器学习背景的开发人员也能开发出 ...

  9. P1102 A-B 数对

    P1102题库链接:https://www.luogu.org/problem/P1102 难度:普及- 算法标签:模拟,数论,排序,HASH,概率论,二分查找 1.朴素 O(n^2) 得分76 将输 ...

  10. 7-40 jmu-python-统计成绩 (15 分)

    输入一批学生成绩,计算平均成绩,并统计不及格学生人数. 输入格式: 每行输入一个数据,输入数据为负数结束输入 输出格式: 平均分=XX,不及格人数=XX,其中XX表示对应数据.如果没有学生数据,输出没 ...