JavaScript基础知识
发表前端8 分钟读完 (大约1135个字)

JavaScript基础知识

JavaScript 是什么

  • JavaScript 是一门编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。
  • JavaScript 是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。
  • 进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
  • 折叠：//#region //#endregion

JavaScript 的实用工具

  • 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
  • 第三方 API —— 让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
  • 第三方框架和库 —— 用来快速构建网站和应用。

JavaScript 的特点

  • JavaScript 对大小写敏感，myDay 和 myday 是不同的。如果代码出现问题了，先检查一下大小写！

外部引入JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script src="index.js"></script>
</head>
<body>
    <!--2、在body中引入-->
    <script src="index.js"></script>
</body>
</html>

内部引入JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script>
        ……
    </script>
</head>
<body>
    <!--2、在body中引入-->
    <script>
        ……
    </script>
  <!--3、等价于上面的写法，上面是简写-->
    <script type="text/javascript">
        ……
    </script>
</body>
</html>

脚本调用策略

要让脚本调用的时机符合预期，需要解决一系列的问题。这里看似简单，实际大有文章。最常见的问题就是：HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用文档对象模型），若 JavaScript 加载于欲操作的 HTML 元素之前，则代码将出错。

“内部”、“外部”示例中，JavaScript 在文档头部，解析 HTML 文档体之前加载并执行。这样做是有隐患的，需要使用一些结构来避免错误发生。

“内部”示例使用了以下结构：

1
2
3
document.addEventListener("DOMContentLoaded", () => {
  // …
});

这是一个事件监听器，它监听浏览器的 DOMContentLoaded 事件，其标志了 HTML 文档体完全加载和解析。该代码块中的 JavaScript 在事件被触发后才会运行，因此避免了错误。

“外部”示例中使用了 JavaScript 的一项现代技术（defer 属性）来解决这一问题，它告知浏览器在遇到 <script> 元素时继续下载 HTML 内容。

1
<script src="script.js" defer></script>

上述情况下，脚本和 HTML 将一并加载，代码将顺利运行。

解决此问题的旧方法是：把脚本元素放在文档体的底端（也就是 标签之前，与之相邻），这样脚本就可以在 HTML 解析完毕后加载了。此方案的问题是：只有在所有 HTML DOM 加载完成后才开始脚本的加载/解析过程。对于有大量 JavaScript 代码的大型网站，可能会带来显著的性能损耗。

脚本阻塞问题实际有两种解决方案——async 和 defer :

  1. async：浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其他任何脚本时，async 是最理想的选择。「无序」
  2. 添加 defer 属性的脚本将按照在页面中出现的顺序加载，因此第二个示例可确保 jquery.js 必定加载于 script2.js 和 script3.js 之前，同时 script2.js 必定加载于 script3.js 之前。「有序」

⭐脚本调用策略小结：

  • 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
  • 如果脚本需要等待页面解析，且依赖于其他脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

JavaScript基础知识

http://example.com/2019/10/01/前端/JavaScript/JavaScript基础知识/

作者

冷冷

发布于

2019-10-01

更新于

2019-10-03

许可协议

CC BY-NC-SA 4.0

#
关注我

目录

最新文章

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×