javaScript引入方式

来源：互联网发布：linux中文输入法有哪些编辑：程序博客网时间：2024/05/24 02:47

前言：

毕业到现在从事前端开发已经半年左右，做过移动端和PC端大小不同项目，发现自己所学习的技能都只是为了更好的完成项目，从来没有花时间好好整理下所掌握的知识。农历三月百花盛开，群芳争艳；新历三月是个跳槽季，各路神仙汇集一堂，大展神通。原本只打算安安稳稳、踏踏实实工作的我，却受朋友的蛊惑，邀请我去他们公司试试，听朋友介绍他们公司福利好，妹子靓，氛围棒，环境优……我那颗老僧入定，坚若磐石的心动摇了。我犹豫，渴望，心情像久未人事的少妇在红杏出墙时的忐忑。我兴奋地开始整理半年来所做的大小项目，看着那些存在公司硬盘的大大小小项目，心里油然升起莫名的自信，觉得经验在手，天下我有。当我整理完项目后，我打开浏览器准备看下笔试题，那一道道笔试题像一把把锋利的尖刀直插我心脏，虽然大多数能看个所以然，但是要我自己一个个写出来好比登上那珠穆朗玛峰，心情一落千丈，就像喝醉酒的老男人看着躺在床上脂如白玉窈窕可人的“小绵羊”，心有余而力不足…….为了让自己变得更加强大，我抬起头，仰望苍穹，嘴角露出属于男人的自信……为了那一枪打的更持久，我抖了抖衣角，低下头，从基础开始做起。

言归正传，下次再扯淡！

JavaScript引入方式

嵌入式

<script type="text/javascript">    function sayHi(){        alert("Hi!");    }</script>

注意点：文档加载和解析方式从上到下，意味着嵌入式的javaScript也将从上至下依次解析，所以需要注意嵌入式的javaScript存放的位置，因为页面上javaScript内部所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。
测试：

<head>    <meta charset="UTF-8">    <title>我是一个死循环</title>    <script>        var i=0;        while(true){            i++;        }    </script></head><body><p>因为那该死的script,让我露个面都不行</p></body>

测试结果显示，JavaScript在一直计算，页面中其余内容无法被加载或显示。
外部引用

head头部中引用：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>我是一个测试用例</title>    <script type="text/javascript" src="example1.js"></script>    <script type="text/javascript" src="example2.js"></script></head><body>    <!--这里放内容--></body></html>

body内容之后引用：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>我是一个测试用例</title></head><body>    <!--这里放内容-->    <script type="text/javascript" src="example1.js"></script>    <script type="text/javascript" src="example2.js"></script></body></html>

注意点：head中引用JavaScript外部文件，意味着必须等到JavaScript代码被全部下载、解析、执行完成后才开始呈现页面内容，这种引入方式会导致页面呈现的延迟，所有慎用。body内容之后引用，则先呈现页面内容，再下载JavaScript代码，这种加载方式会出现页面可能在一段时间内无法进行交互，因为JavaScript代码没有被解析完成。当然以用户体验为先，我们选择第二种引入方式。

JavaScript加载顺序：

浏览器会根据`<script>`元素在页面中的先后顺序对他们依次解析，前提是不存在defer和async属性。意思是说在第一个`<script>` 包含的代码解析完成后，第二个`<script>` 才会被解析，以此类推。

延迟脚本defer属性

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>我是一个测试用例</title>    <script type="text/javascript" defer="defer" src="example1.js"></script>    <script type="text/javascript" defer="defer" src="example2.js"></script></head><body>    <!--这里放内容--></body></html>

defer:可选。表示脚本可以延迟到文档完全被解析之后再执行。只对外部脚本文件有效。
从属性的解释就可以知道它的作用，不过需要注意的是，延迟脚本不一定会按照顺序执行，所以最好只包含一个延迟脚本。和defer类似的还有一个属性：async，这个属性我个人不太推荐去了解它，因为几乎不怎么用到，如果有兴趣的哥们自己去查看相关资料。

嵌入式和外部引用选择

HTML中嵌入JavaScript代码虽然没问题，但一般认为最好的做法还是尽可能的使用外部文件来包含JavaScript代码。
优势：
可维护性：遍及不同HTML页面的JavaScript会造成维护问题，
可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件，也就是，如果两个页面都使用同一个文件，那么文件只需要加载一次。

<noscript> 元素

说完JavaScript引入方式后提及下 <noscript> 元素，早期浏览器面临一个特殊问题，当浏览器不支持JavaScript时如何让页面平稳退化，这个问题的最终解决方案就是创造一个 <noscript> 元素。

使用场景：
1：浏览器不支持脚本
2：浏览器支持脚本，但脚本被禁用。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>我是一个测试用例</title>    <script type="text/javascript" defer="defer" src="example1.js"></script>    <script type="text/javascript" defer="defer" src="example2.js"></script></head><body>    <noscript>        <p>本页面需要浏览器支持（启用）JavaScript</p>    </noscript></body></html>

小弟开始整理相关知识，如果有不同哪里理解不对的，请大神们多多指教。

3 0