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

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

news 文章来源：https://blog.csdn.net/seetoyou/article/details/129251667 2024/11/26 18:29:38

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

JavaScript引入方式

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

`静态引入`

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

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

内嵌式 写在script标签内

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

外链式 通过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('外链式')

`动态引入`

在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: '方一'};

通过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 };

使用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代码，才能在页面里使用JavaScript代码。静态引入行内式直接在DOM标签上使用 <!DOCTYPE html> <html lang"en"> <head><meta ch…...

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

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

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

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

Uncaught ReferenceError: jQuery is not defined

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

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

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

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

编程日记 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

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

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

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

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

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

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

LeetCode HOT100 (23、32、33)

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

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

电力监控仪表主要分类

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

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

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

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

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

SAP 应收应付重组配置

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

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

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

1、问题描述： 给定整数 n ，返回所有小于非负整数 n 的质数的数量。 2、示例如下： 3、代码如下： 第一种：比较暴力的算法 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的核心思想之一：控制反转。这里不再赘述，看我的文章即可了解：spring基础思想IOC其次就是java的反射，反射机制是spring的重要实现核心，今天我看spring的三级缓存解决循坏引用的问题时，发现一个…...

编程日记 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

目录 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交互处理的一个「辅助类」，主要用于拖拽以及滑动处理。以接口实现的方式，达到配置简单、逻辑解耦、职责分明的效果，并且支持所有的布局方式。功能拆解功能实现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)——以操作系统的角度述说线程与进程》一文详细讲述了线程、进程的关系及在操作系统中的表现，这是多线程学习必须了解的基础。本文将接着讲一下Java线程同步中的一个重要的概念synchronized. synchronized是Java中的关键字&#xff0c…...

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

Rust语言的基本介绍

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

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

新冠小阳人症状记录

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

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

SQL零基础入门学习（十四）

上篇：SQL零基础入门学习（十三） SQL NULL 值 NULL 值代表遗漏的未知数据。默认地，表的列可以存放 NULL 值。如果表中的某个列是可选的，那么我们可以在不向该列添加值的情况下插入新记录或更新已有的记录。这意味着该…...

编程日记 2023/2/28 4:57:00

Excel工作表不能移动或复制？看看是不是这两个原因

Excel工作表不能移动或复制？今天来看看如何解决。大家都知道，Excel表格分为工作簿和工作表，工作簿就是整个Excel文件；工作簿里面，也就是Excel表可以有多个工作表。而各个工作表之间是可以相互移动或复制的&#xf…...

编程日记 2023/2/28 4:55:52

利用递归实现括号匹配

案例引入以下则是各个字符串经过括号处理之后的结果：12((21))(12-->12(21)1232((((2121)212(21)-->32(2121)212(21)ABDF((SA)SA)SA(SA)SA(((-->ABDF((SA)SA)SA(SA)SA算法思路：这个问题的解决方法就是将字符按顺序逐一加入到新的string容器store…...

编程日记 2023/2/28 4:54:44

14.线程数量怎么制定？

什么是CPU 密集型任务和耗时 IO 型任务 ？ CPU 密集型任务 CPU 密集型任务，比如加密、解密、压缩、计算等一系列需要大量耗费 CPU 资源的任务。耗时 IO 型任务数据库、文件的读写，网络通信等任务，这种任务的特点是并不会特别消耗…...

编程日记 2023/2/28 4:53:37

C++中STL标准模板库学习记录

文章目录：1.vector1.1 遍历方式1.2 构造函数1.3 容量大小问题1.4 插入和删除1.5 存取值1.6 交换两个vectot的元素1.7 预定义存储空间2.string3. deque4. stack4.1 常用函数5. queue5.1 特点5.2 方法6. list6.1 优点6.2 缺点6.3 构造函数6.4 交换6.5 大小6.6 插入和删…...

编程日记 2023/2/28 4:52:28

《数据库系统概论》学习笔记——第六章关系数据理论

教材为数据库系统概论第五版（王珊） 这一章重点在于各种范式的概念和将低级范式转为高级范式。一定要看多值依赖和4NF（因为这个概念很绕又烦，但是期中期末都考了）。最后计算题就是一定要会：算闭包&#xff0…...

编程日记 2023/2/28 4:51:19

Odoo | Webserivce | 5分钟学会【JSONRPC】接口开发

文章目录Odoo - JsonRPC1. Odoo内方法结构（接收端）2. POST接口请求结构（发送端）3. 实例测试Odoo - JsonRPC 1. Odoo内方法结构（接收端） # -*- coding: utf-8 -*- import odoo import logging import trac…...

编程日记 2023/2/28 4:50:10

搜广推 NeuralCF - 改进协同过滤+矩阵分解的思想

😄 NeuralCF：2017新加坡国立大学提出。【后文简称NCF】 😄 PNN：2016年上海交通大学提出。文章目录 NeuralCF动机原理general NCFNCF终极版（GMF+MLP的结合）缺点优点ReferenceNeuralCF 动机前面学了MF，可知MF在用户-物品评分矩阵的基础上做矩阵分解（用户矩阵Q和物品…...

编程日记 2023/2/28 4:49:03

dbever连接kerberos认证的hive

文章目录一、本地安装kerberos客户端二、本地kerberos客户端登录三、dbever连接hive一、本地安装kerberos客户端下载地址：https://web.mit.edu/kerberos/dist/index.html 安装：下一步或者自定义安装即可安装后会自动生成配置文件：C:\Pro…...

编程日记 2023/2/28 4:47:55

pom依赖产生的各种问题

文章目录问题一(org.apache.ibatis.session.Configuration)解决方法问题二(ERROR StatusLogger No log4j2)解决方法问题三(com.google.common.util.concurrent)解决方法问题四(start bean documentationPluginsBootstrapper)解决方法问题五(Unable to infer base url. )解决办法…...

编程日记 2023/2/28 4:46:46

商务网站开发的基本流程/网络营销的四大基础理论

参考链接 https://leetcode-cn.com/problems/encode-and-decode-tinyurl/ 题目描述 TinyURL是一种URL简化服务， 比如：当你输入一个URL https://leetcode.com/problems/design-tinyurl 时，它将返回一个简化的URL http://tinyurl.com/4e9iAk…...

编程日记 2024/11/26 17:07:22

网站建设的目标及功能定位/商品关键词怎么优化

一、html和css部分 1、如何理解CSS的盒子模型？ 标准盒子模型：宽度内容的宽度（content） border padding低版本IE盒子模型：宽度内容宽度（contentborderpadding） 复制代码2、BFC？ *…...

编程日记 2024/11/26 15:45:56

我想去澳大利亚做按摩找哪个网站/平台外宣推广技巧

如何使用Qt4，设置QLabel中字体的颜色。其实，这是一个比较常见的问题。大致有几种做法：一是使用setPalette()方法；二是使用样式表；三是可以使用QStyle；四是可以在其中使用一些简单的HTML样式。下面就具体说一…...

编程日记 2024/11/26 15:03:35

百度手机网站优化指南/营销网

企业老板还在为处理有机废气烦恼吗？您应该了解一下活性炭吸附法工业有机废气是指工业生产过程中排出的含挥发性有机物的气态污染物，这些废气如果得不到有效处理会对工作人员和周围环境造成严重的危害。因此治理有机废气，让废气排放达到环保标…...

编程日记 2024/11/26 13:56:46

怎么知道网站有没有备案/2345网址导航删除办法

React 路由理解: 什么是路由？1: 一个路由就是一个映射关系(key: value);2: key: 为路径, value: 为function 或者component路由的分类:后端路由: 理解为: value是 functuion, 用来处理客户提交的请求。注册路由: router.get(path, (ctx, next)> {});工作过程: 当…...

编程日记 2024/11/26 13:50:44

北京建设网站专家/网店推广的作用是什么

把大象装进冰箱需要几步？ 其实，如果顺利的话，AS 生成 so 的步骤还是比较清晰的。但是，随着我升级到了 AS 最新版「3.3.1 稳定版」而且我也不再想使用下面两种方法解决 Your project contains C files but it is not using …...

编程日记 2024/11/26 13:31:28

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

JavaScript引入方式

静态引入

动态引入

相关文章：

`静态引入`

`动态引入`