在JS中加载.js文件（模块加载）

小白啥时候能进阶成功

已于 2023-02-14 11:22:18 修改

阅读量4.6k

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2020-05-09 11:56:05 首次发布

本文链接：https://blog.csdn.net/qq_34754747/article/details/105995842

版权

JS 专栏收录该内容

99 篇文章 3 订阅

订阅专栏

1、在主线程js文件中导入js文件

1.1 export和import静态导入（编译时加载）

利用ES6中的export和import实现模块化

模块导入导出详细介绍：

Javascript模块导入导出详解_javascript技巧_脚本之家

export、import可以有多个；export default仅有一个。
通过export方式导出，在导入时要加 { }；export default则不需要
export导出具体名称xxx ，export default匿名。在导入时，import前者需要一样的名称才能匹配，后者无论取什么名都可以。

circle.js文件

输出两个方法area和circumference

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}

（1）逐一指定进行加载

// main.js
import { area, circumference } from './circle';
console.log('圆面积：' + area(4));
console.log('圆周长：' + circumference(14));

（2）模块整体加载

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

模块整体加载所在的那个对象（上例是circle），是静态分析的，不允许运行时改变。下面的写法都是不允许的。

import * as circle from './circle';
// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

1.2 Node的require动态加载（运行时加载）

circle.js文件

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}

require进行加载

var em_module = require('./test.js');
var ar = em_module.area(4);
console.log("area:"+ar);

2、在webworker中加载js文件

2.1 importScript() 类似标签动态导入

在Worker内部可以使用与script标签功能类似的importScripts()方法。将worker分成不同的文件，然后使用importScripts()方法将其动态的导入。

importScripts('./helloworld.js');

3、在html中加载js文件，并调用其中接口

3.1 script标签导入

add_js.html文件如下：

<script>异步加载add_js.js文件后；
在另一个<script>中调用add接口

<!doctype html>
<html lang="en-us">
  <head> 
    <script async type="text/javascript" src="add_js.js"></script>
	<script>
	window.onload = function(){
    var fun = add; //引用abc函数
    fun(12,3);
  };
  </script>
  </head>
  <body>
  </body>
</html>

add_js.js文件

function add(a,b) {
    console.log("a:"+a);
}

在add_js.html目录下cmd，之后http-server，运行结果：

3.2 import导入

从html中调用包含export class的.js文件

<script>
    var g_PlayCtrl = null
    import('./JSPlaySDKInterface.js').then(({ JSPlayCtrl }) => {
      g_PlayCtrl = new JSPlayCtrl("./", PlayM4_CallBackFun, 0);
    })
</script>

import - JavaScript | MDN

小白啥时候能进阶成功

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
在JS中加载.js文件（模块加载）

一、export和import静态加载（编译时加载）circle.js文件输出两个方法area和circumference// circle.jsexport function area(radius) { return Math.PI * radius * radius;}export function circumference(radius) { return 2 * Math.PI * radius;}加载方法一：逐一指定进行加载// main.jsi
复制链接

扫一扫