import script module

.mjs



<script type="module">

  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');

</script>




// utils.mjs

export function addTextToBody(text) {

  const div = document.createElement('div');

  div.textContent = text;

  document.body.appendChild(div);

}

https://jakearchibald.com/2017/es-modules-in-browsers/

demos

mjs



<!DOCTYPE html>

<html lang="zh-Hans">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="xgqfrms">

    <meta name="generator" content="VS code">

    <title>geoJSON to SVG</title>

</head>

<body>

    <svg data-uuid="live_map_svg" id="live_map_svg" width="100%" height="100%" viewBox="0 0 1000 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    </svg>

    <!-- js -->

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

    <script type="module">

      import test from './test.js';

      test();

    </script>

    <!-- <script type="module">

      import {convert} from './convert.mjs';

      convert('Modules are pretty cool.');

    </script>

    <script type="module">

      import test from './test.js';

      test();

    </script> -->

</body>

</html>




// geoJSON

const log = console.log;

// import areas from "./geo-area-json.json";

import {convert} from './convert.mjs';

convert('Modules are pretty cool.');

// log(`log`, areas)

log(`log`)

refs

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

https://www.sitepoint.com/using-es-modules/

https://javascript.info/modules-intro

https://stackoverflow.com/questions/44590393/es6-modules-undefined-onclick-function-after-import

https://stackoverflow.com/questions/49338193/how-to-use-code-from-script-with-type-module

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

import script module的更多相关文章

  1. ou can mix require and export. You can't mix import and module.exports.

    ou can mix require and export. You can't mix import and module.exports.

  2. 在eclipse中用java调用python报错 Exception in thread "main" ImportError: Cannot import site module and its dependencies

    最近做项目需要用java调用python,配置了jython后,运行了例子代码: 获得一个元组里面的元素: import org.python.util.PythonInterpreter; publ ...

  3. [Angular 2] Import custom module

    The application structure: in app.module.ts: import { NgModule} from "@angular/core"; impo ...

  4. solution for python can not import local module

    blog 这次遇到的问题是sys.path的输出不包含'',导致无法import当前文件和文件夹 When no ._pth file is found, this is how sys.path i ...

  5. virtualenvwrapper.sh: There was a problem running the initialization hooks. If Python could not import the module virtualenvwrapper.hook_loader, check that virtualenvwrapper.........（解决办法）

    Linux(ubuntu)上python2与python3共存环境下,安装virtualenvwrapper后, 其环境变量被自动设置为VIRTUALENVWRAPPER_PYTHON=/usr/bi ...

  6. import 本地Python module或package

    很基础很重要的一课,虽然很简单,但是防止以后忘了,还是记下来 这个笔记里说的都是import本地的,自己创建的,或者复制粘贴的别人的,总之“不是安装到library”的module or packag ...

  7. python中from module import * 的一个陷阱

    from module import *把module中的成员全部导到了当前的global namespace,访问起来就比较方便了.当然,python style一般不建议这么做,因为可能引起nam ...

  8. Python: import vs from （module) import function(class) 的理解

    Python: Import vs From (module) import function(class) 本文涉及的 Python 基本概念: Module Class import from . ...

  9. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

随机推荐

  1. Java NIO ———— Buffer 缓冲区详解 入门

    引言缓冲区是一个用于特定基本类型的容器.由java.nio 包定义,所有缓冲区都是 Buffer 抽象类的子类. Java NIO 中的 Buffer ,主要用于与NIO 通道进行交互.数据从通道存入 ...

  2. springboot开启多线程配置

    一.配置线程池参数 @EnableAsync @Configuration public class TaskExecutorConfig { @Bean public TaskExecutor ta ...

  3. （二）基于shard-jdbc中间件，实现数据分库分表

    基于shard-jdbc中间件,实现数据分库分表 Sharding-JDBC简介 Sharding配置示意图 1.水平分割 1.1 水平分库 1.2 水平分表 2.Shard-jdbc中间件 2.1 ...

  4. Prometheus监控Kafka

    Prometheus监控Kafka 1.Prometheus监控Kafka,Docker方式 Kafka监控优秀博文: 简书:whaike:[监控]Kafka - 详细指标 CSDN:GeekXuSh ...

  5. 函数式编程(__slots__)

    正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: class Student(object): pa ...

  6. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

  7. snmp协议 及snmpwalk

    推荐阅读: snmp及工具:https://www.jianshu.com/p/dc2dc0222940 snmp协议详解:https://blog.csdn.net/shanzhizi/articl ...

  8. Flink-v1.12官方网站翻译-P021-State & Fault Tolerance-overview

    状态和容错 在本节中,您将了解Flink为编写有状态程序提供的API.请看一下Stateful Stream Processing来了解有状态流处理背后的概念. 下一步去哪里? Working wit ...

  9. TZOJ6556: 嗅探器

    最近在练Tarjan,看到这道题目分类在割点里面就想尝试做一下,点开发现题目数据范围竟然如此之小,算了,bfs暴力一发. 题目意思就是你需要找到一个关键节点,也可以理解成,行军打仗时必需经过的地方,敌 ...

  10. docker（8）Dockerfile指令介绍

    前言 Dockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明. Dockerfile简介 Dockerfile是用来构建Docker镜像的构建文件,是由一系列 ...