您的位置:首页 > Web前端 > JavaScript

JavaScript全栈开发-工具篇

2021-01-09 22:44 639 查看

作者:龙付成--腾讯高级前端工程师

@IMWeb前端社区


目录

JavaScript早期主要作为脚本语言运行在浏览器,而现在JavaScript的使用范围已经超越浏览器,向通用系统语言发展。特别是HTML5的出现,浏览器的平台化,Node.js开源项目的发展,NoSQL技术的发展,JavaScript逐渐成为跨移动平台应用程序及跨平台桌面应用程序的开发语言。

JavaScript标准有两类,一种是作为浏览器上通用行业标准的ECMAScript标准,另一种是作为浏览器外的桌面、服务器的标准CommonJS标准。JavaScript可以只用一种语言,开发出适应不同平台(浏览器,桌面端,服务器,移动端)的程序。而本文主要以JavaScript作为全栈开发语言讨论软件产品前后端开发、测试相关的工具和方法。


前后端运行环境

1. Node.js
首页:https://nodejs.org
下载:https://nodejs.org/download

Node.js是以Chrome的V8引擎为运行时,基于事件驱动的无阻塞I/O模型,轻量高性能,可快速构建可伸缩应用程序的平台,适合运行数据密集型实时应用程序。

下载Windows Installer(.msi)程序进行安装,默认安装npm(node package manager),及注册node的安装目录到操作系统的环境变量,这样在命令行界面任何路径下都可以访问node和npm程序。接下来要说明的开发测试工具,很多都基于node和npm。

npm的默认仓库源访问比较慢,可通过修改npm配置注册源地址或npm安装模块时带--registry选项指定源仓库地址。


2. Chrome
首页:https://www.google.com/chrome

前端开发必备浏览器,内置开发者工具功能比较强大。

3. 其它浏览器
FireFox浏览器的插件FireBug也是一款比较优秀的工具。如果是做PC端的前端开发,考虑浏览器的兼容性,Internet Explorer也是必备的浏览器。(浏览器使用的市场份额原因,虽然份额在下滑)

 

开发工具

因个人偏好和使用习惯的不同,开发工具不同人有不同的选择。以下是几种常见的前端开发工具:
* WebStorm
* Sublime
* HBuilder

1. WebStorm
首页:http://www.jetbrains.com/webstorm
下载:http://www.jetbrains.com/webstorm/download


1.1 功能特性
WebStorm是由JetBrains开发的一个比较强大的轻量级开发工具,能够完美地支持前端开发及基于NodeJS的服务端开发。
-- 支持JavaScript, Node.js, ECMAScript 6, TypeScript, CoffeeScript, HTML, CSS, Less, Sass 和 Stylus。语法高亮,文档查询,重构
-- 快速定位及错误高亮
-- 项目导航及高级重构功能
-- 支持AngularJS、React、Meteor、Express、其它框架
-- 内置前端及服务端NodeJS断点调试器
-- 与构建工具(Grunt、Gulp)、代码质量工具(JSHint,JSLint,ESLint,JSCS),测试工具(Karma,Mocha),版本控制工具(Git,GitHub,Mercurial,SVN)集成。
-- 版本控制集成(Subversion,Perforce,Git,CVS)

1.2 小技巧
-- 更改IDE主题:File -> Setting -> Appearance & Behavior -> Appearance
-- 更改编辑器代码风格:File -> Setting -> Editor -> CodeStyle
-- 设定IDE和项目的默认编码:File -> Setting -> Editor -> File Encoding
-- 插件安装:File -> Setting -> Plugins

-- 编辑器配置导入导出:File -> Import Settings... / Export Settings...
-- 快捷键设置:File -> Setting -> Keymap
-- 自动保存,文件关闭后仍能进行撤销和重做操作
-- 显示行号,自动换行功能开关:代码左侧区域右键菜单勾选。如下图左侧
-- 鼠标移至html文件顶部区域出现不同浏览器快速打开按钮。如下图右侧


1.3 实用快捷键


1.4 插件支持
WebStorm插件仓库里面很多实用的插件来扩展WebStorm的能力。详见:http://plugins.jetbrains.com/webStorm。
可以通过 File -> Setting -> Plugin 里面的功能在线安装插件,也可将插件下载然后离线安装。


2. Sublime Text
首页:http://www.sublimetext.com/
下载:
http://www.sublimetext.com/2 (Sublime Text 2)
http://www.sublimetext.com/3 (Sublime Text 3)


2.1 功能特性
Sublime Text是一个跨平台的文本编辑器,支持基于Python的插件,可通过Package扩展。
-- 内置支持很多编程语言,并支持语法高亮。用户也可以通过插件支持更多编程语言
-- Go to anything功能,快速跳到文件,符号或行数
-- Command palette功能:弹性快捷键功能
-- 多行选择功能:同时修改多行内容
-- 基于 Python 语言的外挂 API
-- 针对个别项目使用不同的编辑器设置
-- 通过 JSON 文件自定义设置值
-- 跨平台(Windows、Linux 和 Mac OS X)
-- 兼容 TextMate 的语言标记语法

2.2 小技巧
-- 文件未保存退出编辑器,下次启动会自动恢复
-- 双击选中一个标识符,然后连按ctrl+D可以连续选中多个标识符,进行重命名等操作
-- 以某种编码格式打开,以某种编码格式保存见File -> Reopen with Encoding / Save with Encoding
-- 矩形选取,按住鼠标中键(滚轮)不放,向下拉取选择然后松开即可垂直方向选择矩形内的内容。配合ctrl多处选择,可以进行多处编辑
-- html中输入一个标签名如div,按Tab会自动生成<div></div>,如安装Emmet插件会给你惊喜
-- 按住ctrl+alt,然后按上或下方向键可进行垂直方向光标定位,按左或右方向键可进行水平选取

2.3 实用快捷键

快捷键练习网站:

http://www.shortcutfoo.com/

2.4 插件支持
1) 编写自定义插件扩展:Tools -> New Plugin.. 
2) 插件下载:https://packagecontrol.io
3) 插件管理
可以安装包管理器来查找,安装,更新插件包。包管理器及安装方法见:https://packagecontrol.io/installation。页面有自动安装或手动安装示例方法。安装完成后在菜单References -> PackageControl打开包管理器。选择Package Control: Install Package选项,可搜索待安装的插件。
4) 常用插件
-- NodeJS扩展
SublimeText-Nodejs(已停止维护):https://packagecontrol.io/packages/Nodejs
Jake:https://github.com/mde/jake

3. HBuilder
首页:

http://www.dcloud.io
下载:

http://download.dcloud.net.cn/HBuilder.windows.6.0.1.zip


3.1 功能特性
HBuilder是DCloud推出的一款免费的支持HTML5的Web开发IDE。通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、JavaScript、CSS的开发效率。
-- 代码助手
-- 内置web服务器,可用各种主流浏览器进行测试
-- 各种眼睛保护配色
-- 内置最全语法库支持和浏览器兼容数据
-- 可进行手机App开发
-- 跳转助手、选择助手、转义助手、快捷键助手
-- 语法校验、转到定义、重构 、大纲、任务TODO 、版本历史、内置webserver、预编译less、sass等

3.2 小技巧
-- 代码提示时,按下候选列表前的数字,自动把该候选项输入到编辑区
-- 内置Emmet插件,输入div按Tab,自动生成<div></div>,详见Emmet插件
-- 内嵌jQuery、Zepto、微信JS SDK、MUI框架插件,可提示相应框架API的语法。在工程点右键 -> 引用框架语法 来添加对其它(angular、ext、dojo..)框架库语法提示的支持。
-- Ctrl+P边写代码边预览
-- 拖动tab代码选项卡,可以进行左右或上下分屏显示

3.3 实用快捷键


3.4 插件支持
HBuilder基于Eclipse 3.7(2011年6月发布)开发,因此兼容Eclipse3.x版本插件。也可进到 工具 -> 插件安装 -> 浏览Eclipse插件市场 来安装插件。

NodeJS插件:Nodeclipse 安装方法见:http://ask.dcloud.net.cn/article/230

4. 开发工具小结
作为一款开发工具,能让开发者将写代码当成一种享受,愉快地编码,最核心的功能应该满足以下几点:
1. 功能完善,该有的常用功能都有
2. 编码快速,智能提示,自动完成
3. 启动速度,测试速度快
4. 开发工具界面的主题和配色也是比较重要,耐看、代码区分一目了然,不刺眼,不引起视觉疲劳。
5. 可配置,可插件,有扩展的能力,满足自定义开发的需求

上述的几种开发工具各自有其优势:
1) WebStorm :功能完善强大
2) SublimeText:轻量快捷,界面优美
3) HBuilder:Html5开发,快速编码

开发者可根据自己的需要和个人偏好选择其中一个或多个工具使用,以满足快速开发的需求。

构建工具

在前端开发过程中,经常需合并文件、压缩代码、单元测试、检查语法错误等,需要用手工或不同的工具来完成不同的任务,重复劳动且耗时繁琐,而自动化构建工具可以帮我们自动管理和运行各种任务。可以减少代码构建手工出错的机会,大大增强了开发效率,节省资源。

以下是常见的自动构建工具,可根据需要,选择其中之一进行安装。
* Grunt
* Gulp


1. Grunt
首页:http://gruntjs.com
中文:http://www.gruntjs.net
项目:https://github.com/gruntjs(包括Grunt及其各种模块)
源码:https://github.com/gruntjs/grunt
插件:http://gruntjs.com/plugins


1.1 Grunt安装
Grunt和Grunt插件是通过npm(node package manager)安装管理的。

常见的Grunt模块说明


在项目目录安装Grunt及常见的Grunt插件:

 grunt-cli为grunt的命令行界面,主要向Grunt传递Gruntfile配置信息,然后执行Grunt来完成配置文件中指定的任务。

-g:--global,表示全局安装,全局安装后可在任何目录执行grunt命令
--save-dev:表示安装grunt模块时,模块会被自动加到项目的package.json文件的依赖列表中

1.2 Grunt配置文件
模块安装完成后,在项目根目录创建名为Gruntfile.js的配置文件。该配置文件是一个node.js的模块,Grunt运行需要该配置文件。

Grunt常用API
-- grunt对象:Grunt通过将grunt对象赋值给module.exports函数,将grunt对象的属性和方法传递给Gruntfile、Grunt模块和task文件中
-- grunt.initConfig(configObject):grunt.config.init方法的别名,初始化各模块的配置
-- grunt.loadNpmTasks(pluginName):加载通过npm安装的Grunt模块
-- grunt.registerTask(taskName, taskList):注册定义任务

以下为压缩css的任务的配置文件

配置项属性可在Grunt插件列表http://gruntjs.com/plugins 找到对应的模块页面获取详细的信息。上述安装的其它模块的使用方法可参考插件模块页面的介绍。Grunt内部方法调用的基本流程是 :

grunt.initConfig() -> grunt.loadNpmTasks() -> grunt.registerTask()

1.3 Grunt任务的运行
1) 运行方式1:Grunt命令行方式执行命令行进到项目根目录,执行grunt命令,命令格式:grunt 模块名:目标名,未指定模块名,目标名将依次执行相应模块及相应目标。

2) 运行方式2:开发工具IDE方式执行

1> WebStorm
打开项目代码,右键点击 Gruntfile.js 文件 -> 点击Show Grunt Tasks菜单项 -> 出现Grunt任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。(若Grunt列表出现警告,未列出任务,则需要点击警告设置Grunt的NodeJS和Grunt-cli安装路径)。

2> SublimeText
SublimeText默认没有安装Grunt,参看SublimeText中插件支持的安装方法在Package Control中安装插件"Grunt"。
安装完成后 -> 快捷键ctrl+shift+p(或Tools -> Command Palette)运行命令行 -> 选中Grunt命令 -> 完成执行。


2. Gulp
首页:http://gulpjs.com
中文:http://www.gulpjs.com.cn
项目:https://github.com/gulpjs
源码:https://github.com/gulpjs/gulp
插件:http://gulpjs.com/plugins


2.1 Gulp安装
Gulp和Gulp插件是通过npm(node package manager)安装管理的。

常见的Gulp模块说明


在项目目录安装Gulp及常见的Gulp插件:

 

2.2 Gulp配置
模块安装完成后,在项目根目录下创建 gulpfile.js 代码文件。

Gulp常用API
-- gulp.src(globs [,options]):产生数据流。匹配glob或glob数组的文件,返回Vinyl-fs类型的stream,可通过管道(pipe)传递给插件
-- gulp.dest(path [,options]):作为管道的输出写入文件,同时输出将继续输出。多次调用dest将多次输出到多个目录,目录不存在则创建
-- gulp.task(name [,deps], fn):指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。
-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb]):监视文件变化执行某些操作,返回可分发change事件的EventEmitter对象。

以下为压缩css的任务的配置文件

Gulp API的使用方法详见:http://www.gulpjs.com.cn/docs/api。方法调用的基本流程是 gulp.src() -> gulp.dest() -> task()。


2.3 Gulp运行
1) 运行方式1:Gulp命令行方式执行
项目根目录,执行gulp命令,命令格式:gulp <task> <othertask>,未指定任务名,执行所有任务。

2) 运行方式2:开发工具IDE方式执行
1> WebStorm
打开项目代码,右键点击 Gulpfile.js 文件 -> 点击Show Gulp Tasks菜单项 -> 出现Gulp任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。(若Gulp列表出现警告,未列出任务,则需要点击警告设置Gulp的NodeJS和Gulp安装路径)

2> SublimeText
SublimeText默认没有安装Gulp,参看SublimeText中插件支持的安装方法在Package Control中安装插件"Gulp"。
安装完成后 -> 快捷键ctrl+shift+p(或Tools -> Command Palette)运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。

3. 构建工具小结

作为一个工具,核心的需求应该是让开发者花最少的时间学习使用,并为开发者节省更多的时间,解放重复的手工劳动。这就要求一个理想的自动化构建工具应满足 简单,易用,易扩展,易维护,高性能,多平台运行,可靠,可测试等要求。其架构设计应满足的功能需求与非功能性需求如下图所示。


Grunt与Gulp都比较完善的构建工具,但是各自有自己的特点:

Grunt
-- 插件较丰富
-- 易用,常见任务都有插件
-- Grunt及插件的选项较多,使用复杂

Gulp
-- 配置较少,使用简单
-- 利用Node.js流,不需要往磁盘写中间文件,速度更快
-- 易于学习,API较少

测试工具

1. 单元测试
单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有:
* QUnit
* NodeUnit

1.1 前端单元测试QUnit
首页:http://qunitjs.com
源码:https://github.com/jquery/qunit

QUnit是jQuery团队开发的JavaScript单元测试工具,功能强大且使用简单。目前所有的JQuery代码都使用QUnit进行测试,原生的JavaScript也可以使用QUnit。

1) 测试结果页面 qunit.html

2) 单元测试脚本文件 qunitcase.js

3) 测试结果


1.2 后端单元测试NodeUnit
首页:https://github.com/caolan/nodeunit

可通过命令npm install nodeunit -g进行npm全局安装。前面构建工具Grunt也有NodeUnit的插件。

1) 单元测试脚本示例 nodeunitcase.js

 

2) 命令行界面执行测试
在项目根目录下运行命令:

 

3) 测试结果


1.3 NodeJS自带测试模块Assert
API首页:https://nodejs.org/api/assert.html

如需用NodeJS自带测试模块来断言测试,需用 require('assert') 添加模块引用。
assert.equal(actual, expected, message) 方法执行 actual 与 expected 的浅拷贝比较(类似于==),相等时不作任何输出,不等的时候输出message,并抛出AssertError异常。

1) 测试代码 assertcase.js

 

2) 命令行运行测试
在项目根目录下运行命令 或 开发工具右键assertcase.js运行测试

 

3) 测试结果


1.4 Mocha
首页:http://mochajs.org
源码:https://github.com/mochajs/mocha

Mocha是一个功能丰富能运行在浏览器端及Node.js程序中的测试框架,支持异步测试,测试覆盖度报告,JS API测试,能和任何Assert集成等功能。详见首页的功能特性。可通过 npm install mocha -g 进行全局安装。mocha默认为运行项目文件夹test目录下的测试脚本文件。
Mocha在浏览器端的测试详见官文文档。

1) 测试代码 mochacase.js

 

2) 命令行运行代码

在项目根目录下运行命令:

3) 测试结果


1.5 单元测试工具小结
不同的测试工具适合不同的应用场景,开发者可根据自己需求选择合适的开发工具。
-- NodeJS系统自带的Assert模块能满足NodeJS简单测试断言的需求。
-- QUnit适合前端JavaScript代码的测试
-- NodeUnit适合后端JavaScript代码的测试
-- Mocha适合前后端(浏览器端,NodeJS端)JavaScript代码的测试,功能相对更丰富

1.6 测试工具扩展阅读
测试驱动开发(TDD,Test-Driven Development):
行为驱动开发(BDD,Behavior-Driven Development):Cucumber.js,Vow

2. 性能测试
常见的Web性能测试工具有
* PageSpeed Insights
* Apache Bench

2.1 PageSpeed Insights
首页:

https://developers.google.com/speed/pagespeed

PageSpeed是Google开源的优化Web,加速Web加载的工具。


1) 测试示例
在PageSpeed Insights页面输入待测试的地址。


2) 测试结果
可根据移动设备及桌面设备给出问题及修复建议。


2.2 Apache Bench
首页:http://httpd.apache.org

Apache服务器自带Apache Bench (ab)压力测试工具(ab程序在Apache安装目录的bin文件夹下),可用来测试web性能。其用法是在命令行执行:ab [options] [http://]hostname[:port]/path。options参数详见帮助ab -h。

ab常用参数:
-n:总共的请求执行数,默认1
-c:并发数,默认1
-t:测试所进行的总时间,秒为单位,默认50000s
-p:POST时的数据文件
-w:以HTML表的格式输出结果

1) 测试示例

 

2) 测试结果


2.3 性能测试工具小结
可用来进行性能测试的工具很多,后端的性能压力测试工具还有WebBench,LoadRunner等。而页面性能测试工具Show Slow,YSlow也是非常优秀的工具。

3. 测试工具扩展阅读
-- Bower:https://github.com/bower
-- Source Map:https://github.com/floridoo/gulp-sourcemaps

调试工具

1. 浏览器工具
1.1 Chrome 开发者工具
Chrome浏览器的开发者工具能进行DOM树节点的各种操作,CSS样式各种操作,网络请求的跟踪,JavaScript源码断点调试,性能分析,资源(CPU,内存)分析,页面资源分类浏览,控制台等功能。

1.2 FireBug插件
首页:http://getfirebug.com
FireBug是Firefox浏览器下的开发者插件,可对Web页面的html,css,JavaScript进行实时编辑,调试和监控。同时有支持IE6+,Opera,Safari,Chrome等浏览器的版本Firebug Lite(http://getfirebug.com/firebuglite)。

1.3 Chrome Inspect开发者工具
Chrome的Inspect工具具备在PC上的Chrome调试手机Chrome页面的能力。

1) 手机USB线连接PC,启用手机允许调试功能
2) 在PC上打开Chrome,并在地址栏输入 chrome://inspect,出现手机连接成功的界面。如图一。
3) 在手机上打开Chrome,并打开任意一个Web页面。PC上Chrome的Inspect界面出现手机Chrome上已打开的页面。如图二。
4) 在其中一个打开的页面下点击inspect就可以进到chrome的开发者工具调试页面了。如图三。


2. Http代理工具
2.1 Fiddler
首页:http://www.telerik.com/fiddler

Fiddler是一款http协议调试代理工具(基于.net开发),支持Web调试,性能测试,Web会话维护,安全测试,Http/Https通信记录,自定义插件扩展等功能特性,是Web开发,Web移动开发最常用工具之一。同时其包含强大的基于事件脚本的子系统,支持.net扩展,满足自定义需求。

步骤:

1) 在PC上配置Fiddler代理(Tools->Fiddler Option->Connections->勾选Allow Remote computer to connect,Fiddler listens on port为8888端口),打开无线网卡,并连接Wifi

2) 手机打开并连接Wifi,长按已连接Wifi->修改网络配置->代理设置选手动->代理主机名输入PC的无线网卡IP地址->代理服务器端口号输入Fiddler的8888端口->存储

3) 在手机浏览器中打开网页,在Fiddler中可看到手机的http请求

注意事项:

1) 手机和PC都连接同一个wifi网络确保PC和手机在同一个网段,可互访。

2) 有时在配置代理及手机Wifi代理都正确的情况下,有可能需要清一下Fiddler的缓存(Tools->Clear WinINet Cache和Cookie)才可以正常连接。



2.2 Fiddler插件-Rosin
首页:https://github.com/AlloyTeam/Rosin

Rosin是Fiddler的插件,可以指定页面过滤规则,接收该页面的console输出的日志,支持对象属性输出及JSON对象树查看。这对于查看移动端web页面的日志输出,调试移动端web很有帮助。具体使用方法见Rosin首页介绍。


2.3 Fiddler插件-Willow
首页:http://km.oa.com/group/willow @@@ 作者为yunishi,dollyden。

Willow作为Fiddler的插件,可以扩展Fiddler的功能,如统计数据包、修改Host、请求重定向、编码转换、低网速模拟、断点调试以及过滤HTTP请求。
该插件可用于将手机Web页面重定向到PC端本地页面文件的能力,可方便地进行手机端页面调试。


2.4 Fiddler插件-SSI Proxy
首页:

http://tid.tenpay.com/labs/ssiproxy/index.html @@@

SSI Proxy是财付通设计中心(TID)基于Fiddler开发的插件工具,是业界内首个用于解析include指令的代理工具, 主要亮点是HTML页面模块化开发(使HTML页面支持include指令), 本地开发、调试SHTML页面无需搭建服务器。

2.5 微信、手机QQ WebView及腾讯手机QQ浏览器开发者工具-Inspect @@@

微信、手机QQ及腾讯手机QQ浏览器都内置X5内核,手机Web的调试可以利用MIG事业群自研的Inspect工具进行开发调试。原创调试方法参见 浏览器产品部BrianZheng(郑清江)文章《手机QQ浏览器调试大揭秘》,地址:http://km.oa.com/group/22486/articles/show/221881


简略步骤:

1) 手机端

-- QQ浏览器调试版下载安装并启动:下载地址:http://x5.cs0309.imtt.qq.com/inspector/page/list.html(QQ浏览器选择左侧qb菜单,右边选择最新版本)

-- TBS Inspector下载安装并启动:下载地址:http://x5.cs0309.imtt.qq.com/inspector/page/list.html(QQ浏览器选择左侧tbs菜单,右边选择最新版本)

-- 打开待调试页面:通过扫二维码、复制链接等方式

-- 数据线连接PC与手机

2) PC端

-- 安装python并在安装时勾选添加到系统环境目录。Python下载:https://www.python.org/downloads/

-- 下载python写的x5调试客户端,下载完成后解压缩。下载地址:http://res.imtt.qq.com/tbs_inspect/sq_webview_debug.zip

-- 进到x5调试客户端解压后的目录,运行 inspector.py 文件在9223端口上侦听PC上面chrome的调试监视请求

-- 打开chrome,进到http://localhost:9222页面,可以看到手机QQ浏览器打开的页面列表,点击其中待调试的页面标签即可进到chrome开发工具进行调试。


3. 调试工具小结
调试工具一般为浏览器的开发者工具或自身提供的inspect来满足开发者开发、调试的需要。也有借助Fiddler这个工具及衍生的各类插件完善补充Fiddler的功能,来实现对PC Web端及手机Web端快速开发的方式。开发者根据自己实际业务的需求进行选择。


总结

工欲善其事,必先利其器,对于全栈工程师来说,有强大的工具在手才可以提高开发和调试的效率。但是工具的选择和使用因人,因场景不同而不同,以上所述只是以JavaScript语言全栈开发的角度进行阐述,涉及的工具不一定是最好的,也不一定最适合所有的开发者,况且不同的开发语言所用到的开发调试工具差别很大。而且随着时间的发展,软件行业的进步,开源社区的贡献,会涌现越来越多的优化软件。

由于本文主题的关系,所介绍的工具只是简单引入,点到即止,详细的介绍需要参看工具官网或者研究源代码才可以作深度的了解。

有任何问题,欢迎交流!


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: