html文件和js文件如何引入文件外部的js代码？
1、html文件
<script src='/test.js'></script>
<!-- scr 填入要引入js路径 -->
2、js文件
js文件间的引用，和其他编程语言一样，首先被将被引用的文件，会对自身要暴露出来的接口进行声明，然后要引入外部js文件的一方，进行引入。以下为个人总结的js文件间相互引用的常用方法
- a、module.exports require用法
module.exports 对源文件的接口进行暴露声明
使用require(src) 进行引用（src 参数为路径）
/*********test.js********/
var test = {
name: '11111';
func1: function(){
console.log('test');
}
}
function func2() {
alert('Hi moring');
}
module.exports = test;//exports 设为test
module.exports.func2 = func2;//为exports添加func2
/*************main.js**************/
//引入模块
var Test = require('/test')
//调用对应函数
Test.func1();
Test.func2();
- b、export 与 import 用法
export 分为两种用法：
1、一种直接在变量或者函数定义时直接声明，在前面添加一个export 关键字。
2、另外一种则是在变量或者函数定义后再进行声明，需要注意的是这种用法export后面的内容必须适应 "{}" 对内容进行包含，并且可以是用关键字 as 进行取别名。
import 进行引用时也可分为两种：
1、import {} from '/test' 在{} 中引入需要引用的接口，文件名可以省略后缀.js
2、import * as Test from '/test' 直接引入整个外部文件的暴露接口，并取别名为Test，调用引用接口时，则直接使用 Test. 的方式调用。
/*********test.js********/
//定义时直接声明
export var office = 'word'
export function jump () {
alert('jump')
}
//定义后声明
var a = 'aaaaa'
export{a as d} //别名外部引用变量名为d
var b = 'bbbbb'
function fly () {
alert('fly')
}
export{b,fly} //{}不能少，即使只有一个变量
/*************main.js**************/
//引入模块
import {office,jump,d,b,fly} from './test'
//调用接口
jump()
//或者使用以下方式直接引入对应文件所以对外暴露的接口
import * as Test from './test'
//调用接口
Test.jump()
- c、export default 和 import
export default 就是直接声明后面的内容都将可以暴露
import Test from './test' 这样的方式本质上是import {* as Test} from './test')，所以调用方式同上
/*********test.js********/
export default {
name: 'Jack',
sex: 'male',
run: function(){
alert(this.name + ' run fast')
}
}
/*************main.js**************/
//引入模块(本质为 import {* as Test} from './test')
import Test from './test'
//调用对应函数
Test.run();
//使用变量
console.log(Test.name + Test.sex)
- d、import()
使用import()函数运行时注入, 可以达到懒加载的效果，对大项目的优化，很有帮助
/**********test.js*************/
export function jump () {
alert('jump')
}
/*************main.js**************/
import('../moduleTest2').then(Test => {
Test.jump();
})
.catch(error => {
})
