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

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

news 2026/5/12 18:04:37

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

AI助手碳核算技能：基于MCP协议与CCDB数据库的实战指南

1. 项目概述&#xff1a;当AI助手学会“碳核算” 如果你是一名开发者、数据分析师&#xff0c;或者任何需要处理碳排放相关工作的从业者&#xff0c;最近可能被一个词频繁刷屏&#xff1a;AI Agent。我们总希望手边的AI编程助手&#xff08;比如Cursor、Claude Code&#xff0…...

编程新知 2026/5/12 16:49:10

NodeMCU PyFlasher：让物联网开发变得简单的固件烧录神器

NodeMCU PyFlasher&#xff1a;让物联网开发变得简单的固件烧录神器 【免费下载链接】nodemcu-pyflasher Self-contained NodeMCU flasher with GUI based on esptool.py and wxPython. 项目地址: https://gitcode.com/gh_mirrors/no/nodemcu-pyflasher 还在为NodeMCU开…...

编程新知 2026/5/12 16:28:19

3分钟掌握微信聊天记录永久保存：从数据备份到智能分析完全攻略

3分钟掌握微信聊天记录永久保存&#xff1a;从数据备份到智能分析完全攻略 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/…...

编程新知 2026/5/12 14:38:44

ncmdumpGUI：解锁网易云音乐NCM文件格式的终极解决方案

ncmdumpGUI&#xff1a;解锁网易云音乐NCM文件格式的终极解决方案 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 还在为网易云音乐下载的NCM格式文件无法在其…...

编程新知 2026/5/12 13:11:57

从零搭建AI增强型第二大脑：NotebookLM+Obsidian+Dataview三体联动，7天知识处理效率提升3.8倍

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM与Obsidian整合的底层逻辑与价值定位 NotebookLM 与 Obsidian 的整合并非简单插件叠加&#xff0c;而是基于“语义增强型知识工作流”的范式迁移。其底层逻辑根植于双引擎协同&#xff1a;No…...

编程新知 2026/5/12 12:04:43

华为eNSP模拟企业网：用VRRP+MSTP搞定500人公司的网络冗余与隔离（附排错记录）

华为eNSP实战&#xff1a;构建500人企业级网络的高可用架构 当一家企业发展到500人规模时&#xff0c;网络架构的稳定性和可靠性就成为业务连续性的关键保障。作为网络工程师&#xff0c;我们经常面临这样的挑战&#xff1a;如何在有限的预算下&#xff0c;设计出既满足部门隔离…...

编程新知 2026/5/12 11:15:52

从Softmax到ArcFace：PyTorch实战解析人脸识别中的角度间隔损失函数

1. 从Softmax到ArcFace&#xff1a;人脸识别损失函数的进化之路 人脸识别技术如今已经深入到我们生活的方方面面&#xff0c;从手机解锁到机场安检&#xff0c;背后都离不开一个关键环节——如何让模型学会区分不同的人脸。这就像教小朋友认人一样&#xff0c;我们需要告诉模型…...

编程新知 2026/5/12 11:12:50

别再照搬Zynq教程了！手把手教你为Arty A7-35T配置MicroBlaze的SPI Flash启动（附时钟连接避坑指南）

别再照搬Zynq教程了&#xff01;手把手教你为Arty A7-35T配置MicroBlaze的SPI Flash启动&#xff08;附时钟连接避坑指南&#xff09; 在FPGA开发领域&#xff0c;Zynq系列因其ARMFPGA的异构架构而广受欢迎&#xff0c;网上教程资源也最为丰富。但这也导致了一个常见陷阱——许…...

编程新知 2026/5/12 10:48:10

容器化技术从入门到精通：Docker与Kubernetes实战指南

1. 项目概述&#xff1a;从零到一构建容器化认知体系最近在技术社区里&#xff0c;经常看到有朋友在讨论“stephrobert/containers-training”这个项目。乍一看&#xff0c;这像是一个关于容器技术的培训或学习资料库。作为一个在云原生和容器化领域摸爬滚打了多年的从业者&…...

编程新知 2026/5/12 9:26:28

终极免费跨平台Steam创意工坊下载器：告别重复购买，轻松获取1000+游戏模组

终极免费跨平台Steam创意工坊下载器&#xff1a;告别重复购买&#xff0c;轻松获取1000游戏模组 【免费下载链接】WorkshopDL WorkshopDL - The Best Steam Workshop Downloader 项目地址: https://gitcode.com/gh_mirrors/wo/WorkshopDL 你是否在Epic Games Store或GOG…...

编程新知 2026/5/12 9:22:24