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. linux上apache的安装
			
    1.简介 Apache HTTP Server(简称Apache或httpd)是Apache软件基金会的一个开放源代码的网页服务器软件,旨在为unix,windows等操作系统中提供开源httpd服务 ...
    
			
    2. 
						
  2. python的列表list和集合set操作
			
    以下是一些python的list和set的基本操作 1.list的一些操作 list = [1, 2, 3] list.append(5) print(list) list.extend([7, 8] ...
    
			
    3. 
						
  3. 第一次提交本地代码到github上
			
    上传本地项目到github: 一.SSH方式 配置ssh 进入你要上传项目中的文件夹 1)先配置ssh,输入 ssh-keygen -t rsa -C "your_email@example ...
    
			
    4. 
						
  4. JavaScript深入浅出-闭包
			
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function (){ var localVal ...
    
			
    5. 
						
  5. iPhone X会成为苹果最短命的旗舰机型吗？
			
    最近,有媒体报道有凯基证券分析师郭明琪在他的最新报告指出,iPhone X将在今年中结束生产.因为苹果已计划下半年推出新款iPhone,价格也比iPhone X会低并有新功能发布.所以他预计iPhon ...
    
			
    6. 
						
  6. MySql之增删改查 · YbWork's Studio
			
    前提:在进行"增删改查"的操作之前,先建立一个包含数据表student的数据库(具体操作可以见MySQL之最基本命令): 1."增"--添加数据 1.1 为表中 ...
    
			
    7. 
						
  7. Janet Wu price
			
    上次也是第一次参加百公里是2012的时候,那年的主题是一路有你,和一群同事从深圳湾走到福田,最后累了就回家了,那晚应该是睡得很好吧. 今年是提前报名了,虽然还不确定是否参加.因为说实话,我不喜欢拥堵的 ...
    
			
    8. 
						
  8. Jquery 实现原理深入学习(3)
			
    前言 1.总体结构 √ 2.构建函数 √ 3.each功能函数实现 √ 4.map功能函数实现 √ 5.sizzle初步学习 6.attr功能函数实现 7.toggleClass功能函数实现(好伤)  ...
    
			
    9. 
						
  9. Mongo Delete-19
			
    数据初始化 db.inventory.insertMany( [ { item: "journal", qty: 25, size: { h: 14, w: 21, uom: &q ...
    
			
    10. 
						
  10. 如何成为一名高级C++程序员
			
     C++这门语言从诞生到今天已经经历了将近30个年头.不可否认,它的学习难度都比其它语言较高.而它的学习难度,主要来自于它的复杂性.现在C++的使用范围比以前已经少了很多,java.C#.python ...
    
			
    11.