前端知识JavaScript-modules模块的学习

modules，也就是模块，自动采用严格模式，不管有没有在模块头部加上“user strict”，agruments不会自动反映函数参数的变化，以及禁止this指向全局对象

modules有两个关键字，Imports和Exports

一个模块就是一个独立的文件，该文件内部所有的变量，外部无法获取，如果希望外部读取模块内部的某个变量，就必须使用export关键字输出变量，export，除了输出变量，还可以输出函数，class

let a='a';
let b='b';
let c='c';
export {a,b,c}

如果为输出的变量重新取一个名字，import命令要使用as关键字，将name改成a，例如：

import {name as a} from '.../xxx.js'

另外,import具有提升效果，不管在哪里引用，都会被提升到整个模块的顶部，首先执行

除了指定加载某个值，还可以将整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上。例如

import * as a from '.../xxx.js'
console.log(a.area(4));
console.log(a.cire(4));

export default，设置模块文件的默认输出，每个module只允许有一个默认输出，默认输出不需要知道模块的变量名，另外，export default不需要加大括号，因为，本质上，export default就是输出了一个叫做default的变量或者方法，然后系统允许你为它取任意名字

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

// modules.js
function add(x, y) {
 return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

如果加载多次，等同于合并之后加载，例如

import {b} from '.../xxx.js'
import {c} from '.../xxx.js'
//等同于
import {b,c} from '.../xxx.js'

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。

<script type="module">
</script>

浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。

模块之中，顶层的this关键字返回undefined，而不是指向window。也就是说，在模块顶层使用this关键字，是无意义的，同时利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中。

相关文章：

学习web前端常用知识点的详细介绍

JavaScript 入门基础知识 想学习js的朋友可以参考下

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com