体验异步的终极解决方案-ES7的Async/Await

阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解。
本文以体验为主,不会深入说明,结尾有详细的文章引用。

第一个例子

Async/Await应该是目前最简单的异步方案了,首先来看个例子。

这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve();
        }, time);
    })
};

var start = async function () {
    // 在这里使用起来就像同步代码那样直观
    console.log('start');
    await sleep(3000);
    console.log('end');
};

start();

控制台先输出start,稍等3秒后,输出了end

基本规则

  1. async 表示这是一个async函数await只能用在这个函数里面

  2. await 表示在这里等待promise返回结果了,再继续执行。

  3. await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了..)

阅读全文

node.js实现模拟登录,自动签到领流量。

开始本文之前,期待您了解页面与服务器的交互知识,会更容易理解。

需求

  • 某通有个活动,只要每天签到等各种操作就能累积积分,随着等级提升每月可以领到 20M - 300M的流量等。

  • 作为码农的你当然不愿意以正常的姿势去完成这些事情,所以你想要程序代替你完成这些事情。((^__^) 嘻嘻……)

阅读全文

为什么不可以提前 new 构造函数?

查看本文之前,期待您了解过 javascript变量声明提升(hoisting)的机制

先来看一段函数声明的代码

1
2
3
4
5
f();

function f() {
    alert('正常运行');
}

这段代码能够正常执行吗?

显然是可以的。
根据javascript的机制,这段代码将被解析为:
1
2
3
4
5
6
7
var f;

f = function() {
  alert("正常运行");
};

f();

如果是构造函数呢?

1
2
3
4
5
6
7
8
new F();

function F() {
    this.init();
}
F.prototype.init = function () {
    alert('正常运行');
}

凭直觉,这段代码能够正常执行吗?

阅读全文

LocalResizeIMG-前端HTML5本地压缩图片

前端HTML5本地压缩图片,兼容移动设备IOS,android。

概述

  • 通常压缩图片需要上传到后端,由后端处理。
  • 但是如果要上传的图片很大,特别是手机当场拍摄下来的照片(约2M+),那样效率会很低,用户也不会愿意等待。
  • 现在能够由前端本地压缩的话,效率将会极大的提升。

BUG修复 1.0

  • 修复android下压缩无效果的问题
  • 修复IOS压缩图片扭曲的问题。
  • 微信的话… 经过测试,目前新版本都支持触发上传了,大赞!XD

BUG修复 1.1

  • 修复某些网友反映IOS图片方向不对的问题。(说出原因估计会被打死.. 因为我写错参数了..)
  • 增加 angularJs 支持,双向绑定方式。

图1

使用方法-jquery

1
2
3
4
5
6
7
8
9
10
11
12
	$('input:file').localResizeIMG({
	     width: 100,
	     quality: 0.1,
	     // before: function () {},
	     success: function (result) {
	     var img = new Image();
	     img.src = result.base64;

	     $('body').append(img);
	     console.log(result);
	     }
	 });

使用方法-angularjs

  1. 引入 patch/angular-localResizeIMG.js
  2. 直接看代码吧。
    1
    2
    3
    4
    5
    6
    
    	# js(coffeescript版)
    	app = angular.module 'app', ['localResizeIMG']
    
    	# html (任何元素都能够响应上传,无关view,意味着你可以用任何姿势调用)
    	<button local-resize-img l-width="300" l-quality="0.7" ng-model="pic">上传</button>
    	<img ng-src="pic.base64" />
    

demo

具体详情请查看 源代码,或者 demo

PS

这是8个月前的测试文章的延伸,点我去看看

技术: jquery
时间: 2014年5月
源码: Guthub