JS的三种引入方式以及JS预加载

JS的三种引入方式

JS代码我们应该写在什么地方呢?

我们学过的所有的代码都是一种语言,不同的语言对应的语言文件后缀名不一样，所以在HTML文件中的所有的数据,计算机默认以对待HTML数据的处理方式进行处理。

如果需要使用JS和HTML的搭配就需要考虑将JS代码写在什么地方.

行内JS

  • 直接将JS代码写在HTML标签内的某个属性值里面

内嵌JS

  • 在HTML文件里面的某个地方添加一个<script>标签,然后在这个<script>标签内部书写JS代码

外联JS

  • 专门创建一个JS文件,这个JS文件的后缀名为.js,然后在JS文件中书写代码,最后在需要的HTML中导入JS文件即可

JS的三种引入方式实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js三种引入</title>
    <!-- 3.外联js -->
    <script src="js/js.js"></script>
    <script>
        // 2,内嵌js
        alert("你好呀!")
    </script>
</head>

<body>
    <!-- js嵌入页面引入方式 -->
    <!-- 1,行间js(主要用于事件) -->
    <input type="button" value="点击一下" onclick="alert('你好世界!')">
    <!-- 整个程序的执行流程是从上到下的所以我们会先看到弹窗中的你好呀!然后才会看到按钮,点击之后会出现弹窗你好世界! -->
</body>

</html>

JS三种引入方式的优缺点

  1. 方便：行内JS>内嵌JS>外部JS
  2. 权限：外部JS>内部JS>行内JS
  3. 使用最多：（外部JS、内部JS）>行内JS

引入方式

优点

缺点

行内

书写方便,优先级高

控制范围小,可读性差

内嵌

可以直接在<script>标签中直接书写

没有实现完全的语言分离

外联

完全实现了语言分离,适合大项目的制作

造成文件的增加

注意;

  • 如果对于同一个HTML内部的同一个标签使用不同的JS方式，那么行内JS最优先，内嵌JS其次，外联JS最后.

JS预加载

  • 我们都知道代码的执行是从上到下的,尤其是针对于编译语言或者脚本语言而言
  • 我们可以把JS的加载理解为当渲染引擎和JS引擎同时工作时,如果JS引擎中遇到需要使用到HTML标签等工作时，务必要保证渲染引擎先完成渲染工作，因此规定的内嵌写法中标准书写JS的位置在<Body>标签中的最下方进行书写.

如果将内嵌JS的<script>标签写在非标准位置可以使用一个方法

  • window.onload() 方法,该方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

用法实例:

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}