您的位置 首页 > 数码极客

js文件如何引用其他文件内容

温故而知新,再学一遍JavaScript

html中使用JavaScript有两种方式:

  • 通过<script>元素在html页面中直接嵌入代码。

  • 通过使用<script>元素的属性:src 引用外部JS文件。

注意:如果在<script></script>中使用src属性引入外部JS文件,同时又在其内部嵌入JavaScript 代码,则嵌入的代码会被忽略。

关于<script>元素:

<script>的属性共有六个。

  • src:可选。要引入的脚本文件的存放路径,可以是相对路径也可以存放在网上的url路径。

当使用属性src引入外部文件时,以下3个属性是有效可选的:

  1. async:可选。表示应该立即下载脚本,在多个外部脚本一同下载时,谁先下载完毕就先执行谁;所以使用异步加载脚本文件时,要确保他们互不依赖。注意:异步脚本一定会在页面的 load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之后执行。
  2. defer:可选。告诉浏览器立即下载,但延迟执行,表示在页面完全被解析和显示之后再执行脚本。即是浏览器遇到页面结束标志符</html>再执行脚本。按照HTML5 规范,是要求脚本按照它们出现的先后顺序,自上而下执行的。但是现实中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行。因此整个页面包含一个延迟脚本是一个不错的选择。
  3. charset:可选。表示通过 src 属性指定的文件的字符集。

· language:已废弃。

  • type:可选。表示脚本语言的 MIME 类型(内容类型),默认值: text/javascript

它的值通常是以下一些:

  • text/javascript
  • text/ecmascript
  • application/javascript
  • application/ ecmascript

以下两种写法是等价的:

注意:JS嵌入代码块内不能出现“</script>”字符串

当浏览器遇到字符串"</script>"时就会认为代码块已经结束,造成解析错误。如果确实需要显示,则应使用转义符:

错误写法:

应用转义符的正确写法:

在 XHTML 文档可以使用下面这种简化的引用外部脚本的形式

<script type="text/javascript" src="myjava; />

但是它不是标准的形式,在html页面中使用会导致某些浏览器不能正确识别解释,如IE。

所以建议使用如下的形式:

<script type="text/javascript" src="myjava;></script>

经验之谈:如果你的web页面引用的外部脚本是来自你不可控的服务器,如:别人的服务器,要注意别人随时可能更改服务器脚本代码,造成你的页面出错或者嵌入恶意代码,如自动弹出广告等情况的出现。

嵌入JS代码和引用外部JS文件的应用选择:

推荐使用“引用外部文件”的形式,因为它:

  • 更容易维护,程序员可以在不用理会html页面情况下,只专心维护Js独立文件即可。
  • 利于复用,加快页面加载。如果多个页面使用同一个Js文件,只需要下载一次即可,其他页面直接从缓存中读取,可加快页面加载显示,更好的用户体验。

关于<noscript>元素

当当前浏览器不支持脚本,或者浏览器支持脚本,但脚本被禁用时,为了让程序更友好,我们可用使用<noscript>当前页面需要浏览器支持(启用)Javascript!</noscript> 进行友好提示。

本节内容到此结束,下一节,一起学习一下:在hmtl页面什么位置引入JS文件或者代码块比较合理?使用户体验更好。有兴趣的朋友可用关注一下小编。

你在使用JS过程中有什么经验总结吗?欢迎在下方留言。

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“js文件如何引用其他文件内容”边界阅读