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. 自主知识产权受热捧 瑞星ESM SOHO版全力护卫小微企业
			
    小微企业现在可以说是我国国民经济中最重要的组成部分,在总产值.利税.解决就业等方面,都在为国家积极贡献着自己的力量.但在小微企业一片欣欣向荣的背后,却有着难言之隐--那就是困扰着广大小微企业多年的企业 ...
    
			
    2. 
						
  2. 关于使用css变量实现主题的切换效果
			
    现在要实现网页主题的切换成本较小的一种方案就是使用css的变量来实现 HTML 在HTML的body标签上先定义一个id元素属性 <body id="sm-theme"> ...
    
			
    3. 
						
  3. JSP_EL的回顾
			
    在 JSP 页面中,使用标签库代替传统的 Java 片段语言来实现页面的显示逻辑已经不是新技术了,然而,由自定义标签很容易造成重复定义和非标准的实现.鉴于此,出现了 JSTL ( JSP Standa ...
    
			
    4. 
						
  4. Dubbo与Nginx微服务架构
			
    Dubbo的负载均衡已经是服务层面的了,和nginx的负载均衡还在http请求层面完全不同.至于二者哪个优秀,当然没办法直接比较. 涉及到负载均衡就涉及到你的业务,根据业务来选择才是最适合的. dub ...
    
			
    5. 
						
  5. if分支判断
			
    # 控制语句 分支 循环语句 # 判断语句 if ..elif..else # if 条件语句(比较 逻辑 成员运算) # 空数据 == False # 非空数据 == True age = 20 i ...
    
			
    6. 
						
  6. poi报表导出4.1.0版本工具类 导出并下载
			
    这一段时间,由于项目上线基于稳定,所以我这边在基于我们一期迭代的分支上优化一部分我们之前没有做的功能,报表导出.本身之前用的是3.5的版本,但是由于同事要写导入,写的代码只有4.1.0的版本支持,所以 ...
    
			
    7. 
						
  7. python保留2位小数
			
    1 代码: ​ 2 运行结果: ​ 3 其中字符串形式的:print('%.2f' % (x/y))方式最好
    
			
    8. 
						
  8. 【转载】Scrapy安装及demo测试笔记
			
    Scrapy安装及demo测试笔记 原创 2016年09月01日 16:34:00 标签: scrapy / python   Scrapy安装及demo测试笔记 一.环境搭建 1. 安装scrapy ...
    
			
    9. 
						
  9. 三星HTC价格跳水 安卓旗舰会否崩塌？
			
    安卓旗舰会否崩塌?" title="三星HTC价格跳水 安卓旗舰会否崩塌?"> 官方降价,对于国产手机来说似乎是家常便饭.小米.魅族等,总会时隔几个月就将自家旗舰机 ...
    
			
    10. 
						
  10. 实现子数组和绝对值差最小 - Objective-C
			
    类似于背包问题,前提条件是数组全是正整数和0,先求和Sum,再从子数组中找出接近Sum/2的子数组 @interface TempState : NSObject @property (nonatom ...
    
			
    11.