Paperjs: 序章
最近因为公司项目需要，接触到了paper.js这个库，看完了其官方的示例，倍感惊叹。关注我专栏的同学都知道，自己之前也写过游戏，比如坦克大战，但总感觉太low。要开发一个游戏，涉及到的东西很多，大到游戏的机制设计，小到游戏中的人物角色、NPC类的设计等等。且代码只是实现的游戏机制的手段，作为一个产品，ui也是极其的重要(当然你可以使用虚幻引擎这样的工具–拿来即用，修修改改即可)。看完了paperjs的官方示例，我突然意识到，我找到了一个绝佳的ui武器库。paperjs官方将其形容为向量图形编程界的“瑞士军刀”，在我看来，至少目前看来，也是名副其实的。在本系列接下来的文章中，我会通过研究各种官方有意思的示例代码，掌握该工具库的一些基本使用，然后尝试着，做一些有意思的东西。在这之前，先目睹一番paperjs的强大能力
Tadpoles
蹦迪版的效果如下，其中的每个蝌蚪实例的颜色都是帧数级的在变化：
svg引入tiger图像
绘制各种基本图形
画笔工具系列–主要涉及tools工具包及向量相关操作实现
见缝插针
高斯梯度上色
….等等等。各位看官，敬请期待吧
JS继承相关
本文介绍js继承的几种方法1. 原型链继承利用js的原型链，访问实例对象上不存在但是原型对象中存在的属性和方法。缺点就是假继承。父类的引用属性是共享的。
const Parent = function () {
this.name = 'parent'
this.children = ['son1', 'son2']
}
Parent.prototype.getChildren = function() {
console.log('儿子们:', this.children)
}
const Children = function () {
}
Children.prototype = new Parent()
const child = new Children()
child.children.push('bitch')
child.getChildren()
const child2 = new Children()
child2.children.push('bitch2')
ch ...
Nginx--简论
本文会帮你解答一个问题，nginx 这玩意儿是干嘛的Nginx 是啥，官方说法，一种高性能的 http 与反向代理的 web 服务器。什么叫高性能？说白了就是响应尽可能地快。一般的项目后端配置 tomcat 即可满足需求，因为一个站点在某个时刻不可能会有大量的请求达到。tomcat 最高同时能够满足 5、600 的请求响应，所以说一般场景下基本 hold 住。但是总有些热门的站点。在某一时刻会有数以万计的请求，这个时候，tomcat 就扛不住了，服务器直接飘红。为了解决这一问题，nginx 就来了（最大支持 50000 请求）。
反向代理、负载均衡、动静分离、打包预览
反向代理先说明什么是正向代理。玩吃鸡这类游戏的时候，我们往往要挂个加速器（vpn），不然就很慢。关于为什么慢甚至无法访问，请移步”梯子”那篇文章。这里的加速器，就是正向代理，开启代理，我们触发的任何请求均是由加速器代替我们的客户端发出去的。即：代理客户端就是正向代理。而反向代理的典型就是 nginx。当客户端的请求发送给服务端的时候，实际上被 nginx 拦截，代替服务端返回响应。即：代理服务端就叫做反向代理。两者的效果 ...
Cookie、Token相关
cookie、token都是做鉴权验证的方式，实际上还应该有一个session，面试的时候总会问的一个问题：cookie、session和token的区别。实际上我认为这个问题很傻叉。因为本质上讲这三个东西就是一个东西，这种问题的逻辑，就相当于一只鸡从上下左右观察有什么区别。有鸡毛区别。
鉴权的两种方式：
cookie+session
用户登录，提交用户信息
后端根据用户提交的数据生成一个sessionID，存储到磁盘，并通过set-cookie返回给前端
前端收到自动存储到对应域名下的cookie中，之后的每次请求，都会自动带上这sessionID
token
用户登录，提交用户信息
后段通过jwt等库提供的加密方式，生成一串字符串，无需存储，通过set-cookie返回给前端
前端收到自动存储到对应域名下的cookie中，之后的每次请求，都会自动带上这token，后端只需要判断是不是他生成的即可
过程一致，唯一不同的，就是一个叫sessionID，一个叫token字符串，。这种问题，毫无意义。
Vue.js系列：深入理解生命周期
我tm今天才知道，路由跳转时，旧页面的beforeDestroy，居然是在新页面的created之后。。。。理由很简单，倘若新页面的created逻辑太多导致页面空白。所以如此操作。。。。。
Vue.js系列：vue的路由实现
vue-router存在的目的，就是实现纯前端的路由跳转，需要满足两点：无刷新、内容切换目下就是两种模式：hash模式和history模式
Hash模式：#后面跟着路径（hash值），浏览器向后端发请求时， #后头的字段不会给到后段。因为#只是一个标识符。例如：http://www.xxx.com/#/info.html，后段只会收到`http://www.xxx.com`实现原理：通过监听hashchange,获悉当前url，显示对应视图内容。
window.addEventListener('hashchange', updateView)
Historyh5新增的api，通过history.pushstate、history.popstate跳转到对应路由，显示对应视图,也能实现一样的功能，但是因为少个#，所以更加的美观.例如：http://www.xxx.com/info.html
但该方法准确的讲，是能够实现当用户没有刷新整个页面的情况下，实现视图的更新。如果强制刷新了页面，请求会带上路由中所有字段，后端收到该地址，匹配不到对应地址，出现404，因为没有匹配到任何资源.如何 ...
Vue.js系列：数组变化的侦测
本文详细介绍vue2，对于数组变化的侦测vue2中针对数组的响应式，跟对象的响应式还是有些区别的，总的原则还是那句话：getter中搜集依赖，setter中触发依赖。，但是数组可以调用push等这些能够添加删除数据的api，变更数据。再介绍对象的属性监听时说过，这种操作无法捕捉到，所以vue单独用$set和$delete处理。那么针对数组，vue2又是如何处理的呢？
vue2针对数组，做了一层拦截器。即：当通过那些api变更数据时，实际触发的是我们自己写的函数，然后再走原生方法，这样，每次变更，走我们自己的方法时，就可以执行触发依赖的操作。示例代码如下：
const data = [1,2,3,4]
for (let key in data) {
let val = data[key]
Object.defineProperty(data, key, {
enumerable: true,
get() {
console.log('搜集以来')
return val
...
拥塞窗口的策略机制
本文主要介绍tcp数据包的传输策略：拥塞窗口请大家思考一个问题，为什么说TCP协议是可靠的？是什么东西保证了他的可靠？答案就是“拥塞窗口机制”：拥塞窗口机制确保了，在指定窗口大小的情况下，传输的数据包是完整未丢失的，也就是可靠的。
所谓的“拥塞窗口”是指：在接收方确认数据包之前，发送方可以发出的tcp包的个数。假如拥塞窗口大小为1，那么发送方在发出一个数据包之后，就只能等待，直到接收到接收方的确认信息之后，再发送第二个数据包。那么大小是如何确定的呢？这就涉及到另一个概念慢启动。慢启动的目标，是为了让新链接搞清楚，当前网络的负载状况。默认值可以从1开始，发送方再接收到第一个包的确认后，除了发送第二个包以外，还可以额外再发送一个，也就是一个确认对应俩，指数级别的增加，直到达到阈值。若中间出现丢包情况，自动回缩窗口大小，以适应当前网络状况，匹配出最佳大小。
Vue.js系列：实现一个自己的vue续篇
在前文中，我们已经实现了模板编译的功能。即用我们自己写的vue，已经能够自动的解析页面中的变量，给予展示。那么接下来，我们要更进一步：当变量的值变化的时候，我们能够感知到这种变化，并同步更新到视图。目标拆分： 感知变化,更新视图
感知变化通俗点说，我们需要知道变量值改变的时刻。如何实现？借助defineProperty将目标变量变成响应式。写一个类实现之：
class Obsever {
constructor(vm) {
this.vm = vm
this.data = vm.$data
this.obsever()
}
obsever() {
const dep = new Dep()
for (let key in this.data) {
let val = this.data[key]
Object.defineProperty(this.data, key, {
...
Vue.js系列：实现一个自己的vue
本文开始，我们尝试着实现一个自个儿的vue框架（简陋版本）。
基本功能数据变化，更新视图，视图变化，改变数据。(MVVM中的VM做的事情)
首先我们的页面结构如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My_vue</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<div>{{msg}}---{{info}}</ ...