当前位置： 首页 > news >正文

JavaScript的引入并执行-包含动态引入与静态引入

news 2026/2/9 11:39:46

JavaScript的引入并执行-包含动态引入与静态引入

JavaScript引入方式

html文件需要引入JavaScript代码，才能在页面里使用JavaScript代码。

静态引入

  1. 行内式 直接在DOM标签上使用

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript引入方式</title>
</head>
<body><div onclick="alert(1111)">行内式</div>
</body>
</html>

  2. 内嵌式 写在script标签内

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript引入方式</title>
</head>
<body>
</body><script>alert('内嵌式')</script>
</html>

  3. 外链式 通过script标签引入js文件

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript引入方式</title>
</head>
<body>
</body>
<script src="./index.js"></script>
</html>

    与html文件同一目录下的./index.js:

    alert('外链式')

动态引入

  1. 在js运行过程中，构建script标签并插入到DOM文档中，或者通过引用链接，把已经写好的js文件通过script标签并插入到DOM文档。

    • 使用原生JavaScript中提供的动态加载<script>元素的方法，可以创建 <script>元素，并将其添加到 HTML文档中，以动态加载JS文件或代码。

      • 添加方法可以使用

        • document.body.appendChild(script标签元素);
        • document.write() 如document.write('<script src="https://example.com/example.js"></script>');;

      • 手写的js代码

        const script = document.createElement("script");
script.innerHTML = 'console.log("DOM动态创建并运行脚本+预加载优化");';//这些代码可以手动写，也可以用ajax请求并使用。
document.body.appendChild(script);

      • 引入外链js代码

        setTimeout(() => {console.log(1, window.fang);//1 undefined;const script = document.createElement("script");script.src = "./动态js文件.js";document.body.appendChild(script);console.log(2, window.fang);//2 undefined;
}, 0);
setTimeout(() => {console.log(3, fang);//{fang: '方一'};
}, 3000);

        同一目录下动态js文件.js

        console.log("这个就是动态js文件");
var fang = { fang: "方一" };//{fang: '方一'};

  2. 通过import()动态模块。

    • 使用ES6中引入的import()方法动态加载JS模块，该方法可以在运行时动态地加载JS模块。

      • 引入外链js代码

        async function loadJSModule() {const module = await import("./动态js模块.js");//console.log("module--->", module);// 加载成功后可以使用该模块module.fang.theFunction();//Symbol(动态js模块里的东西);
}loadJSModule();

        同一目录下动态js模块.js

        console.log("这个就是动态js模块");//这个就是动态js模块
const theSymbol = Symbol("动态js模块里的东西");
let fang = {fang1: "方一",theFunction: () => {console.log(theSymbol);},
};
export { fang };

  3. 使用AJAX技术加载JS代码，可以通过XMLHttpRequest或fetch方法动态加载JS代码，并使用eval()或Function()方法执行代码。

    • 引入外链js代码

      const xhr = new XMLHttpRequest();
xhr.open("GET", "./动态js文件.js");
xhr.onload = function () {if (xhr.status !== 200) {return;}eval(xhr.responseText);//(new Function(xhr.responseText))()console.log(3, fang); //{fang: '方一'};
};
xhr.send();

      同一目录下动态js文件.js

      console.log("这个就是动态js文件");
var fang = { fang: "方一" };//{fang: '方一'};

相关文章：

JavaScript的引入并执行-包含动态引入与静态引入

JavaScript的引入并执行-包含动态引入与静态引入 JavaScript引入方式 html文件需要引入JavaScript代码&#xff0c;才能在页面里使用JavaScript代码。 静态引入 行内式 直接在DOM标签上使用 <!DOCTYPE html> <html lang"en"> <head><meta ch…...

编程日记 2023/2/28 5:21:05

第四阶段01-酷鲨商城项目准备

1. 关于csmall-product项目 这是“酷鲨商城”大项目中的“商品管理”项目&#xff0c;是一个后台管理项目&#xff08;给管理员&#xff0c;或运营人员使用的项目&#xff0c;并不是普通用户使用的&#xff09;&#xff0c;并且&#xff0c;只会涉及与发布商品可能相关的功能开…...

编程日记 2023/2/28 5:19:52

Uncaught ReferenceError: jQuery is not defined

今天在拉取项目部署到本地的时候遇到了一个问题特此记录一下 &#xff08;以后闭坑&#xff09; 我和同事同时拉取了一样的代码&#xff0c;结果同事的页面加载正常而我的页面像被狗啃了一样&#xff0c;知道是js的问题但是不知道问题出在哪里&#xff1f;后来还是同事帮我解决…...

编程日记 2023/2/28 5:17:28

面试阿里测开岗，被面试官针对，当场翻脸，把我的简历还给我，疑似被拉黑...

好家伙&#xff0c;金三银四一到&#xff0c;这奇葩事可真是多&#xff0c;前两天和粉丝聊天&#xff0c;他说前段时间面试阿里的测开岗&#xff0c;最后和面试官干起来了。 我问他为什么&#xff0c;他说没啥&#xff0c;就觉得面试官太装了&#xff0c;就爱问一些虚而不实的…...

编程日记 2023/2/28 5:16:10

2. 驱动开发--驱动开发环境搭建

文章目录前言一、Linux中配置编译环境1.1 linux下安装软件的方法1.2 交叉编译工具链的安装1.2.1 测试是否安装成功1.3 设置环境变量1.3.1 将工具链导出到环境变量1.4 为工具链创建arm-linux-xxx符号链接二、 搭建运行开发环境2.1 tftp网络方式加载内核和设备树文件2.2 nfs网络方…...

编程日记 2023/2/28 5:15:02

《数据库系统概论》学习笔记——第四章 数据库安全

教材为数据库系统概论第五版&#xff08;王珊&#xff09; 这一章简单记一下那几条sql的用法和两种存取控制和审计&#xff08;今年期末考了&#xff09;吧&#xff0c;不知道有啥好考的 数据库安全性 问题的提出 数据库的一大特点是数据可以共享数据共享必然带来数据库的安全…...

编程日记 2023/2/28 5:13:56

山洪径流过程模拟及洪水危险性评价

目录 1.洪水淹没危险性评价方法及技术讲解 2.GIS水文信息提取与分析(基于ArcGIS软件) 3.洪水淹没模拟水文分析&#xff1a;洪峰流量估算 4.洪水淹没模拟水力学分析&#xff1a;Hec-RAS实例操作 GIS水文分析&#xff08;ArcHydro、Spatial Anlysist等模块&#xff09;是流域…...

编程日记 2023/2/28 5:12:49

LeetCode HOT100 (23、32、33)

目录 23、合并K个升序链表 32、最长有效括号 33、搜索旋转排序数组 23、合并K个升序链表 思路&#xff1a;采用顺序合并的方法&#xff0c;用一个变量 ans 来维护以及合并的链表&#xff0c;第 i 次循i 个链表和 ans合并&#xff0c;答案保存到 ans中。 代码&#xff1a; …...

编程日记 2023/2/28 5:11:41

电力监控仪表主要分类

电力监控仪表是电工仪表行业的一个新兴、细分行业&#xff0c;类别属于安装式数字仪表&#xff0c;从模拟指针式仪表和电量变送器演变而来。随着计算机技术的发展&#xff0c;电力监控仪表已应用到电力系统的发、输、变、配、用的各个环节&#xff0c;实现对电网电参量的测量、…...

编程日记 2023/2/28 5:10:34

山野户外定位依赖GPS或者卫星电话就能完成么？

每当有驴友失联的新闻报道&#xff0c;很多的户外“老鸟”和“菜鸟”都在讲&#xff1a;为什么不带卫星电话&#xff0c;不带GPS……云云&#xff01;提一个小小的问题&#xff1a;如果你拿着卫星电话、GPS或者其他即时通信的其他设备&#xff0c;你就能准定位你所处的位置么&a…...

编程日记 2023/2/28 5:09:29

SAP 应收应付重组配置

应收应付重组是为了使资产负债表真实的反映资产及负债的真实情况&#xff0c;需要对应收、应付账款的余额时行实际调整。即将“应收账款”的贷方余额和“应付账款”的借方余额分别调整至“预收账款”与“预付账款”账户中。 应收应付重组SAP系统是按照公司代码、客户/供应商、…...

编程日记 2023/2/28 5:08:21

算法练习（八）计数质数(素数)

1、问题描述&#xff1a; 给定整数 n &#xff0c;返回 所有小于非负整数 n 的质数的数量 。 2、示例如下&#xff1a; 3、代码如下&#xff1a; 第一种&#xff1a;比较暴力的算法 class Solution {public int countPrimes(int n) {int count1;if(n<2) return 0;for(in…...

编程日记 2023/2/28 5:07:11

用反射模拟IOC模拟getBean

IOC就是spring的核心思想之一&#xff1a;控制反转。这里不再赘述&#xff0c;看我的文章即可了解&#xff1a;spring基础思想IOC其次就是java的反射&#xff0c;反射机制是spring的重要实现核心&#xff0c;今天我看spring的三级缓存解决循坏引用的问题时&#xff0c;发现一个…...

编程日记 2023/2/28 5:06:03

【Ap AutoSAR入门与实战开发02】-【Ap_s2s模块01】： s2s的背景

总目录链接==>> AutoSAR入门和实战系列总目录 文章目录 1 s2s的背景？2 AUTOSAR 方法应支持车辆的无缝开发2.1 面向服务的ECU的解读2.2 面向信号的ECU的解读2.3 通过网关ECU实现转换1 s2s的背景？ Cp AutoSAR基于传统的can，lin，flexray总线的通信，一般是面向信号设…...

编程日记 2023/2/28 5:04:55

C语言数据结构(3)----无头单向非循环链表

目录 1. 链表的概念及结构 2. 链表的分类 3. 无头单向非循环链表的实现(下面称为单链表) 3.1 SListNode* BuySListNode(SLTDateType x) 的实现 3.2 void SListPrint(SListNode* plist) 的实现 3.3 void SListPushBack(SListNode** pplist, SLTDateType x) 的实现 3.4 voi…...

编程日记 2023/2/28 5:03:48

Android 实现菜单拖拽排序

效果图简介本文主角是ItemTouchHelper。它是RecyclerView对于item交互处理的一个「辅助类」&#xff0c;主要用于拖拽以及滑动处理。以接口实现的方式&#xff0c;达到配置简单、逻辑解耦、职责分明的效果&#xff0c;并且支持所有的布局方式。功能拆解功能实现4.1、实现接口自…...

编程日记 2023/2/28 5:02:40

通过window.open打开新的页面并修改样式添加内容

const img new Image(); img.src res; //res是图片的路径地址 const newWin window.open(, _blank); newWin.document.write(img.outerHTML); // newWin.document.body.style.background #000; newWin.document.body.style.textAlign center; newWin.document.body.oncl…...

编程日记 2023/2/28 5:01:31

Java中 Synchronized 的用法

《编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程》一文详细讲述了线程、进程的关系及在操作系统中的表现&#xff0c;这是多线程学习必须了解的基础。本文将接着讲一下Java线程同步中的一个重要的概念synchronized. synchronized是Java中的关键字&#xff0c…...

编程日记 2023/2/28 5:00:23

Rust语言的基本介绍

rust缘起和目标 rust的英文是锈菌&#xff0c;是一种真菌&#xff0c;这种真菌的生命力非常顽强&#xff0c;其 在生命周期内可以产生多达5种孢子类型&#xff0c;这5种生命形态还可以相互转 化。“Rust”也有“铁锈”的意思&#xff0c;暗合“裸金属”之意&#xff0c;代表了R…...

编程日记 2023/2/28 4:59:16

新冠小阳人症状记录

原想挺过春节后再养&#xff0c;发现事与愿违。生理期期间抵抗力下降&#xff0c;所以在生理期第二天就有些症状了。可能是生理期前一天出去采购食物染上&#xff0c;也可能是合租夫妻染上。anyway&#xff0c;记录下自己的症状与相应有效的偏方&#xff1a; 第一天&#xff1a…...

编程日记 2023/2/28 4:58:07

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/9 2:42:46

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2026/2/5 19:40:10

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/2/4 4:39:19

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/11/5 4:36:26

day51 python CBAM注意力

目录 一、CBAM 模块简介 二、CBAM 模块的实现 &#xff08;一&#xff09;通道注意力模块 &#xff08;二&#xff09;空间注意力模块 &#xff08;三&#xff09;CBAM 模块的组合 三、CBAM 模块的特性 四、CBAM 模块在 CNN 中的应用 一、CBAM 模块简介 在之前的探索中…...

编程新知 2026/1/21 20:27:19

SFTrack：面向警务无人机的自适应多目标跟踪算法——突破小尺度高速运动目标的追踪瓶颈

【导读】 本文针对无人机&#xff08;UAV&#xff09;视频中目标尺寸小、运动快导致的多目标跟踪难题&#xff0c;提出一种更简单高效的方法。核心创新在于从低置信度检测启动跟踪&#xff08;贴合无人机场景特性&#xff09;&#xff0c;并改进传统外观匹配算法以关联此类检测…...

编程新知 2026/1/28 8:46:16