发表于 | 分类于 ，
| 约 17 分钟

前言

近一年多都在做小程序开发，Vue 感觉都有写些生疏了，从今天开始阅读一下 Vue 的源码，了解其内部的工作机制，本文涉及的 Vue 版本为 2.6.11，我已经提前 fork 了一份到 github 上

双向数据绑定

提到 Vue，自然会想到双向数据绑定，要说他的原理，你也能脱口而出，使用 Object.defineProperty 的 get、set来实现，但要把功能做更强大健壮，往往并不是这么简单。Vue的双向数据绑定由以下几个部分组成

  1. Obserber监听器：负责数据的劫持调用Object.defineProperty来实现监听效果，get负责收集依赖，set负责派发更新
  2. Dep订阅器：负责订阅者的收集，收集依赖
  3. Watcher订阅者：负责更新视图

从入口开始

https://github.com/wclimb/vue/blob/dev/src/core/instance/init.js#L15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    ......

    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    ......

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

从上面可以看出初始化 Vue 会调用多个函数来做不同的事情，本文主要讲解双向数据绑定，所以其他的在这里都不重要，这里我们着重关注 initState 内部方法

阅读全文 »

发表于 | 分类于
| 约 3 分钟

为什么

我们编写node程序的时候，立马会去执行它，如下所示

1
2
3
4
5
// app.js
const http = require("http");
http.createServer((req, res) => {
  res.end("hello world");
}).listen(3000);

执行下面命令运行

1
node app.js

我们接着访问3000端口，貌似没毛病。但是当你退出命令行窗口或者 ctrl+c 终止了程序，再去访问这个程序发现它炸了！你很不解，开始抱怨上天为什么这样对你，然后。。。额，算了，玩笑到此为止，那么怎么才能让它再后台运行呢？

阅读全文 »

发表于 | 分类于 ，
| 约 17 分钟

写在前面

之前我们已经讲解了koa源码中的一些依赖包，Koa源码系列之依赖包解析 Koa源码系列之koa-compose，现在我们来看看koa源码的全流程

解析

我们首先来看看最简单的用法，一下是官网的示例

1
2
3
4
5
6
7
8
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000);

首先我们引入koa包，然后实例化一个对象，也就是const = new Koa()。然后调用use方法，这个方法之前在Koa源码系列之koa-compose讲过，用处就是挂载中间件。当前内部执行的方法就是向前端返回一个hello world的内容，最后我们将应用挂载在3000端口下，这个listen很重要，因为一切我们定义的的方法都会从这里执行。我们看看 Koa 的构造函数的主入口是从哪暴露的，先来🤔思考一个问题，我们怎么快速找到一个包的主入口呢？如果你发布过npm包就知道，我们可以在package.json内找到main，koa的内容是 "main": "lib/application.js"，现在我们可以直接去查看lib下的application文件，是不是很方便？

接下来部分解析可能在代码注释内
https://github.com/koajs/koa/blob/master/lib/application.js#L30

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = class Application extends Emitter {
  constructor(options) {
    super();
    options = options || {};
    this.proxy = options.proxy || false;
    this.subdomainOffset = options.subdomainOffset || 2;
    this.proxyIpHeader = options.proxyIpHeader || 'X-Forwarded-For';
    this.maxIpsCount = options.maxIpsCount || 0;
    this.env = options.env || process.env.NODE_ENV || 'development';
    if (options.keys) this.keys = options.keys;
    // 存放中间件
    this.middleware = [];
    this.context = Object.create(context);
    this.request = Object.create(request);
    this.response = Object.create(response);
    if (util.inspect.custom) {
      this[util.inspect.custom] = this.inspect;
    }
  }
  ...
}

阅读全文 »

发表于 | 分类于 ，
| 约 8 分钟

写在前面

上一篇我们讲了 Koa源码系列之koa-compose，其实也可以归为到这篇文章。今天开始我们看看Koa源码中使用了哪些包，他们起到了什么作用。ps: 这里不准备讲所有的包

is-generator-function

https://github.com/koajs/koa/blob/master/lib/application.js#L122

1
2
3
4
5
6
7
8
9
10
11
12
use(fn) {
  if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
  if (isGeneratorFunction(fn)) {
    deprecate('Support for generators will be removed in v3. ' +
              'See the documentation for examples of how to convert old middleware ' +
              'https://github.com/koajs/koa/blob/master/docs/migration.md');
    fn = convert(fn);
  }
  debug('use %s', fn._name || fn.name || '-');
  this.middleware.push(fn);
  return this;
}

可以看看上面一段代码，koa在注入中间件的之前先判断传入是否是函数，然后判断当前传入的函数是否是 generator，如果是 generator 那么使用convert（koa-convert包，下面会讲到）进行转换，其实转换出来返回的是一个 promise，那么怎么判断是否是 generator 函数的呢？使用了isGeneratorFunction方法，也就是 is-generator-function包，下面是源码

阅读全文 »

发表于 | 分类于 ，
| 约 6 分钟

写在前面

从今天开始阅读学习一下Koa源码，Koa对前端来说肯定不陌生，使用node做后台大部分会选择Koa来做，Koa源码的代码量其实很少，接下来让我们一层层剥离，分析其中的源码

Koa用法

1
2
3
4
5
6
7
8
const Koa = require("koa");
const app = new Koa();
app.use(async ctx => {
  ctx.body = {
    a: 1
  };
});
app.listen(3000);

浏览器打开 http://localhost:3000 可以看到返回了一个对象 {a:1}

阅读全文 »

发表于 | 分类于 ，
| 约 10 分钟

什么是Docker？

Docker 是一个开源的应用容器引擎，可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化

为什么要用Docker

更高效的利用系统资源

由于容器不需要进行硬件虚拟以及运行完整操作系统等额外开销，Docker 对系统资源的利用率更高。无论是应用执行速度、内存损耗或者文件存储速度，都要比传统虚拟机技术更高效。因此，相比虚拟机技术，一个相同配置的主机，往往可以运行更多数量的应用。

更快速的启动时间

传统的虚拟机技术启动应用服务往往需要数分钟，而 Docker 容器应用，由于直接运行于宿主内核，无需启动完整的操作系统，因此可以做到秒级、甚至毫秒级的启动时间。大大的节约了开发、测试、部署的时间。

阅读全文 »

发表于 | 分类于 ，
| 约 4 分钟

因为项目一直都是使用gitlab进行自动化部署，但是都是前人种树，后人乘凉的现状。难得抽空花了一点时间来玩一下gitlab的CI

官方README

准备工作

  • 一台服务器
  • 注册gitlab账号，并且新建一个项目

新建.gitlab-ci.yml

项目下新建文件 .gitlab-ci.yml，你也可以使用Web IDE 在线新建文件

安装Gitlab Runner到服务器

登录你的服务器

1
2
3
4
5
6
# For Debian/Ubuntu
$ curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.deb.sh | sudo bash
$ sudo apt-get install gitlab-ci-multi-runner
# For CentOS
$ curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.rpm.sh | sudo bash
$ sudo yum install gitlab-ci-multi-runner
阅读全文 »

发表于 | 分类于 ，
| 约 18 分钟

vuex使用

当前vuex版本：3.1.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
const state = {
  test: 1
}
const actions = {
  changeTest({ commit }, payload){
    commit('setTestValue', payload)
  }
}
const mutations = {
  setTestValue(state, payload){
    state.test = payload
  }
}
export default new Vuex.Store({
  state,
  actions,
  mutations,
})
1
2
3
4
5
6
7
8
9
import Vue from 'vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
});

首先我们先注册vuex，然后设置一些state/mutation/actions 实例化出来，最后交给 Vue 处理

阅读全文 »

发表于 | 分类于 ，
| 约 3 分钟

写在前面

webpack的loader的应用是非常广泛的，完全离不开它，我们开发的过程往往都是使用别人编写好的loader来处理文件，今天我们就来编写一个loader。

基础

首先我们看看loader是怎么使用在webpack上的

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: 'css-loader',
      },
    ],
  },
}

使用起来很简单，如果你需要处理css文件，那么安装好css-loader包，然后正则匹配到所有.css的文件，使用css-loader进行文件得处理

阅读全文 »

发表于 | 分类于 ，
| 约 9 分钟

写在前面

使用webpack或者自己配置研究过webpack的人都知道plugin，也就是webpack的插件，对于大多数人来说，经常使用的插件诸如：clean-webpack-plugin、html-webpack-plugin等等，在很多情况下，我们只会去用它，知道他是干什么的，但是其内部做的操作缺知之甚少，今天我们就来写一个plugin

基础

首先我们看看插件是怎么使用在webpack上的

1
2
3
4
5
6
7
8
9
10
11
12
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: '...',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
    }),
  ]  
}
阅读全文 »