当前位置: 首页 > 工具软件 > script.js > 使用案例 >

总结:JS文件中引入其他JS文件的方法,以及<script>标签中间如何嵌套<script>标签

越望
2023-12-01

一·什么是JS文件?

(1)就是以“.js”扩展名结尾的文件

(2)JS文件里面,只能写入JavaScript代码,且文件首尾不能再加< script>< /script>标签;浏览器解析JS文件时,就会自动给JS文件内部的代码前后自动加上< script>< /script>标签

(3)引用JS文件的方法

<script type="text/javascript" src="/static/workflow.js"></script>

注意:script标签中的type类型也可以不加

(4)< script>< /script>标签尽量放在页面body的末尾,这样可以避免很多的重复渲染,从而可以提高系统的处理性能

二·如何在JS文件中引入其他的JS文件?

本质上相当于在页面的body或者head中引入一组新的script标签,从而实现引入新的JS文件;
而并不是两组script标签的直接互相嵌套,这样并不会有效果。

方案一:利用jQuery框架实现

以下的方法都是直接写在JS文件代码里面

(1)在body中添加(推荐使用)

$("body").append('<script src="/static/workflow.js"></script>')

(2)在head中添加

$("head").append('<script src="/static/workflow.js"></script>')

方案二:利用原生的JavaScript实现

以下的方法都是直接写在JS文件代码里面

(1)这行代码写在哪,他就在哪开始执行,并输出内容标签到document中。

document.write("<script src="/static/workflow.js"></script>");

(2)利用构造标签,再添加进去实现:

// 在页面head中添加新的script标签,从而引入新的JS文件
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',url);
document.getElementsByTagName('head')[0].appendChild(script);

方案三:利用es6中export和import实现模块化,vue、react等框架也可以使用这种方法实现

(1)引入其他JS文件的变量或函数等

import {initData, peopleList} from './test';

(2)引入其他JS文件的全部代码模块,并立即执行

import './static/initData.js'
//立即执行initData.js文件代码,但不会在当前JS文件中引入任何变量、方法
 类似资料: