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. 
						
  2. JavaScript 基础知识汇总目录
		
    一.标签.代码结构.现代模式.变量.数据类型.类型转换 GO 二.运算符.值的比较.交互.条件运算符.逻辑运算符 GO 三.循环 while 和 for .switch语句.函数.函数表达式和箭头函数 ...
    
		
    3. 
								
  3. javaScript 基础知识汇总 （十）
		
    1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...
    
		
    4. 
						
  4. javaScript 基础知识汇总 （十二）
		
    1.属性的标志和描述符 属性的标志 对象属性除value外还有三个特殊属性,即标志 writable ----如果为true,则可以修改,否则它只是只读的. enumerable ----如果为tru ...
    
		
    5. 
						
  5. javaScript 基础知识汇总 （十四）
		
    1.回调 什么是回调? 个人理解,让函数有序的执行. 示例: function loadScript(src,callback){ let script = document.createElemen ...
    
		
    6. 
						
  6. JavaScript基础知识汇总
		
    1. 图片热区: <img src="logo.jpg" usemap="#logo"> <map id="logo" n ...
    
		
    7. 
						
  7. javascript基础学习（十五）
		
    javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的sec ...
    
		
    8. 
						
  8. javaScript 基础知识汇总（三）
		
    1.循环:while 和 for while 循环 while(condition){ //代码 循环体 } do ... while  循环 let i =0; do { //循环体 }while( ...
    
		
    9. 
						
  9. javaScript 基础知识汇总（六）
		
    1.基本类型与对象的区别 基本类型:是原始类型的中的一种值. 在JavaScript中有6中基本类型:string number  boolean  symbol  null  undefined 对 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. miracle|
			
    N-COUNT 奇迹;出人意料的事If you say that a good event is a miracle, you mean that it is very surprising and  ...
    
			
    2. 
						
  2. Jenkins 2 如何使用 PowerShell 以及自定 build fail (指定 exit code)
			
    Jenkins 除了用來做為 CI(持續性整合) 工具外,也可以與其他 plugin 配合達成其他目的(e.g.IIS restart.檔案壓縮備份-),今天就來看看可以怎麼與 PowerShell  ...
    
			
    3. 
						
  3. 关于JavaScript中的==与！的转换问题
			
    最近遇到了一道很有趣的JavaScript试题,感觉很有趣.记录一下免得以后面试遇到 题目是: console.log([]==![],{}==!{},[]==!{},{}==![]) 这道题考察的主 ...
    
			
    4. 
						
  4. 吴裕雄--天生自然 R语言开发学习：聚类分析（续一）
			
    #-------------------------------------------------------# # R in Action (2nd ed): Chapter 16 # # Clu ...
    
			
    5. 
						
  5. SpringBoot + JPA + mariadb
			
    SpringBoot + JPA + MariaDB 源码:https://github.com/ldl326308/LiveGreen-SpringBoot.git JPA持久层方法名命名规则:
    
			
    6. 
						
  6. js 实现排序算法 -- 插入排序（Insertion Sort）
			
    原文: 十大经典排序算法(动图演示) 插入排序 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描, ...
    
			
    7. 
						
  7. 为什么就连iPhone、三星手机的电池都能出问题？
			
    近年来关于三星.苹果.华为等知名手机厂商电池爆炸的消息一直不断在媒体上报道.这在一定程度上引发了消费者的重度忧虑,也给这些知名手机厂商从一定程度上造成了信任危机.为何连这些知名品牌都无法避免手机电池的 ...
    
			
    8. 
						
  8. Appium移动自动化框架功能概括
			
    小编说:Appium 是一个移动端自动化测试开源工具,可以针对不同的平台用一套API 来编写测试用例.本文对Appium自动化测试框架的功能进行了概括. 本文选自<软件自动化测试开发>,了 ...
    
			
    9. 
						
  9. DBFlow框架的学习笔记之入门
			
    什么是DBFlow? dbflow是一款android高性的ORM数据库.可以使用在进行项目中有关数据库的操作.github下载源码 1.环境配置 先导入 apt plugin库到你的classpat ...
    
			
    10. 
						
  10. Hello World!(这不是第一篇)
			
    如题,这不是第一篇blog,但是为了表示这个闲置了1年多的blog现在被我正式启用了,我还是走个过场吧. #include <iostream> using namespace std;  ...
    
			
    11.