已经实现了2个基本的html页面,其中都包含了自己的js文件,其中js中都有相同部分的公用的代码:
![](https://www.crifan.com/files/pic/uploads/2021/05/d2952373f8b74a51ac91376838f66e4e.jpg)
![](https://www.crifan.com/files/pic/uploads/2021/05/201cf7c370474b56b0684ec17d2f91ab.jpg)
js contain another js file
去看看mjs中的export
-》但是此处一些额外的给默认类比如String,添加额外函数,好像没法直接export啊
或者换用:jQuery Loading
先不管,先去试试再说
另外看到:
意思是:
只要确保js在之前已加载,则可以通过放在html中的方式,实现好像当前js加载了别的js的一样的效果
抽空也去试试
先去试试:
把代码放进去common.mjs,然后function加上export
然后再去引入:
import 'common'
结果
![](https://www.crifan.com/files/pic/uploads/2021/05/f01a01196dce4f6898ec1ca8c7ff6253.jpg)
Uncaught SyntaxError: Unexpected string
![](https://www.crifan.com/files/pic/uploads/2021/05/267e27f4681b4817a4d095d7109f797c.jpg)
不支持这么写。
换成:
import {isEmptyObj} from 'common'
加上测试:
console.log("isEmptyObj=", isEmptyObj({}))
结果:
问题依旧。
都去改为mjs
main.mjs,以及html中:
<script src="js/main.mjs"></script>
结果:
Uncaught SyntaxError: Unexpected token {
![](https://www.crifan.com/files/pic/uploads/2021/05/1b30893b248a499aa27e170f9f46060e.jpg)
所以放弃。
import { isEmptyObj } from './common.js'
问题依旧:
![](https://www.crifan.com/files/pic/uploads/2021/05/82d9a0247f164610bd2e88dac1ae2b74.jpg)
html中:
<script src="js/common.js"></script> <script src="js/main.js"></script>
然后main.js代码中不用import,直接使用common.js中的函数:
console.log("isEmptyObj=", isEmptyObj({}))
结果:
![](https://www.crifan.com/files/pic/uploads/2021/05/1d4c60e5e73843ecbc93090cee847ef3.jpg)
所以去掉export:
// export function isEmptyObj(obj) { function isEmptyObj(obj) { return Object.keys(obj).length === 0 }
结果就可以了。
【总结】
此处想要实现的效果是:
main.js可以导入util.js
另外一个js, book_detail.js,也去导入util.js
其中util.js中存在了:
- 通用的函数
- 对现有类做了扩展
能想到的思路是:
尝试在一个js文件中import另外一个js文件
最后无法实现此思路。
最后用:
html中引入多个js,
只要保证想要导入的js在要调用的js之前,即可实现类似导入的效果。
且被导入的js中,无需,也不能用export。
具体代码:
index.html
<script src="js/util.js"></script> <script src="js/main.js"></script>
js/util.js
// export function isEmptyObj(obj) { function isEmptyObj(obj) { var isEmpty = false if (obj === undefined){ isEmpty = true } else { isEmpty = (Object.keys(obj).length === 0) } return isEmpty }
js/main.js
console.debug("=== test empty object ===") var emptyObj = {} var undefinedObj = undefined console.log("emptyObj isEmpty=", isEmptyObj(emptyObj)) console.log("undefinedObj isEmpty=", isEmptyObj(undefinedObj))
效果:
![](https://www.crifan.com/files/pic/uploads/2021/05/1f99e1c2527b44d18e6f3ca41e870278.jpg)
转载请注明:在路上 » 【已解决】js代码中如何导入包含其他js文件