JS文件中如何调用外部JS文件

JavaScript011

JS文件中如何调用外部JS文件,第1张

1、创建一个文件夹，这个文件夹有一个js文件夹和一个html文件。js文件夹用来存放需要引入的js文件。

2、打开html文件，在html文件上找到<body>，在<body>标签里创建一个按钮标签，然后给这个标签添加一个点击addJs事件。

3、在js文件夹下创建一个js文件为addJs.js。

4、在addJs.js文件上输入一个alert弹出框并保存，当引入js文件成功就会执行alert弹出框。

5、回到html文件，在按钮输入框后面创建一个script标签，然后添加用来引入addJs.js文件的addJs事件。

6、保存html文件后使用浏览器打开，点击按钮即可看到出现一个弹出，表示引入js文件成功。

如果想用纯JS来实现，是没有办法的，提供两个方案

1. 用JS来实现，但是需要自己手工把文件名列表弄出来，作为数据，如下

var files = ['文件名1‘, '文件名2', '文件名3',...] // 这个数组放该目录下的所有文件名

var dir = '/path/to/your/directory/' // 这里放对应的路径

for (var i=0i<files.lenghti++) {

var script = document.createElement('script')

script.type= "text/javascript"

script.src = dir + files[i] + ".js"

document.getElementsByTagName('head')[0].appendChild(script)

}

2. 第二种方法和一楼说的差不多，通过后端模板或者程序来遍历目录，把对应的文件都生成到html当中

1.将引入的外部js文件放到assets文件下

注：js文件中的方法要写在一个对象里（具体原因正在探索...）

2.在angular.json文件中找到scripts配置js文件路径

3.在tsconfig.json文件中加入allowJs:true

4.在src文件下新建typings.d.ts文件，用来定义js文件中的静态类型

5.第四步相当于全局引入（自己理解的，不知道这样描述准确否），如果只想要在所需的组件里使用，即在组件的ts文件中单独引入

6.最后调用js文件中的方法即可