宿主环境和语言概述

blackWahle
74 阅读5分钟

1. 引言

JS作为嵌入浏览器的脚本语言而设计，其核心内容是非常精简的，除了标准库(Array、Math)和基本语法结构等，就没有其他内容了。随着技术发展，这种嵌入式且精简的特性，使得JS非常适合嵌入到更多大型的应用程序中，尤其在V8诞生后，也催生诸如Node之类的项目，这也使得JS可以运行更多的环境中，不再局限于客户端浏览器。现代JS既能做客户端开发、也能做服务端开发、桌面应用程序等等。

这种嵌入式的环境我们称为宿主环境， 现在最常见的JS运行环境就是客户端浏览器和服务端Node环境。宿主环境通过JS对象模型描述自己的功能和接口，从而使得JS去控制宿主环境实现交互需求。例如：

  • Node环境:提供了文件操作、网络通信、文件I/O等操作系统级别的API供JS调用。
  • 客户端浏览器环境: 提供了DOM、BOM、Canvas、音视频等API供JS调用。

JS的强大和复杂，正是来源于这些宿主环境提供的大量API，强大是因为这些API涵盖了大量的业务场景，从客户端到服务端的各种需求几乎都能实现。而复杂度体现在，掌握大量API的同时还要结JS本身的一些具有较高难度的核心特性，例如原型、闭包、和运行机制来实现高性能、可维护的代码。

因此要熟悉精通JS，需要有长期大量的项目实践。

对于WEB前端层面来说，JS除了ECMA标准中的语法和标准库外，还包括如下两个部分：

  • DOM规范
    • 由W3C定义 用于操作DOM文档、以及CSSOM(这是DOM的扩展，定义JS操作元素样式的规范)
  • BOM规范
    • 控制浏览器行为，例如前进、后退、刷新等，浏览器厂商众多，没有统一标准

DOM和BOM可以统称为WEB API，但是实际上DOM规范非常庞大，是一个独立的标准。

2. 沙盒机制

JS作为浏览器脚本，设计之初就没有提供I/O操作 输入输出相关的API。

I/O操作：输入Input-将外部数据传入程序 、输出Output-将程序中的数据发送到外部设备或系统

  • 输入 : 从键盘读取用户输入、 从文件读取数据 、 从网络读取数据
  • 输出 ：将结果输出到屏幕 、将数据写入文件 、发送数据到网络

在引言中，我们知道不同的宿主环境提供的API是不一样的。浏览器环境下提供的API，大多都是基于操作系统底层API做了一层封装然后暴露给JS引擎的。这些API不能直接访问用户文件系统、硬件信息、系统资源等涉及到用户隐私、安全的信息。因为浏览器是客户端软件，直面用户，隐私和安全非常重要，必须要有严格的安全机制，这也是JS设计时没有I/O的核心原因。因此，相较于服务端环境，比如Node，浏览器提供的涉及底层的API通常功能都是有限的，屏蔽了一些权限，从而保证用户隐私安全。如何屏蔽？就是沙盒技术

沙盒也称为沙箱，英文叫Sandbox，有着严格的边界，保证了安全性。想象一下，一群孩童在一个沙坑中玩耍，沙坑是有大小边界的，他们只能被限制在这个区域中玩耍。这样就很好理解了。

使用沙盒技术的场景有很多：浏览器环境、虚拟机、容器技术等等

沙盒技术是一个广义的技术理念和实践规范，没有统一的标准，其核心思想是隔离和限制， 但是沙盒技术曲线十分陡峭，非常复杂。在不同的场景下，实现的技术手段是不一样的，但是目的都是为了构建受限的运行环境，防止代码越界，访问不该触及的资源,从而保证代码在安全的环境中运行。

在浏览器环境下，针对运行在网页中的JS都提供了沙盒环境以隔离其访问系统资源和其他网页的能力等等，下面是几个沙盒技术应用的示例

  • 同源策略 Same-Origin Policy : 限制不同源的脚本互相访问资源
  • iframe: 通过设置sandbox属性限制页面行为，比如表单提交等等
  • webworker : 不能操作DOM
  • 内容安全策略 Content Security Policy : 通meta标签限制可加载的资源
  • .........

前面三个章节详述了JS的发展历史、语言特性、语言内容和以及它在浏览器下环境下的运行机制。在了解了前面三章的内容后，接下来，我们就可以学习JS的语言核心，并深入理解其特性。

语言概述

1. ES组成

前面提到，JavaScript的核心语言由ECMA组织TC39委员会制定，产出了ECMAScript标准，其内容如下：

2. 如何把JS添加到页面

在HTML中，我们通过<link>为页面来引入CSS资源，或者通过<style>元素直接往页面添加内部CSS样式。对于JS而言，HTML提供了一个<script>元素来让我们引入外部JS资源或者注入内部脚本。

<script>
  // .... 添加JS脚本
</script>	

<script src="script.js"></script>
// 外部脚本的JS代码，写在对应的JS文件中，文件名后缀为.js

<button onclick="createParagraph()">点我！</button>

HTML元素上可以内嵌JS代码，但是不推荐，推荐采用外部资源，使得行为和结构分离，针对script元素的特性以及浏览器特性在浏览器章节会充分说明，这里只关注语言本身。

脚本引入后，浏览器打开HTML页面时，就解析HTML文件、执行JS代码，这样就可以和网页交互了。

浏览器控制台也是我们调试执行JS代码最好的环境，无需编译器。下面，我们就正式进入JS语言环节。

avatar
文章
阅读
粉丝