比较html页面中引入js的5种方法包含静态引入和动态引入

来源:网络 文章列表 2019-05-16 8
javascript;的引入方式是非常多种多样的,今天我们一起来总结探讨一下。页面引入js文件的5种方法介绍与对比

javascript;的引入方式是非常多种多样的,今天我们一起来总结探讨一下,并且进行一个小小的测试。

静态引入

静态引入也是我们最常用、最熟悉的最的引入方式。

一、直接在页面中编写JS代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            alert('直接引入js代码') 
        </script>
    </head>
    <body>
    </body>
</html>

2、在html语言的页面里引入外部 .js 文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        // 引入jquery.js 或者我们自己的js文件
        <script src="jquery.js" type="text/javascript"></script>
        
    </head>
    <body>
    </body>
</html>

 

动态引入js脚本文件

1、在js中引用其他js片段,document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>");

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
       
        <script type="text/javascript">
           document.write("<scr"+"ipt>alert('我是动态添加的js代码块')</scr"+"ipt>");
        </script>
        
    </head>
    <body>
    </body>
</html>

2、在js中引入外部js,通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。此时:<script></script>被拆解为"<scr"+"ipt .....</scr"+"ipt">,如果不这样拆解,浏览器可能会把父级js片段关闭掉,从而导致出错。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
          document.write("<scr"+"ipt src='jquery.js'></scr"+"ipt>");//动态引入外部js文件
        </script>
    </head>
    <body>
    </body>
</html>

3、通过DOM添加:var scr=document.createElement("script"); scr.src="xxx.js";

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
           // 动态创建script DOM标签
           var scr=document.createElement("script"); scr.src="xxx.js";
        </script>
    </head>
    <body>
    </body>
</html>

那这么多种Js加载方式那种更好呢,加载的时间顺序是怎么样的呢,我们来做个测试

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="2.js" type="text/javascript"></script>
        <script type="text/javascript">
             document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入
             alert(1);
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
             alert(5);
        </script>
    </head>
    <body>
    </body>
</html>

执行顺序:2-4-1-5-3-3

第三种和第四种交换顺序后:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="2.js" type="text/javascript"></script>
        <script type="text/javascript">
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入
             document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入 
             alert(1);
             document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
             alert(5);
        </script>
    </head>
    <body>
    </body>
</html>

执行顺序:2-1-5-3-4-3

可见

可以看出第三种方式:document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">引入js的代码,执行会迟与直接写入的js文本。

同时,第四种方式引入js的执行和直接写入的文本是按顺序执行。

总结下,常用的一下几种方式引入js代码:

  1. 在页面中直接写入<script type="text/javascript">js代码</script>。
  2. 在页面中引入外部文件<script src="xx.js"></script>。
  3. 在js中引入外部js,通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。
  4. 在js中引用其他js片段,document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>")。
  5. 通过DOM添加:var scr=document.createElement("script"); scr.src="xxx.js";
版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论