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

一·什么是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文件中引入任何变量、方法
  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ideal-cs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值