首页 > 编程语言 >javascript import maps 特性现已被全部主流浏览器支持

javascript import maps 特性现已被全部主流浏览器支持

时间:2023-04-25 16:34:00浏览次数:38  
标签:fs 浏览器 javascript access maps 模块 import browser

值得庆祝

Import maps 特性现在可以在全部三个主要浏览器内使用
现在主流现代web 应用 引入和利用javascript 是通过 Es module 模块实现。 在开发javascript上,比起无模块化功能的旧版浏览器,现代浏览器支持模块化且提供了许多好用的功能

引入 es module 使用 <script type=“importmap”> 标签这种新方式实现。 这个标签允许你定义一个map映射外部模块名到它所对应的 URLs, 这使得它以更简便的方式引入外部模块到你的代码 中。

使用 <script type="importmap"> 这种方式,你需要把它添加至 HTML document 的 节点。在这个标签内你可以定义一个JSON 对象,它映射了模块名和模块名对应的模块URLs, 举个栗子:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/[email protected]/dist/index.modern.js"
    }
  }
</script>

例子上的代码定义了单个外部名为 “browser-fs-access” 模块,它映射到browser-fs-access 库 对应的URL ,由 unpkg CDN 提供, 有了这些映射,你现在就可以在你的代码中 使用 import 关键字去引入 browser-fs-access 库。注意,import 关键字只在 <script type=“module”> 标签内起起作用 。

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

在开发javascript 时,比起无模块化功能的老旧浏览器上,新浏览器上 <script type="importmap"> 标签和 import 关键字提供了许多好处。它允许你将你代码中依赖的模块清晰分离特殊的外部模块,这使得你更容易理解和管理你的代码。总而言之,在web应用中 使用

标签:fs,浏览器,javascript,access,maps,模块,import,browser
From: https://www.cnblogs.com/willian/p/17353038.html

相关文章

  • [oeasy]python0140_导入_import_from_as_namespace_
    导入import回忆上次内容上次学习了tryexcept 注意要点半角冒号缩进输出错误信息 有错就报告不要隐瞒否则找不到出错位置还可以用traceback把系统报错信息原样输出  但是代码量好多啊10多行了......
  • 在JavaScript的if判断中,关于数组Array的相关思考
    结论:在if判断中,无法直接使用Array转Boolean的方法判断数组是否为空数组letarray=[];//中间进行N步操作之后//...if(array){ console.log("数组为空数组");}if(array==[]){ console.log("数组为空数组");}if(array==0){ console.log("数组为空数组");}if(array......
  • JavaScript回调函数
    一种场景js需要等待一个函数执行完后再执行另一个函数或者其他的操作。本编以最简单的例子来说明回调函数的执行过程。回调函数备注上就是以函数对象作为参数进行传递。demo<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>......
  • JavaScript 正则表达式
    基本使用 //定义正则表达式 constreg=/^\d{4}-\d{1,2}-\d{1,2}$/; conststr="2020-11-11"; //验证字符串是否符合规则 reg.test(str);元字符^表示开始部分等于xxx$表示结束部分等于xxx[]表示字符串中存在中括号中定义的字符,可以使用连字符,如a-z表示可以匹......
  • No bean named 'org.springframework.context.annotation.ConfigurationClassPostProc
       今天在重启springboot时候一直报如上的代码,但是也没有具体的报错信息。很是郁闷。   最后发现有两个:一个是使用@ComponentScan的问题,一个是@MapperScan的问题。@MapperScan默认是当前目录,我的目录和我引用的dao的目录不同导致的。   2.@Autowire和@Resource......
  • JavaScript 实现伽马算法
    伽马函数是数学中的一个非常重要的函数,它在统计学、物理学等领域有广泛的应用,其中最重要的应用就在概率统计和计算机科学中。接下来,我们来介绍如何使用JavaScript实现伽马算法。递归实现functiongamma(x){if(x===1){return1;}else{return(x-1)......
  • 前端进化笔记-JavaScript(一)
    简介:实现:三部分ecmascript语言核心DOM文档对象模型BOM浏览器对象模型DOM:用于html的应用程序接口(API),把整个页面映射成一个多层节点结构。例如:<html> <head> <title>samplepage</title> </head> <body> <p>helloworld</p> </body></html>DOM......
  • JavaScript 基础问答
      JavaScript数据类型有哪几种?  一共有五种:number、string、object、boolean、undefined.其中最后一个是定义变量后没有赋值介绍隐式类型转换字符串+数字=字符串;字符串-数字=数字;+数字字符串=数字null经过数字转换之后会变为0undefined经过数字转换之后会变为NaN......
  • [oeasy]python0137_相加运算_python之禅_import_this_显式转化
    变量类型相加运算回忆上次内容上次讲了是从键盘输入变量input函数可以有提示字符串需要有具体的变量接收输入的字符串 输入单个变量没有问题但是输入两个变量之后一相加就非常离谱 ​ 添加图片注释,不超过140字(可选)......
  • Javascript数据类型
    值类型和引用类型原始类型(alias:值类型,基础类型)primitive:stringnumberbooleannullundefinedsymbol引用类型:Object其他内置Object派送类型ArrayFunctionMapSetWeakMapWeakSetRegExpNaN:特殊的Number类型,IsNaN()判断一个值是否为NaN引用类型可以有......