在网页编写JavaScript时,可以通过嵌入式、外链式和行内式这3种方式来引入JavaScript代码,下面针对这3种方式分别进行讲解。
1.嵌入式
嵌入式就是使用<script>标签包裹JavaScript代码,直接编写到HTML文件中,具体实例如下:
上述示例演示了两种书写方式,其中<script>标签的type属性用于告知浏览器脚本的类型,由于HTML5中该属性默认值为"text/javascript",因此在编写时可以省略。
2.外链式
外链式是指将JavaScript代码保存到一个单独的文件中,通常使用“js”作为文件的扩展名,然后使用<script>标签的src属性引入文件,具体示例如下:
通过示例可以看出,src属性是一个文件路径或URL地址,可以指定为如下形式。
相对路径:“js/demo.js”引入当前目录下的js子目录中的demo.js文件;“../js/demo.js”引入上级目录下的js子目录中的demo.js文件。
绝对路径:“/js/demo.js”引入网站根目录下的js子目录中的demo.js文件;如果网页在本地,可以通过“file://c:/js/demo.js”引入本地文件
URL地址:如“http://js.test/demo.js”;若自动使用当前页面协议,可写为“//js.test/demo.js”。
在实际开发中,当需编写大量、逻辑复杂、特有功能的JavaScript代码时,推荐大家使用外链式。相比嵌入式,外链式的优势可以总结为以下3点。
嵌入式会导致HTML与JavaScript代码混合在一起,不利于修改和维护。
嵌入式会增加HTML文件的体积,影响网页本事的加载速度,而外链式可以利用浏览器缓存提高速度。例如,在多个页面中引入了相同的js文件是,打开第一个页面后,浏览器就会将js文件缓存下来,下次打开其他页面时,就不用重新下载js文件了。
外链式有利于分布式部署。网页中链接的js、css、图片等静态文件可以部署到CDN服务器上,利用CDN的优势加快下载速度。
为了降低JavaScript阻塞问题对页面造成的影响,可以使用HTML5为<script>标签新增的两个可选属性:async和defer,下面分别介绍其作用。
1) async
async用于异步加载,即先下载文件,不阻塞其他代码执行,下载完成后再执行。
2) defer
defer用于延后执行,即先下载文件,知道网页加载完成后再执行。
添加async或defer属性后,即使文件下载失败,也不会阻塞后面的JavaScript代码执行。
3.行内式
行内式是将JavaScript代码作为HTML标签的属性值使用。例如,单击“test”按钮时,弹出一个警告框提示“Hello World”,具体示例如下。
JavaScript还可以写在HTML标签的实际属性中,事件是JavaScript中的一种机制。例如,单击网页中的一个按钮时,就会触发按钮的单击事件,具体示例如下。
上述代码实现了单击“test”按钮时,弹出一个警告框提示“Hello World”。
由于现代网页开发提倡结构、样式、行为的分离,即分离HTML、CSS、JavaScript三部分的代码,避免直接写在HTML标签的属性中,从而更有利于维护。因此在实际开发中不推荐使用行内式。