草庐IT

javascript - 浏览器将如何处理 ES6 导入/导出语法

coder 2024-07-15 原文

我一直在思考这个问题很多天，我决定请教专家。

浏览器将如何处理新的导入/导出语法？我的意思是:模块会被异步加载吗？仅引用我的主文件或入口文件，浏览器将延迟加载 requiere 模块。

也许我对这个新架构遗漏或误解了什么？

非常感谢!

问候。

最佳答案

这是 standardized now并得到所有主要现代浏览器的支持。

will the modules be loaded asynchronously?

是的，有两种选择；详情如下。

Referencing only my main or entry file and browsers will lazy load the requiere modules.

与其说是“懒惰”，不如说是。

启用它

规范中的详细信息 here和 here (可能还有其他地方)。

要获得此行为，您可以使用 type="module" 指定您的脚本是一个模块:

<script src="main.js" type="module"></script>

或用于内联脚本

<script type="module">
// ...module code here
</script>

这意味着根据 Module 解析和处理脚本JavaScript 规范中的定义，而不是根据 Script定义，这意味着它可以有导入(和导出)。

导入是相对于 script 的 URL 解析的(对于通过单独的资源加载的模块，例如上面的 main.js，就像 CSS 一样)或相对于文档(对于像上面那样的内联模块)。

例如，如果我在 http://example.com/index.html 的文档中有这个:

<script src="./handy/stuff/nifty.js" type="module"></script>

...并且 nifty.js 包含

import Thingy from "./thingy.js";

...然后浏览器查找 http://example.com/handy/stuff/thingy.js，而不是 http://example.com/thingy.js。同样，就像 CSS 导入一样。

请注意，该模块说明符上的 ./ 是必需的，仅 from "thingy.js" 将不起作用。那是因为不允许使用裸说明符，因为它们可能最终具有特殊含义。 (例如，在 Node.js 中，这就是您指定内置模块和安装在 node_modules 中的模块的方式。)模块说明符必须是完整的 URL，或以 开头的相对 URL/、./ 或 ../.

异步

我在上面说过模块是异步加载的，有两种选择。规范中的这张图片说得最好(请参阅规范以获取最新副本):

如您所见，对于type="module" 脚本，如果您不在script 标签上放置任何特殊的flag 属性，则该模块的所有依赖项将被解析，然后脚本将在 HTML 解析完成后运行。如果包含 async 属性，它可能会在 HTML 解析完成之前运行得更快(例如，如果所有脚本都在缓存中)。 (defer 对模块无效。)

关于javascript - 浏览器将如何处理 ES6 导入/导出语法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36523013/

javascript何处codescriptnoreferrerecmascript-6es6-module-loaderes6-modules

有关javascript - 浏览器将如何处理 ES6 导入/导出语法的更多相关文章

  1. ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2

    我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？ 最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m

  2. ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2

    我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？ 最佳答案 我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作

  3. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru

  4. ruby - 检查是否通过 require 执行或导入了 Ruby 程序 - 2

    如何检查Ruby文件是否是通过“require”或“load”导入的，而不是简单地从命令行执行的？例如:foo.rb的内容:puts"Hello"bar.rb的内容require'foo'输出:$./foo.rbHello$./bar.rbHello基本上，我想调用bar.rb以不执行puts调用。 最佳答案 将foo.rb改为:if__FILE__==$0puts"Hello"end检查__FILE__-当前ruby​​文件的名称-与$0-正在运行的脚本的名称。 关于ruby-检查是否

  5. 使用canal同步MySQL数据到ES - 2

    文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

  6. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  7. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

  8. Ruby - 如何处理子类意外覆盖父类(super class)私有(private)字段的问题？ - 2

    假设您编写了一个类Sup，我决定将其扩展为SubSup。我不仅需要了解你发布的接口(interface)，还需要了解你的私有(private)字段。见证这次失败:classSupdefinitialize@privateField="fromsup"enddefgetXreturn@privateFieldendendclassSub问题是，解决这个问题的正确方法是什么？看起来子类应该能够使用它想要的任何字段而不会弄乱父类(superclass)。编辑:equivalentexampleinJava返回"fromSup"，这也是它应该产生的答案。 最佳答案

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

随机推荐