Canvas踩坑(1)实时绘制透明线

canvasOpacity_1

Canvas画线算是最基础的操作，涉及的方法也比较简单

1
2
3
4
5
6
7
_cv = _canvas.getContext('2d');
_cv.lineWidth = 20
_cv.strokeStyle = 'red'
_cv.beginPath()
_cv.moveTo(point.x, point.y)
_cv.lineTo(new.x, new.y)
_cv.stroke()

点很多的话，加个 for 循环也轻松搞定，如果画的是透明线，只需用 RGBA 格式即可，比如上图颜色为

1
_cv.strokeStyle = 'rgba(253, 150, 38, 0.41)'

展开全文 >>

element-ui upload组件覆写默认上传行为

element-ui 自带了上传组件，支持多文件，支持文件列表显示，支持定义各种钩子，非常方便

1
2
3
4
5
6
7
8
9
10
11
12
13
<el-upload
    ref="upload"
    :show-file-list="false"
    :action="uploadUrl"
    :before-upload="handleBeforeUpload"
    :on-progress="handleUploading"
    :on-success="handleUpload"
    :on-error="handleUploadError"
    accept=".apk"
    :auto-upload="true">
    <el-button slot="trigger" :loading="uploadLoading" size="mini" type="primary">上传</el-button>
    <span v-html="tips"></span>
</el-upload>

同时也提供了 http-request 参数来自定义上传行为

展开全文 >>

异步回调之generator（1）入门篇

什么是Generator

Generator 是ES6新特性，是另一种异步编程解决方案，提供了与之前传统函数不一样的语法行为
如果说Promise解决了回调函数的地狱式嵌套，Generator则解决了Promise.then()的多级链式调用

语法

function* Generator() Generator写法跟普通函数一样，function 和函数名 Generator 中间多了个*号，同时函数内部可以使用 yield 进行暂停并输出值

1
2
3
4
5
6
7
8
// *号可随意放置，推荐使用第一种写法
function* Generator() {}

function * Generator() {}

function *Generator() {}

function*Generator() {}

展开全文 >>

Axios笔记(2)

实例化

上一篇说了基本用法，实际使用中并不会直接调用，而是实例化一个对象
并配置好基本参数，然后所有请求走实例化对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const service = axios.create({
  baseURL: '/api1.0/'
  timeout: 5000 // request timeout
})

function list(query) {
  return service({
    url: 'getList',
    method: 'post',
    data: query
  })
}
// 调用示例
list(query).then()

配置参数较多，参照 Axios官网

拦截器

axios支持拦截器，可以在请求和返回时进行拦截处理

展开全文 >>

Promise入门指南(5)

Promise.catch

catch 是用来捕获异常的，但是网上很多教程代码把 catch 当 rejected 使用，这是不当的

前面说了 Promise 有3种状态， pending, fulffilled, rejected
并没有一种状态叫异常，实际使用中，能确定的状态用 resolve / reject 来回调，而不是丢到 catch

1
2
3
4
5
6
7
8
9
10
// 错误示例
var p1 = new Promise(resolve => {
    // try something
	throw new Error('something error')
})
p1.then(v => {
    console.log('p2', v)
}).catch(v => {
    console.log('p3', v)
})

这样当报错时，会抛到 catch 去执行，而实际有些错误是可预见的，所以当可预见和不可预见的错误，都往 catch 报的时候，就没法判断了，因此建议用 reject 来处理可预见性的错误

展开全文 >>

Promise入门指南(4)

Promise.all

有一些场景，需要同时调用几个接口，拿到全部返回数据，才能接着往下调用
以往遇到这种情况，需要设置一些临时变量来记录每个接口是否返回数据，每次返回时再判断是否数据已经齐全，再往下接着走
而 all 方法就是为此而生的，接受参数为 Promise对象数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let pArr = [];
pArr.push(new Promise(resolve => {
	setTimeout(() => {
		console.log("p1 resolve");
		resolve("resp1");
	}, 1000);
}))
pArr.push(new Promise(resolve => {
	setTimeout(() => {
		console.log("p2 resolve");
		resolve("resp2");
	}, 5000);
}));
pArr.push(new Promise(resolve => {
	setTimeout(() => {
		console.log("p3 resolve");
		resolve("resp3");
	}, 3000);
}));
let p = Promise.all(pArr);
p.then(resp => {
	console.log("all is done, doing next");
});

// => p1 resolve
// => p3 resolve
// => p2 resolve
// => all is done, doing next

展开全文 >>

Promise入门指南(3)

Promise是JavaScript异步编程解决方案，之一
以往我们所习惯的回调函数也是之一，还有事件监听和观察者模式（也叫发布订阅模式）也算
而Promise是遵循的是Promise/A+规范，像Axios也是遵循这个规范，提供了相同的api

Promise/A+规范解决了回调函数的一些弊端，比如

  • 代码书写逻辑
  • 更改回调顺序的噩梦
  • 多步回调的魔鬼嵌套
  • 回调函数的跟踪

但Promise也不是万能的，作为解决方案之一，并不是适合所有的异步场景

前面说到Promise特征之一就是状态一旦变成 fulfilled 或是 rejected ，则不会再改变，而当执行 then 进行 resolve 和 rejected 回调注册时，返回的其实是一个新的Promise对象

1
2
3
4
5
6
7
8
9
var p = new Promise(resolve => {
	setTimeout( () => {
		resolve(new Date().getTime());
    },1000);
});
console.dir(p);
console.dir(p.then((v) => {
	return new Date().getTime();
}));

展开全文 >>

Promise入门指南(2) 

1
2
3
4
5
6
7
var p = new Promise(function(resolve, reject){
    //do something
    setTimeout(function(){
        console.log('finished');
        resolve('someone');
    }, 2000);
});

前面提到的这种写法，实际不会这么直接把Promise赋值给p，因为大部分function调用需要传入参数，所以习惯在function里面 new Promise 示例并return

1
2
3
4
5
6
7
8
9
10
11
var getUrl = param => {
    return new Promise(resolve => {
        //do something
        $.ajax(url, response => {
            resolve(response);
        });
    });
}
getUrl(1).then(response => {
    render(response);
});

这是比较标准的写法，还有比较偷懒的写法

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true