宏任务、微任务

首先，JavaScript是单线程语言

1. 进程和线程的关系

一个程序至少有一个进程，而一个进程至少有一个线程
线程是进程的实体，是CPU调度和分派的基本单位，可以看成实际在干活运算的是线程，而进程只是一个或多个线程的资源分配和调度的系统单位

进程如果是一个工厂，线程则是工厂里干活的工人
工人共享一个劳动空间，共享劳动工具

就是说进程里，有一个或多个线程，各线程共享同个内存空间和数据

可以看看阮一峰的《进程与线程的一个简单解释》

2. 浏览器是多线程

  • GUI渲染线程
  • JS引擎线程
  • 事件触发线程
  • 定时触发线程
  • 异步http请求线程

其中，GUI线程和JS线程，是互斥！也就是某些页面在做JS运算时，会导致DOM刷新卡住的根源。
所以当JS线程在执行运算时，GUI线程是挂起的
早期通过在代码增加setTimeout来解决渲染卡顿问题

3. Javascript是单线程

JavaScript可以同时执行多个JS文件代码，看似多线程同时执行，其实还是单线程，只不过是分隔成多个任务，在不同任务跳转进行运算

Javascript的执行机制称为Event Loop

任务又分为同步和异步

同步任务都在主线程上执行，遇到异步任务，则丢到任务队列，接着继续执行同步任务，等到同步任务执行完毕，主线程空闲了，才会回过头去查看任务队列

event loop
（图片搜自谷歌）

展开全文 >>

VUE代码规范

为规范代码特写了本文，但实际由于历史包袱，还有很多jQuery时代的代码，加上人员技术水平不齐，执行起来非常有难度

1. 目的

  1. 易于阅读和理解
  2. 有助于debug
  3. 方便接手的人
  4. 不挖坑

2. 目录和文件规范

2.1 目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
src                                  源码目录
|-- api                              接口，统一管理
|-- assets                           静态资源，统一管理
|-- components                       公用组件，全局文件
|-- config                           配置信息
|-- filters                          过滤器，全局工具
|-- icons                            图标，全局资源
|-- layout                           页面模板
|-- libs                             公用工具库
|-- mock                             模拟接口，临时存放
|-- store                            vuex, 状态管理
|-- router                           路由，统一管理
|-- views                            视图目录
|   |-- account                      视图模块名
|   |-- |-- mygroup.vue              模块入口页面

展开全文 >>

ES6笔记(3)类

ES5是没有类这个东西，虽然可以写出看起来像类的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Cat (name, color) {
  let ret = Object.create(Cat.prototype)
  ret.name = name
  ret.color = color
  return ret
}
Cat.prototype = {
  say: function() {
	console.log('say', this.name)
  },
  eat: function() {
	console.log('eat')
  }
}

// 使用
let BlackCat = Cat('Lily', 1)
BlackCat.say()
// => say lily

到了ES6，有了比较正经的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Cat {
    constructor(name, color) {
        this.name = name
        this.color = color
    }
    say() {
    	console.log('say', this.name)
    }
    eat() {
        console.log('eat')
    }
}

// 使用
let BlackCat = new Cat('Lily','black')
BlackCat.say()
// => say lily

因为有了构造函数 constructor 看起来就比较像传统类

展开全文 >>

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 来处理可预见性的错误

展开全文 >>

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