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. Tomcat源码解析-启动过程分析之主干流程
			
    Tomcat启动入口就在脚本startup.sh中,具体脚本可以看tomcat的源码,这个启动脚本主要用来判断环境,找到catalina.sh脚本路径,将启动参数传递给catalina.sh执行.ca ...
    
			
    2. 
						
  2. SQL提高性能
			
    1.对外键建立索引,大数据量时性能提高明显(建索引可以直接[Merge Join],否则还须在查询时生成HASH表作[Hash Join]) 2.尽量少使用inner join,使用left join ...
    
			
    3. 
						
  3. Kubernetes详解
			
    1.1 Kubernetes简介 1.1.1 什么是Kubernetes Kubernetes (通常称为K8s,K8s是将8个字母“ubernete”替换为“8”的缩写) 是一个以容器为中心的基础架 ...
    
			
    4. 
						
  4. JXJJOI2018_T1_market
			
    题目描述 某天Lemon去超市买柠檬,他发现货架上有N个柠檬,每个柠檬都有一个重量Wi和价格Ci. Lemon身上只带了S元钱,因此他想要买一个价格不超过S的柠檬回家,另外,他希望他买的那个柠檬的性价 ...
    
			
    5. 
						
  5. 公司更需要会哪种语言的工程师？​IEEE Spectrum榜单发布
			
    IEEE Spectrum 杂志发布了一年一度的编程语言排行榜,这也是他们发布的第四届编程语言 Top 榜. 据介绍,IEEE Spectrum 的排序是来自 10 个重要线上数据源的综合,例如 St ...
    
			
    6. 
						
  6. 没有admin权限如何免安装使用Node和NPM
			
    此教程只针对于在windows系统上没有admin权限和软件安装权限,但是又希望能像安装版一样使用Node和NPM的用户. 步骤一: 下载压缩版node 访问https://nodejs.org/en ...
    
			
    7. 
						
  7. angularJS进阶阶段(4)
			
    angularJS进阶阶段(4) 编译器/$compile 编译器$compile是一个AngularJS的内置服务,它负责遍历DOM树来查找匹配指令, 并调用指令的实现代码进行处理. HTML编译包 ...
    
			
    8. 
						
  8. Picaso完美兼容OkHttp3.3，缓存优化两不误 - Tamic Developer"s Blog
			
    为何在Fresco,Glide这么强大的背景下,我又想起了当初的Picasso,又为何写这篇文章?是因为最近项目采用了square公司的RxAndroid,Retrfit和OKhttp, 不得不联想到 ...
    
			
    9. 
						
  9. Python2.7错误处理FileNotFoundError报错NameError: name 'FileNotFoundError' is not defined
			
    错误信息如下: 原因是FileNotFoundError是python3.0中的写法,而Python2.7中应写为IOError.
    
			
    10. 
						
  10. 字符串匹配算法 之BF、KMP
			
    示例: 1. 已知字符串str1="acabaabaabcacaabc",求str2="abaabcac"是否在字符串str1中? 2. DNA病毒检测.已知患 ...
    
			
    11.