HTML导入JavaScript的方式

本文详细介绍了在HTML中使用JS代码的两种主要方式:内嵌模式与外链模式。内嵌模式直接在HTML页面中使用<script>标签插入JS代码,适用于简单操作。外链模式则通过<script>标签链接外部.js文件,实现行为与结构分离,便于代码复用和维护。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

三、HTML中如何使用JS代码

3.2 内嵌模式

CSS内嵌,在HTML页面内嵌在<style>标记中;而JS内嵌,内嵌在HTML页面<script>标记中。

比如:

<script type="text/javascript">
    document.write("ailee最美")
</script>

注:type必须写

 

3.2 外链模式

JS根据CSS-样,也可以将行为与结构进行分离,将行为单独的创建的文件,然后再外链的方式将JS文件链接到HTML页面中,然后创建JS文件后缀名为.js

 

代码如下:

<!-- 在css中,我们使用link标记来进行外链-->
<!-- 在JS中,我们还是使用script标记来外链-->
<script src="../../js/demo.js" charset="utf-8"></script>

 

外链的最大的好处,将行为和结构分离,并且可以做到行为复用。
使用外链时,需要注意的事项:

A)外部脚本文件中,只能编写JS代码,不允许出现其他代码

B)在外部链接JS文件时,src属性中写文件的路径,并且推荐使用相对路径

C)在链接的<script>标记中,请不要编写任何脚本代码,如果需要内嵌,请再定义一个<script>标记

D)<script>标记可以写HTML页面中的任何地方,没有特殊要求的情况下,可以写在 <head>里面,但是如果对JS代码有加载顺序的要求的,,那么请写在body最下方

 

### 如何在 Vue 中正确导入外部 JavaScript 文件 在 Vue 项目中,可以通过多种方式导入外部 JavaScript 文件。以下是几种常见的方法及其适用场景: #### 方法一:通过 HTML 的 `<script>` 标签全局加载 如果需要在整个应用范围内使用某个 JavaScript 文件,则可以在 `index.html` 文件中通过 `<script>` 标签引入该文件[^3]。 ```html <body> <div id="app"></div> <!-- 导入外部 JS 文件 --> <script src="/path/to/external-script.js"></script> </body> ``` 此方法适用于那些不需要模块化管理的通用脚本库,例如第三方 SDK 或工具函数集合。 --- #### 方法二:在 Vue 组件内部通过 `import` 命令局部加载 当只需要在一个特定组件中使用某些功能时,可以利用 ES6 的 `import` 语法,在组件的 `<script>` 部分直接导入所需的 JavaScript 文件[^1]。 ```javascript <script> // 局部导入外部 JS 文件 import externalScript from '@/path/to/external-script.js'; export default { name: 'MyComponent', mounted() { // 调用导入的函数或变量 externalScript.someFunction(); } }; </script> ``` 这种方法能够减少不必要的依赖注入,使代码更加清晰和高效。 --- #### 方法三:在入口文件(main.js)中统一加载 对于一些需要被多个组件共享的功能性代码或者配置项,可以选择将其放置于项目的入口文件 `main.js` 中进行集中理。 ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; // 全局导入外部 JS 文件 import externalScript from './assets/js/external-script.js'; Vue.config.productionTip = false; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 这样做的好是可以让这些资源自动成为整个应用程序的一部分而无需重复声明。 --- #### 方法四:借助 CSS 文件间接引用 如果有涉及样式相关的逻辑操作(比如自定义字体),也可以先创建一个专门用于存储此类设置的 CSS 文件,并在里面完成对外部资源路径的指定;之后再按照常规流程将它嵌套到目标位置即可[^4]。 ```css /* styles.css */ @font-face { font-family: "CustomFont"; src: url('/fonts/custom-font.ttf') format('truetype'); } ``` 随后只需正常地把上述样式表加入至任意地方便能生效了——无论是单独写成独立片段还是与其他部分混合在一起都无妨! --- ### 总结 以上介绍了四种不同的策略来实现向 Vue 应用程序添加额外支持的能力。具体采用哪一种取决于实际需求以及个人偏好等因素综合考量后的决定结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值