2.4　JavaScript代码编写
——IDE的选择

对于中小型项目的开发工作，除了需要保证代码的运行或编译环境以外，只需要一个简单的文本编写工具就可以完成。计算机自带的“记事本”或“写字板”程序虽然可以编写代码，却不能提供高亮、换行和格式化等功能，所以在真正的项目开发中，一般都会选择一些功能强大的集成开发环境（IDE）。

2.4.1　编写基础的JavaScript代码

本书中的代码基本是采用JavaScript语言编写的，并且本书中的JavaScript代码由于使用场景不同，会在两类环境中运行。

·基于浏览器中的JavaScript代码（也就是传统网站开发中前端使用的JavaScript代码）去实现一些样式、动画或AJAX请求。

·基于Node.js的JavaScript代码。

以上两类代码均基于JavaScript语言，但仍有很多不同点，读者不用在意底层的逻辑。

前端的JavaScript代码可以选择任意一个文本文档来编写，并在浏览器中运行，演示如下：

（1）建立一个index.html文件，使用文本文档打开，如图2-27所示。

图2-27　index.html文件

（2）在文本中编写如下代码：

     <script>
     console.log(this)
     alert("运行代码")
     </script>

在浏览器中打开index.html文件，效果如图2-28所示。

图2-28　运行代码

执行上面的代码后，浏览器会打印一个this对象，该对象指向浏览器中的Window顶层对象，并且弹出一个对话框，显示代码正在运行。

上面的代码还可以采用JavaScript代码文件的形式，通过<script>标签引入。这样就可以将JavaScript代码和HTML代码文件进行分离，例如：

     <script src="./index.js" charset="UTF-8"></script>

需要注意的是，此时的JavaScript文件不需要在其中包含<script>闭合标签也可以达到一样的运行效果。

在Node.js环境中一般通过命令行工具运行代码，不需要浏览器环境。需要注意的是，在Node.js环境中并没有实现alert()方法，需要将该代码注释掉，代码如下：

     console.log(global)
     //如果不注释则会出现错误，Node.js中没有实现该函数
     //alert("运行代码")

执行效果如图2-29所示。

图2-29　打印全局对象

图2-29中的global对象即为Node.js中的全局对象（类似于浏览器中的Window对象）。需要注意的是，如果在代码中打印this，this会指向该模块本身（module对象），而其本身并不会指向global对象。

注意： 关于this的指向，几乎在所有的前端面试中都会有所提及，而JavaScript中的this指向并不是一成不变的，通过this指向的变化可以实现一些特别的应用，所以读者应当了解这些内容。

2.4.2　JavaScript开发利器——WebStorm

2.4.1节使用了文本文档编写JavaScript代码，本节使用更加专业、更加强大的智能IDE来编写代码。

JavaScript拥有大量的IDE，甚至一些并非专门为JavaScript准备的开发工具都支持它（如Eclipse、NetBeans等）。还有一些常见的IDE，如VSCode或Notepad++也提供了大量的扩展和自定义选项来实现JavaScript专用IDE的效果。本节介绍一款开发利器——来自JetBrains系列的WebStorm，官方网址为https://www.jetbrains.com/webstorm/，用户可以免费试用30天。

注意： 如果是在校学生，可以通过邮箱申请教育版本，免费试用WebStorm。

WebStorm的官网页面如图2-30所示。

图2-30　WebStorm官网页面

单击DOWNLOAD按钮直接下载，下载完成后进行安装，最终打开的效果如图2-31所示。WebStorm不需要安装任何插件，直接支持JavaScript代码。

图2-31　WebStorm界面 lYqBvuI6jkq1UbO2/kHLAK+8GyIaayOxhO6XVonQGlD+sQcC4FPnk4tIMNC+UOvu