html文件暴露地址,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 => {

})