JavaScript全栈开发-工具篇(上)

一、运行环境

1. Node.js

2. Chrome

3. 其它浏览器

二、开发工具

1. WebStorm

1.1 功能特性

1.2 小技巧

1.3 实用快捷键

1.4 插件支持

2. Sublime Text

2.1 功能特性

2.2 小技巧

2.3 实用快捷键

2.4 插件支持

3. HBuilder

3.1 功能特性

3.2 小技巧

3.3 实用快捷键

3.4 插件支持

4. 开发工具小结

三、构建工具

1. Grunt

1.1 Grunt安装

1.2 Grunt配置文件

1.3 Grunt任务的运行

2. Gulp

2.1 Gulp安装

2.2 Gulp配置

2.3 Gulp运行 3. 构建工具小结

四、测试工具

1. 单元测试

1.1 前端单元测试QUnit

1.2 后端单元测试NodeUnit

1.3 NodeJS自带测试模块Assert

1.4 Mocha

1.5 单元测试工具小结

1.6 测试工具扩展阅读

2. 性能测试

2.1 PageSpeed Insights

2.2 Apache Bench

2.3 性能测试工具小结

3. 测试工具扩展阅读

五、调试工具

1. 浏览器工具

1.1 Chrome 开发者工具

1.2 FireBug插件

1.3 Chrome Inspect开发者工具

2. Http代理工具

2.1 Fiddler

2.2 Fiddler插件-Rosin

2.3 Fiddler插件-Willow

2.4 Fiddler插件-SSI Proxy

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

3. 调试工具小结

六、总结

本文关键词

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选项指定源仓库地址。

npm config set registry http://tnpm.oa.com #修改配置方式 @@@

npm --registry http://tnpm.oa.com install <package> #安装时指定源方式 @@@

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插件:

npm install grunt-cli -g

npm install grunt --save-dev# 安装常见的grunt模块

npm install grunt-contrib-clean --save-dev

npm install grunt-contrib-compass --save-dev

npm install grunt-contrib-concat --save-dev

npm install grunt-contrib-copy --save-dev

npm install grunt-contrib-cssmin --save-dev

npm install grunt-contrib-imagemin --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-watch --save-dev

 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的任务的配置文件

//Gruntfile.jsmodule.exports = function (grunt) {//初始化配置

    grunt.initConfig({

        cssmin: { //定义配置对象

            minify: { //定义任务目标:压缩

                expand: true, //表下面的文件占位符*要扩展成具体文件名

                cwd: 'css/', //需要处理文件所在目录

                src: ['*.css', '!*.min.css'],//需处理的文件列表(*表任意数量字符,!表示不匹配的情况)

                dest: 'css/', //处理后生成的文件所在目录

                ext: '.min.css' //处理后生成的文件扩展名

            },

            combine: { //定义任务目标:合并

                files: { //目标文件名,源文件名列表

                    'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']

                }

            }

        }

    });

    grunt.loadNpmTasks('grunt-contrib-cssmin'); //加载npm安装的cssmin模块

    grunt.registerTask('default', ['cssmin:minify', 'cssmin:combine']); //注册任务

};

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

1.3 Grunt任务的运行

1) 运行方式1:Grunt命令行方式执行

命令行进到项目根目录,执行grunt命令,命令格式:grunt 模块名:目标名,未指定模块名,目标名将依次执行相应模块及相应目标。

grunt #各模块及目标依次执行

grunt cssmin #执行cssmin模块下所有目标任务

grunt cssmin:minify #执行cssmin模块下的minify目标任务

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插件:

npm install gulp --global # 安装常见Gulp模块

npm install gulp-cache --save-dev

npm install gulp-concat --save-dev

npm install gulp-imagemin --save-dev

npm install gulp-jshint --save-dev

npm install gulp-livereload --save-dev

npm install gulp-minify-css --save-dev

npm install gulp-notify --save-dev

npm install gulp-plumber --save-dev

npm install gulp-rename --save-dev

npm install gulp-replace --save-dev

npm install gulp-strip-debug --save-dev

npm install gulp-uglify --save-dev

npm install imagemin-pngquant --save-dev

npm install del --save-dev

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的任务的配置文件

//Gulpfile.jsvar gulp = require("gulp"),

    mincss = require("gulp-minify-css"),

    del = require("del");var stream = gulp.src("css/*.css"); //定义压缩的文件,返回stream//压缩前先清除文件夹里面的内容

gulp.task("clean", function (callback) {

    del(["css/min"], callback);

});

gulp.task("mincss", function () {

    return stream

        .pipe(gulp.dest("css/min")) //输出文件夹

        .pipe(mincss()); //执行压缩

});

gulp.task("default", ["clean"], function () {

    gulp.start("mincss");//clear任务执行时,执行压缩。start方法可传入多个任务参数,表依次执行

});

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较少

P.S.还有文章的下半部分,周五再跟大家见面哟~

如果文章觉得不错,动动小手分享给小伙伴吧

--------------------------------------------------------------------------

原文作者:腾讯工程师龙付成。

来源:腾讯内部KM论坛。

原文发布于微信公众号 - 腾讯NEXT学位(NextDegree)

原文发表时间:2018-09-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java编程技术

Java网络编程基础篇

网络通讯在系统交互中是必不可少的一部分,无论是面试还是工作中都是绕不过去的一部分,本节我们来谈谈Java网络编程中的一些知识,本chat内容如下:

53210
来自专栏漫漫前端路

前端安全知识

xss: 跨站脚本攻击(Cross Site Scripting)是最常见和基本的攻击 WEB 网站方法,攻击者通过注入非法的 html 标签或者 javasc...

11920
来自专栏IT笔记

本地私服仓库nexus3.3.1使用手册

私服架构 私服是指私有服务器,是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构建。有了私服之后,当 Maven 需要下载构件时,直接请求私服...

1.4K80
来自专栏黑泽君的专栏

day07_Tomcat服务器与http学习笔记

    WEB,在英语中web即表示网页的意思,它用于表示Internet主机上(服务器)供外界访问的资源。

12710
来自专栏前端萌媛的成长之路

一波webpack

20040
来自专栏Brian

Linux 系统优化

概述 在Linux 学习笔记一大体介绍了一些简单的Linux知识和一些简单的优化。下面我们来学习一下Linux和Linux一些安全知识(Linux是基于内核为...

48560
来自专栏菩提树下的杨过

MRTG FOR WINDOWS 安装指南

MRTG(Multi Router Traffic Grapher),通常讲是一个监控网络链路流量负载的开源软件,它可以从所有运行SNMP协议的设备上(包括服务...

333100
来自专栏Web 开发

Web前端安全学习-CSRF

在数据库有了一层安全保护之后,攻击者们的目标,从服务器转移到了用户身上。由此,出现了CSRF攻击和XSS攻击。

9600
来自专栏郑家乐的专栏

多版本 Node.js 使用 Workflow

NodeJS 成为新一届的版本帝后,需要预编译的模块常常更新不够及时,就会出现我这样上班时间搞环境 ,那么如何保持一机多版本继续使用低版本的 NodeJS 运行...

33100
来自专栏SDNLAB

脱坑神器,让你一步了解ODL控制器集群

一、控制器集群基本知识 1.1 Consensus一致性 Consensus一致性是指多个服务器在状态达成一致,但是在一个分布式系统中,因为各种意外可能,有的...

48470

扫码关注云+社区

领取腾讯云代金券