JavaScript-如何在js代码中引用一个js模块?

zhezhongyun 2024-12-03 06:29 71 浏览

ES6 Modules (Browsers)

浏览器从Safari 10.1、Chrome 61、Firefox 60和Edge 16开始支持直接加载ECMAScript模块（不需要Webpack等工具）。

不需要使用Node.js的扩展名；浏览器完全无视模块/脚本的文件扩展名。

<script type="module">
  import { hello } from './hello.js'; 
  hello('world');
</script>

export function hello(text) {
  const div = document.createElement('div');
  div.textContent = `Hello ${text}`;
  document.body.appendChild(div);
}

ES6 Modules (Browsers+Dynamic)

脚本根据需要动态加载其他的js文件。

<script type="module">
  import('hello.js').then(module => {
      module.hello('world');
    });
</script>

ES6 Modules (Node.js)

module.exports = {
   hello: function() {
      return "Hello";
   }
}

const myModule = require('./mymodule');
let val = myModule.hello(); // val is "Hello"

Fetch

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Script标签加载

HTML中添加一个带有脚本URL的脚本标签。

脚本甚至可以在不同的服务器上()，<script>标签注入到网页的<head>中，或者插入到关闭的</body>标签之前。

//头部引入
function dynamicallyLoadScript(url) {
    let script = document.createElement("script"); 
    script.src = url;  
    document.head.appendChild(script);  // 添加在头部引入
}

//添加异步回调 callback
function dynamicallyLoadScript(url, callback)
{
    //将脚本标签添加到头部
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    //然后将事件绑定到回调函数上。
    script.onload = callback;
    script.onreadystatechange = callback;    //跨浏览器兼容。
    // 加载
    document.head.appendChild(script)。
}

HTML 引用

上一篇：手把手教你前端的各种文件上传攻略和大文件断点续传
下一篇：html 里无需任何框架，原生引用 Alert 组件

JavaScript-如何在js代码中引用一个js模块?

ES6 Modules (Browsers)

ES6 Modules (Browsers+Dynamic)

ES6 Modules (Node.js)

Fetch

Script标签加载

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）