导入js的三种方式

最新推荐文章于 2024-07-31 08:30:22 发布

syzdev

最新推荐文章于 2024-07-31 08:30:22 发布

阅读量2.4w

点赞数 4

分类专栏：前端

本文链接：https://blog.csdn.net/syzdev/article/details/88643339

版权

前端专栏收录该内容

29 篇文章 8 订阅

订阅专栏

文章目录

1 行内导入方式（不推荐，不安全）

<body>
    <span onclick="alert('第一种方式')">导入js的第一种方式，行内导入</span>
</body>

2 内嵌式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="gbk">
        <title>index</title>
        <script>
		alert('第二种方式');
	</script>
    </head>
    <body>
    </body>
</html>

3 外链式

如果把script元素放在head元素里，待浏览器经过下载、解析、执行完js文件之后，才会呈现页面内容。如果一个页面需要很多个js文件，那么浏览器可能会出现短暂的“白板”，用户体验不好。所以，我们应该把js文件放在</body>的前面，这样浏览器会先展现页面给用户。type属性可以不写

<script src="/xxx.js"></script>

4 注意点

内嵌导入和外链导入不能合并到一起

<script src="/xxx.js">
	alert('这个不会被执行');
</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

syzdev

关注关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JS的三种引入方式[javaScript入门]

m0_46220435的博客

01-17

7949

详细介绍了javaScript三种引入方式行内式，嵌入样式、外部样式及其使用方式；第一种：行内引入第二种：内部引入(内嵌引入) 第三种：外部引入

导入css的4种方式和导入js的方式

03-18

本文将详细解析导入CSS的四种方式以及导入JS的方式，帮助你更好地理解和掌握这些技术。 ### 导入CSS的四种方式 #### 1. 链接外部CSS文件（`<link>` 标签）这是最常见的方式，通过在HTML文件的`<head>`部分添加`...

参与评论您还未登录，请先登录后发表或查看评论

js如何实现导入

weixin_59525879的博客

10-10

1109

例如在现代浏览器或 Node.js 中。如果在非模块化的环境中（例如在普通的 HTML 页面中），可以使用。关键字来导入其他模块或文件中的函数、变量、类等内容。是需要导入的模块或文件的路径，可以是相对路径或绝对路径。同时，需要在支持模块化的环境中使用。现在想要在另一个文件中使用该函数，则可以使用。是需要导入的内容，可以是函数、变量、类等；标签来引入 JavaScript 文件。在 JavaScript 中，可以使用。导入的模块或文件必须使用。文件，其中包含了一个。

Javascript Es6导包的使用

热门推荐

喜你已久丶不弃的博客

04-02

4万+

javascript有三种引入方式：1、行内引入:<开始标签 on+事件类型=“js代码”></结束标签>行内引入方式必须结合事件来使用，但是内部js和外部js可以不结合事件<body> <input type="button" onclick="alert('行内引入')" value="button" name="button"

js的三种引入方式

bubujieyihan123的博客

12-21

337

点我试试2

javascript实现动态导入js与css等静态资源文件的方法

10-23

在JavaScript中，动态导入js和css等静态资源文件是一种提高页面加载效率的策略。它允许我们在需要时才加载相应的资源，而不是一次性加载所有文件。这有助于优化用户体验，尤其是在处理大型项目或按需加载功能时。...

ThreeJS导出三维模型、导入三维模型、导入三维动画DEMO

12-07

总的来说，Three.js为WebGL提供了一种方便的方式来创建和展示3D内容。无论你是希望将外部3D模型引入到网页中，还是想要播放复杂的3D动画，Three.js都能提供强大的工具和支持。通过不断实践和学习，你将能够利用Three...

详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

10-15

本文将详细介绍如何在IntelliJ IDEA (IDEA)中将ECharts引入Web项目，具体包括两种方法：直接使用JS文件引入和通过Maven依赖导入。 ### 一、JS文件引入 1. **下载ECharts**：访问ECharts官方网站...

JavaScript的三种引入方式

qq_41416856的博客

12-07

4616

第一种：外部引入` <script type="text/javascript" src="路径/文件名.js"></script> 第二种：内部引入 <script type="text/javascript">js代码</script> 第三种：行内引入 <input type="button"

js 1.引入的三种方式

weixin_43714301的博客

01-16

296

1.js引入的三种方式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>  <script type="text/javascript"></script> ...

JavaScript引入的三种方式（附实例）

weixin_45135068的博客

08-01

858

内联在标签内直接引用 <div οnclick="alert('你好')"> 点我 </div> 用script包裹 <script> alert("猪妹还没醒害"); </script> 注意：此方法在HTML文件中任意位置都有效引入外部js文件方法： <script crc="../js/test.js"> </script> .

js基础 - js的3种引入方式

康一夏忙中偷闲的日子

12-27

292

js的3种引入方式行内引入内部引入外部引入行内引入最后加载 <body onload="alert('行内引入：js已加载')"></body> <input type="button" value="行内引入" οnclick="javascript:alert('行内引入：js已加载');"> 内部引入按照代码顺序，从上到下加载 <scrip...

JS引入方式有哪些？

m0_64986878的博客

06-21

2350

JS引入方式有哪些，ES6中JS引入方式，常用的JS引入方式，JS引入

三种引入JavaScript方法

qq_40641206的博客

02-04

1838

三个简单JavaScript语句 1、弹窗：alert(); 2、网页控制台打印：console.log(); 3、页面body显示：document.write(); 引入JavaScript方法 1,用JavaScript：作为一个前缀，所有可以设置url的地方都可以使用JavaScript代码 <a href="javaScript:alert('运行JavaScript')">...

js的三种引用方式?

weixin_34302798的博客

01-03

4744

浏览器导入JS的三种方式行内导入JS （慎用不安全） <div onclick="alert('hello world')">点我</div> 复制代码内嵌式 <script> // 内嵌式 alert("hello world"); </script> 复制代码外联式 <script src="./

导入vue文件的方式有几种

05-25

在 Vue.js 中，有三种导入 Vue 单文件组件的方式： 1. 通过 Vue CLI 创建的项目可以使用 import 导入.vue 文件： ``` <template> <div>Hello World!</div> </template> <script> export default { name: 'App', data() { return { msg: 'Hello Vue!' } } } </script> <style> div { color: red; } </style> ``` 在使用组件时，可以这样导入： ``` <template> <div> <App /> </div> </template> <script> import App from './components/App.vue'; export default { name: 'MyComponent', components: { App } } </script> ``` 2. 通过单文件组件的 vue-loader 转换为 JavaScript 模块，然后使用 import 导入： ``` import MyComponent from './MyComponent.vue' ``` 3. 通过 require 导入： ``` const MyComponent = require('./MyComponent.vue') ```