js文件接口的暴露和引用

html文件和js文件如何引入文件外部的js代码？

1、html文件

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 => {

        })