首页 > 编程语言> > javaScript 基础知识汇总（十五）

javaScript 基础知识汇总（十五）

2019-09-12 11:04:16 作者：互联网

1、模块简介

　　什么是模块：

　　模块就是一个文件，一个脚本，通过关键字export 和 import 交换模块之间的功能。

　　export 关键字表示在当前模块之外可以访问的变量和功能。

　　import 关键字允许从其他模块中导入一些诸如函数之类的功能。

　　使用示例：

　　文件 say.js

　　export function sayHi(user)

　　　　return `Hello ,${user}!`;

　　}

　　文件index.html

　　<!doctype html>

　　　　import {sayHi} from './say.js';

　　　　document.body.innerHTML = sayHi('John");

　　</script>

　　核心模块功能

　　　　1)始终使用 use strict

　　　　2)模块级作用域

　　　　　　每个模块都有自己的作用域

　　　　3)模块代码仅在第一次导入时解析

　　顶级 “this" 是未定义的（undefined）

　　　　在模块中的this与模块中的区别是普通脚本中的this 是window 而模块中的this则是undefined

　　　　alert(this);//window

　　</script>

　　　　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 = 2015;

// 导出类
export class User {
  constructor(name) {
    this.name = name;
  }
}

　　声明后导出

1 function sayHi(User){
2     alert(`Hello,${User}!`);
3 }
4 fucntion sayBye(user)
5     alert(`bye,${user}!`);
6 }
7 export{sayHi,sayBye};

　　指明导入的内容

1 //

标签：javaScript,汇总,js,基础知识,say,export,模块,John,sayHi
来源： https://www.cnblogs.com/xiaoqiyaozou/p/11510663.html

javaScript 基础知识汇总 （十五）

1、模块简介

2、模块的导入导出

javaScript 基础知识汇总（十五）