es6 模块化加载html,【ES6】Module的语法、加载实现

概述

在ES6之前，JavaScript一直没有模块(module)体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。这对开发大型的、复杂的项目形成了障碍。

为了解决这个问题，创造了一些模块加载方案(如用于服务器的CommonJS，用于浏览器的AMD、CMD)，各个方案各有自己的特点，并且语法还不一样，如果是要同时做前后端，那真的是会“精分”了。

好消息是ES6给我们带来了模块化的设计！这完全可以取代CommonJS、AMD等规范，成为浏览器和服务器通用的模块解决方案。

语法

模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。

export

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

对外输出变量

// 写法一

export var m = 1;

// 写法二

var m = 1;

export {m};

// 写法三

var n = 1;

export {n as m};

需要注意的是，使用先声明再输出的写法时，即使只有一个变量，也不能省略 { ... }，否则会报错。

// 报错

var m = 1;

export m;

记住，使用 export 命令时，要提供对外的接口，而不是提供一个值！

对外输出函数

当然也可以使用类似的语法，对外输出函数。需要注意的点还是一样的，对外输出的是接口，不是函数本身。

说白了，就是 记得加上 { ... }!

// 写法一

export function f() {};

// 写法二

function f() {}

export {f};

// 报错

function f() {}

export f;

import

加载变量、函数

import { m, n } from "./export.js";

需要注意的是，import 命令输入的变量都是只读的，修改会报错。这很合理，当然不能在加载模块的脚本里改写接口。

不过如果加载的变量是一个对象，修改这个对象的属性是允许的。

模块的整体加载

除了指定加载某个值，还可以使用整体加载的方法，加载整个模块的所有输出值。

语法很简单，用 * 指代“所有”即可。

import * from "./export.js";

了解了 import 和 export 的语法之后，我迫不及待地想要去尝试了，然后……

在浏览器中加载ES6模块

由于粗心，没认真了解规则，废了好多时间，下面来说说经验之谈。

加载规则

浏览器加载ES6模块，也是使用

有两种方法：

1. 通过

2. 直接使用

import { a } from "./export.js";

console.log(a);

面对浏览器的试炼...

了解了以上知识，想要在浏览器中实现ES6模块的加载，还是有坑...

首先要说的是，如今(8102年)，各大主流浏览器都(早)已经支持了ES6的模块了。千万别再说Chrome浏览器没有支持ES6的Module之类的话了。

火狐浏览器

火狐浏览器没问题，直接打开html文件，就可以完成模块的加载。

Chrome浏览器

而对于Chrome浏览器，则会有一点问题。

直接打开html文件时，Chrome浏览器会报错：

Access to script at 'file:///masaike' from origin 'null' has been blocked by CORS policy: The response is invalid.

image

这并不是Chrome不支持加载模块，而是ES6模块遵循同源策略。解决方法就是打开本地服务器，让各个文件同源就可以了。

参考资料