导入JS的三种方式

803次阅读 Web 2018-09-27

  • 行内导入（不推荐使用）

    <html>
    <body>
        <div onclick="alert('hello world!')">世界 你好！</div>
        <!--onclick:点击触发一个事件，alert：弹出一个对话框-->
    </body>
    </html>

PS:我们平时写HTML时应慎重使用（如果可以完全避免的话最好）行内导入JS，原因如下：

1.这种方式跟页面结构代码耦合性太强了，后期维护很不方便。 2.这种方式在开发过程中会导致产生很多的冗余代码。 3.这会增加下载页面内容的大小，降低加载速度。 4.这种方式很不安全。因为别人可能会通过你的代码给你的系统伪注入一些东西导致你的系统崩溃、信息混乱等。

  • 内嵌式
    <html>
    <body>
        <script typ>
            alert('hello world!');
        </script>
    </body>
    </html>

优点：相对于使用行内导入js，内嵌js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护。 缺点：嵌入的js代码仅限于当前页面的使用，代码无法被多个页面重复使用，导致代码冗余度较高。

  • 外链式（推荐使用）
    <html>
    <body>
        <!--以当前html文件为依托找到js文件夹下“1.js”这个JS代码文件-->
        <script str="js/1.js"></script>
    </body>
    </html>

1.页面代码跟js代码实现有效分离，降低耦合度 2.便于代码的维护和扩展 3.有利于代码的复用

注意：内嵌导入和外链导入不能合并在一起，如果当前是外链导入的JS，那么当前在SCRIPT脚本块中编写的所有代码都不会执行。

    <html>
    <body>
    <!--在这段代码中，只会执行导入的1.js中的代码，不会执行脚本块中的alert-->
        <script src="js/1.js">
            alert('hello world!');
        </script>
    </body>
    </html>

参考博文

手机上阅读

本文由 giao创作， 采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
原文地址：《导入JS的三种方式》

 最后一次更新于2018-09-27
js html

0 条评论

添加新评论

Markdown is supported.