模块（Module）简介

什么是模块一个模块就是一个文件，一个脚本就是一个模块模块之间可以相互加载export 关键字标记了可以从当前模块外部访问的变量和函数。import 关键字允许从其他模块导入功能。// ???? sayHi.jsexport function sayHi(user) {alert(`Hello, ${user}!`);}// ???? main.html<!doctype html>&l

Anita-Sun

6893人浏览 · 2020-12-17 22:44:14

Anita-Sun · 2020-12-17 22:44:14 发布

什么是模块

一个模块就是一个文件，一个脚本就是一个模块
模块之间可以相互加载

export 关键字标记了可以从当前模块外部访问的变量和函数。
import 关键字允许从其他模块导入功能。

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

// 📁 main.html
<!doctype html>
<script type="module">
  import {sayHi} from './say.js';

  document.body.innerHTML = sayHi('John');
</script>

在这里插入图片描述

核心模块功能

始终使用"use strict"
模块级作用域：每个模块都有自己独立的作用域
hello.js 尝试使用在 user.js 中声明的变量 user，失败了：

#index.html
<!doctype html>
<script type="module" src="user.js"></script>
<script type="module" src="hello.js"></script>

//user.js
let user = "John";

//hello
alert(user); // no such variable (each module has independent variables)

在浏览器中，每个 <script type="module"> 也存在独立的顶级作用域

<script type="module">
  // 变量仅在这个 module script 内可见
  let user = "John";
</script>

<script type="module">
  alert(user); // Error: user is not defined
</script>

模块代码仅在第一次导入时被解析
如果在某个位置修改了导入的代码，那么其它的模块也可以看到就这个修改（包含源文件）

// 📁 alert.js
alert("Module is evaluated!");

// 在不同的文件中导入相同的模块

// 📁 1.js
import `./alert.js`; // Module is evaluated!

// 📁 2.js
import `./alert.js`; // (什么都不显示)

import.meta 对象包含关于当前模块的信息
它的内容取决于其所在的环境。在浏览器环境中，它包含当前脚本的 URL，或者如果它是在 HTML 中的话，则包含当前页面的 URL。

<script type="module">
  alert(import.meta.url); // 脚本的 URL（对于内嵌脚本来说，则是当前 HTML 页面的 URL）
</script>

在一个模块中，"this"是 undefined

<script>
  alert(this); // window
</script>

<script type="module">
  alert(this); // undefined
</script>

浏览器特定功能

模块脚本总是延迟的

下载外部模块脚本 <script type="module" src="..."> 不会阻塞 HTML 的处理，它们会与其他资源并行加载。
模块脚本会等到 HTML 文档完全准备就绪（即使它们很小并且比 HTML 加载速度更快），然后才会运行。
保持脚本的相对顺序：在文档中排在前面的脚本先执行。

// 第二个脚本会先于第一个脚本执行
<script type="module">
  alert(typeof button); // object：脚本可以“看见”下面的 button
  // 因为模块是被延迟的（deferred，所以模块脚本会在整个页面加载完成后才运行
</script>

// 相较于下面这个常规脚本：

<script>
  alert(typeof button); // button 为 undefined，脚本看不到下面的元素
  // 常规脚本会立即运行，常规脚本的运行是在在处理页面的其余部分之前进行的
</script>

<button id="button">Button</button>

Async 适用于内联脚本

<!-- 所有依赖都获取完成（analytics.js）然后脚本开始运行 -->
<!-- 不会等待 HTML 文档或者其他 <script> 标签 -->
<script async type="module">
  import {counter} from './analytics.js';

  counter.count();
</script>

外部脚本

具有相同 src 的外部脚本仅运行一次

<!-- 脚本 my.js 被加载完成（fetched）并只被运行一次 -->
<script type="module" src="my.js"></script>
<script type="module" src="my.js"></script>

从另一个源（例如另一个网站）获取的外部脚本需要 CORS header，如我们在 Fetch：跨源请求一章中所讲的那样。换句话说，如果一个模块脚本是从另一个源获取的，则远程服务器必须提供表示允许获取的 header Access-Control-Allow-Origin

<!-- another-site.com 必须提供 Access-Control-Allow-Origin -->
<!-- 否则，脚本将无法执行 -->
<script type="module" src="http://another-site.com/their.js"></script>

不允许裸模块
在浏览器中，import 必须给出相对或绝对的 URL 路径

import {sayHi} from 'sayHi'; // Error，“裸”模块
// 模块必须有一个路径，例如 './sayHi.js' 或者其他任何路径

兼容性

<script type="module">
  alert("Runs in modern browsers");
</script>

<script nomodule>
  alert("Modern browsers know both type=module and nomodule, so skip this")
  alert("Old browsers ignore script with unknown type=module, but execute this.");
</script>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

基于陌讯AIGC检测算法的局限性探讨：最大512Token输入下的长文本处理方案

本文探讨了陌讯AIGC检测系统在512Token输入长度限制下的技术原因及解决方案。该系统虽准确率高达99.9%，但受Transformer架构的计算复杂度、训练数据局限性和语义连贯性挑战影响，存在文本长度限制。文章提出了三种实战方案：滑动窗口法（全面但计算量大）、关键片段采样法（高效但可能漏检）和分层检测法（兼顾精度与速度）。最后展望了未来可能的技术突破方向，强调通过工程智慧克服现有局限，充分发

2048 AI社区

为企业系统无缝集成AI检测能力：陌讯AIGC检测系统API接口调用全指南

摘要：随着AIGC内容泛滥，陌讯科技提供99.9%准确率的检测方案，帮助企业防范学术不端、虚假营销等风险。本文详细介绍了集成流程：1）选择云端版或企业版；2）获取API访问凭证；3）通过RESTful API进行认证和调用；4）提供Python实战示例。文章还分享了性能优化、结果处理等最佳实践，并解答了常见问题。通过集成该API，企业可高效构建内容真实性防火墙。