异步流程控制

2个月前

单线程与异步

Javascript是单线程运行、支持异步机制的语言。进入正题之前,我们有必要先理解这种运行方式。

以「起床上班」的过程为例,假设有以下几个步骤:

  • 起床(10min)
  • 洗刷(10min)
  • 换衣(5min)
  • 叫车(10min)
  • 上班(15min)

最简单粗暴的执行方式就是按顺序逐步执行,这样从起床到上班共需50分钟,效率较低。如果能在「洗刷」之前先「叫车」,就可以节省10分钟的等车时间。

异步叫车

这样一来「叫车」就成了异步操作。但为何只有「叫车」可以异步呢?因为车不需要自己开过来,所以自己处于空闲状态,可以先干点别的。

1795次阅读,1条评论

箭头函数中的this

7个月前

先看一段代码,这是一个实现倒数功能的类「Countdown」及其实例化的过程:

function Countdown(seconds) {
	this._seconds = seconds;
}
Countdown.prototype._step = function() {
	console.log(this._seconds);
	if (this._seconds > 0) {
		this._seconds -= 1;
	} else {
		clearInterval(this._timer);
	}
};
Countdown.prototype.start = function() {
	this._step();
	this._timer = setInterval(function() {
		this._step();
	}, 1000);
};

new Countdown(10).start();

运行这段代码时,将会出现异常「this._step is not a function」。这是Javascript中颇受诟病的「this错乱」问题:setInterval重复执行的函数中的this已经跟外部的this不一致了。要解决这个问题,有三个方法。

261次阅读,0条评论

封装你的Gulp代码

1年前

近年来,前端工程化深入人心,而工程化中必不可少的环节就是构建。所谓构建就是基于既定的流程对项目中的文件进行处理,从而得到最终用于发布的文件。而Gulp正是目前最流行的前端构建工具之一。

Gulp的使用

以下是使用Gulp进行构建的例子,也是本文的示例项目。文件结构为:

/Users/me/project/project-a
- src/
- dist/
- package.json
- gulpfile.js

其中「src」为源代码目录,「dist」为发布代码目录。「gulpfile.js」的代码为:

var gulp = require('gulp'),
	gulpCleanCSS = require('gulp-clean-css'),
	gulpUglify = require('gulp-uglify'),
	gulpMD5 = require('gulp-md5-plus');

// 把.html文件直接copy到发布目录
gulp.task('copy-html', function() {
	return gulp.src('./src/*.html')
		.pipe( gulp.dest('./dist') );
});

gulp.task('compress-css', ['copy-html'], function() {
	return gulp.src('./src/*.css')
		// 压缩CSS代码
		.pipe( gulpCleanCSS() ) 
		// 文件名增加MD5,并替换.html文件中的引用地址
		.pipe( gulpMD5(10, './dist/*.html') ) 
		// 构建到发布目录
		.pipe( gulp.dest('./dist') );
});

gulp.task('compress-js', ['copy-html'], function() {
	return gulp.src('./src/*.js')
		// 压缩JS代码
		.pipe( gulpUglify() )
		// 文件名增加MD5,并替换.html文件中的引用地址
		.pipe( gulpMD5(10, './dist/*.html') )
		// 构建到发布目录
		.pipe( gulp.dest('./dist') );
});

gulp.task('default', ['compress-css', 'compress-js']);
1629次阅读,0条评论

multer中间件的安全问题

2年前

昨天备份本博客的时候发现,上传目录下多了几个奇怪的.asp和.php文件。这些文件并非我自己上传的,很可能是通过某个漏洞传到了服务器上。这会有什么危害呢?下面简单介绍一下。

假设某人把一个功能为删除站点下所有文件的evil.php通过漏洞传到了http://abc.com/upload/下,然后访问http://abc.com/upload/evil.php,那么:

  • 如果该站点不支持php脚本,是没什么危害的;
  • 如果该站点支持php脚本,它的全部文件就会被删除。

这里有两个关键点,一是主动访问该文件才会触发脚本执行,二是服务器支持该类型脚本才能执行。而本博客刚好不具备这两个条件(后面再详细说明),所以没有造成任何损失。即便如此,这漏洞还是要修复的,不然被无休止地上传文件迟早会占满硬盘空间。

本博客基于express框架开发,上传功能是通过multer中间件实现的,且只有管理后台存在文件上传的功能。因为后台页面、接口都设有权限验证,是不可能被绕过的。最后发现问题出在multer的调用上,而这问题又要归咎于官方文档的错误引导了:

app.use(multer({
	dest: './uploads/',
	rename: function (fieldname, filename) {
		return filename.replace(/\W+/g, '-').toLowerCase() + Date.now()
	}
}))
924次阅读,2条评论

iisnode折腾记

2年前

今年年初打算用Node.js基于Express框架重写博客程序,从此告别ASP.NET。然而,我目前用的VPS是Windows Server系统、IIS服务器,如果让Express和IIS都监听80端口,明显会产生冲突。幸好,有一个叫做iisnode的扩展可以把Node.js程序托管到IIS。而且,这样托管之后也意味着可以使用IIS里面的各种功能(进程管理、GZip压缩、日志、缓存、权限控制、域名绑定等)。

要使用iisnode,得安装:

装好之后,还是按照常规操作,在IIS管理器中创建站点,指向Express程序的目录,关键是还要增加一个web.config文件:

<configuration>
	<system.webServer>
		<handlers>
			<add name="iisnode" path="bin/www" verb="*" modules="iisnode" resourceType="Unspecified" requireAccess="Script" />
		</handlers>

		<rewrite>
			<rules>
				<rule name="all">
					<match url="/*" />
					<action type="Rewrite" url="bin/www" />
				</rule>
			</rules>
		</rewrite>
	</system.webServer>
</configuration>
2185次阅读,2条评论

如何使用npm发布Node.JS程序包

5年前

npm是Node.JS的程序包管理器。进行Node.JS开发时,经常使用它安装/卸载程序包。实际上,发布程序包的工作也是由它来完成的。

配置package.json

要打包程序,首先要配好各项设置,这些设置都由程序包根目录下的package.json指定。package.json的内容必须是严格的JSON格式,也就是说:

  • 字符串要用双引号括起来,而不能用单引号;
  • 属性名一定要加双引号
  • 最后一个属性后千万不要多加一个逗号

配置对象的属性很多,具体可以参阅这里,这里列一下常用的项目:

  • name:程序包名,不能跟已有的程序包重复。
  • version:版本号。
  • description:一段简短的介绍。
  • author:作者信息。包含name、email、url三项属性。
  • bin:如果程序中有可执行文件(主要是命令行里面调用的),就在这里指定,可以指定多个。
  • main:使用require调用本程序包时的程序入口。
  • dependencies:依赖的程序包,可以指定版本号。
7023次阅读,1条评论