JavaScript一点通第一节:JavaScript编码和调试
一、前言
工欲善其事,必先利其器。事和器之间是对应的,做什么事用什么工具,这是有讲究的。
对于JavaScript来说(当然并不仅仅限于JavaScript,其他语言也是如此),我认为学习的工具和生产的工具,还是区别开来会更好一些。在生产中,一切以生产效率为目标,使用功能强大的IDE是不二的选择。而学习,自动化太高的工具,反而会阻碍你的学习。当然,如果你是一名熟练的工程师,可以不用考虑这些问题。
我的习惯是,当要学习新技术,或者新语言的时候,我喜欢手工代码,会用一个简洁、方便的文本编辑器,比如EditPlus编写代码,编译也是用命令行的方式手工进行,这让我洞察语言或者技术的本质原理,了解更多的细节。然后,我会找一个代表性的开源项目,用IDE分析它的源代码,从而掌握这门语言或者技术是如何在生产环境中解决实际问题的。
二、编码工具
只要是编辑文本的工具,都可以用以JavaScript编码。不过,考虑到性能、效率,以及方便性,大家用的比较多的还是EditPlus、UltraEdit、EmEditor、Notepad++、Sublime Text,以及WebStorm、Visual Studio等。后两个是专业的IDE,属于重量级开发工具。
EditPlus小巧方便、功能强大,用起来很是顺手。一般通过目录来组织和管理项目文件。

不过EditPlus默认使用IE浏览器,而且是”无缝浏览器“,打开的浏览器页面,也在EditPlus的一个子文档页面,无法使用浏览器的”开发者工具“,对于复杂JS代码的调试很不方便。可以通过首选项设置来修改浏览器的配置。

这样浏览网页的时候可以打开外部的浏览器,按F12进行调试。


EditPlus是收费软件,如果你不愿意花钱注册,可以使用Notepad++。Notepad++可以使用工程管理项目。


然后可以"从目录添加文件",将你的项目文件添加到工程,方便管理。

当然,别忘了保存工作区。

可以通过快捷键打开设置好的浏览器浏览页面、调试程序。你可以修改运行浏览器的快捷键,以符合你的个人习惯。


Sublime Text是一个功能强大的代码编辑器,是收费软件,但可以无限期试用。Sublime Text可以通过插件扩展、增强功能,所以功能强大,而且很好玩,深受程序员喜爱。安装插件的方法主要有两个。
安装方法一:直接安装。
可以直接下载插件安装包,解压缩到Packages目录。Packages目录可以通过菜单->preferences->browse packages查看。


安装方法二:使用Package Control组件安装。
通过菜单->Perferences->package control,调出Install Package,然后在列表中选中要安装的插件。



比如说,我们希望在Sublime Text工作环境中可以直接打开浏览器,以查看网页的效果进行调试,可以安装一款很实用的右键菜单增强插件SideBarEnhancements。在Sublime Text左侧FOLDERS栏中的右键菜单功能就会增强很多。
该插件还能让我们自定义快捷键设置使用哪款浏览器,点击菜单栏的preferences->package setting->side bar->Key Building-User,进行设置。


这样,你就可以直接通过右键菜单,或者快捷键打开浏览器来查看网页了。

安装SublimeTmpl插件可以快速生成文件模板,比如快捷键“ctrl+alt+h”生成HTML文件模板。

安装better completion插件,支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示。

注意配置文件,首先将preferences->package setting->sublime better completion->Settings-Default中的配置内容复制到preferences->package setting->sublime better completion->Settings-User中,然后进行修改。
比如,现在启用JQuery自动完成,则修改“"jquery": false,”为“"jquery": true,”。

通过配置,可以在Sublime Text内运行javascript,不用打开外部浏览器进行浏览调试,查看代码运行效果。
第一步:安装Node.js
安装完后,要看下是否配置好了nodejs的环境变量。

然后,在命令行中输入node指令测试一下。

第二步:添加build system
点击菜单Tools -> Build System -> New Build System,输入配置信息并保存。



然后,可以在Sublime Text内直接运行JavaScript了。

三、代码调试
没有谁写代码能够一蹴而就。验证思路、追踪bug、解决错误,调试伴随着我们编码的全过程。好的调试方法和工具,可以极大地提高我们的编码效率。
我们一般在浏览器中运行我们的代码,可以通过提示信息,比如alert语句、console.log语句,来验证输出结果是否和我们预想的一致。也可以用F12调出浏览器的开发者工具,对代码进行断点调试。
比如,有一个函数sayHello,我们要调试它。
function sayHello(name){
var msg = "你好,"+name;
console.log(msg);
}
我们用EditPlus编写了两个文件。
test.js

test.html

根据前面讲的,我们可以设置EditPlus调用外部浏览器打开HTML页面,并通过快捷键F12调出浏览器的开发者工具,刷新页面,我们在控制台看到了程序的输出结果。

你可以点击“Source”查看源代码,并通过鼠标点击添加断点,刷新页面重新加载网页,就可以进行断点调试了。

当然,功能强大的IDE,将编码、调试集成在了一起,用起来就很方便。方便是有代价的,这些工具为你的生产提高了效率,你就要交出你的money了。WebStorm、Visual Studio等,就是这样的工具。这里讲一下功能最强大,用起来最方便的Visual Studio,其他的工具,你可以根据自己的喜好,选择学习和使用。
首先创建一个网站项目。简单明了起见,我们创建一个空项目,然后把刚才那两个文件复制到工程中。

我们这次直接把断点加在网页中。

运行程序,就会停在断点的地方。

逐步运行,查看程序运行结果。

四、总结
JavaScript,本是一种为Web浏览器设计的脚本语言,但近几年,已经广泛应用于各种软件应用中。不仅有运行在服务端的JavaScript代码,也有了用来驱动iOS和Android应用的JavaScript代码,甚至还有的用来控制机器人。因此用什么样的工具好,要根据自己的工作场景和需求,选择适合的工具。
本文出自 “老惠” 博客,转载已经过作者同意。