JavaScript 代码的两种运行方式

772 阅读3分钟

「这是我参与11月更文挑战的第30天,活动详情查看:2021最后一次更文挑战

如果我们有一个 .js 文件,里面编写了一些 JavaScript 代码,如何来执行它呢?我们至少有两种方式可以选择:

  • 将代码交给浏览器执行;
  • 将代码载入到 node 环境中执行;

比如,我们在 01_learn_node 目录下新建 01_JavaScript代码的运行 文件夹,在该文件夹下新建 index.js 文件,文件内容如下:

console.log('Hello world!');

function sum(num1, num2) {
  return num1 + num2;
}

console.log(sum(20, 30));
console.log(sum(20, 30));
console.log(sum(20, 30));
console.log(sum('aaa', 'bbb'));

setTimeout(() => {
  console.log('定时器被执行了');
}, 1000);

我们已经知道,编写完 JavaScript 代码后,需要借助 JavaScript 引擎来执行这些代码。有很多引擎可以选择,那我们选择 V8 引擎,而在 Chrome 浏览器里是有 V8 引擎的。所以呢,我们可以将这些 JS 代码嵌入到网页中,之后让浏览器通过 V8 引擎帮助我们执行这些 JS 代码。

1. 借助浏览器中的 V8 引擎执行 JavaScript 代码

如果我们希望把代码交给浏览器执行:

  • 需要通过让浏览器加载、解析 html 代码,所以我们需要创建一个 html 文件;
  • html 中通过 script 标签,引入 js 文件;
  • 当浏览器遇到 script 标签时,就会根据 src 加载、执行 JavaScript 代码;

我们可以新建一个 index.html 文件,在其中通过 script 标签引入 js 文件,项目目录及 index.html 的内容如下:

image-20210217172933634.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	
  <script src="./index.js"></script>
</body>
</html>

这样一来,当浏览器加载 index.html 这一网页文件时,在解析 HTML 的过程中,遇到了 script 标签时就会加载对应的 JS 文件,然后通过浏览器中的 V8 引擎去执行其中的 JS 代码。所以我们就可以在浏览器的 Console 页面看到 JS 代码的运行结果啦:

image-20210217173151302.png

2. 借助 node 中的 V8 引擎执行 JavaScript 代码

上面讲了如何借助浏览器中的 V8 引擎去执行 JavaScript 代码,那么,如何让 node 执行 JavaScript 代码呢?

如果我们希望把 js 文件交给 node 执行:

  • 首先电脑上需要安装 Node.js 环境,安装过程中会自动配置环境变量;
  • 可以通过终端命令 node js文件的方式来载入和执行对应的 js 文件;

我们可以在 VS Code(这里使用的编辑器是 VS Code,其它编辑器中的操作类似) 中打开终端(Terminal -- New Terminal),首先切换到 01_JavaScript代码的运行 目录下,然后运行 node index.js 命令:

image-20210217174729950.png

可以看到,JS 代码也能够成功地被执行。

下面对上述 node index.js 命令做解释:

  • 因为在安装 node 时已经自动配置过环境变量了,所以输入 node 命令是可以直接根据环境变量找到对应的命令的;
  • node 命令后面加上要执行的 JavaScript 文件,那么该 JS 文件就会被加载到 node 中,node 中的 V8 引擎就会帮助我们执行该文件中的 JS 代码;