本文最初记录在 2017 年 D2 期间。知乎问题为：参加第12届D2前端技术论坛，你有什么收获？
主要是想说一下百度的小姐姐分享的话题 《打造前端复杂应》。

最近正好接手了这样一个类似的项目，（百度 h5 百度脑图）不过整体全是基于 canvas 的，而且也没有事件广播，没有数据驱动，没有模型，全是直接 jquery 直接操作 DOM 的。整体感觉很混乱。现在一个人维护，改起来，感觉很忧伤。

不过听完分享之后，不管是事件广播，还是直接数据的双向绑定，都让我多了很多思路去改造。目前第一步就是先加入了 webpack、ES6、React、PubSub ，先把之前的 jquery 逐渐干掉吧。

不过小姐姐提到百度脑图 和 百度 H5 分别使用 SVG 以及 原生 DOM 来实现的，这样当然没什么问题，不过也提到为什么没用 canvas 的原因，主要是 事件绑定，元素选择相关的等等一些方面的考虑。

但是实际上，根据我项目的使用来说，直接使用 canvas 也是可以的，基本能解决掉提出来的顾虑，当然主要是有这个强大的开源 canvas 操作库：

fabric.js: Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

事件，动画，选中，变换，loadJOSN()，toJSON() 。强大之处，不太好用几句话说清楚，部分功能如下图，建议官网体验:

由于上一篇描述的原因。有图像处理的需求，于是我就开始学习 canvas 啦，和以前的一样，这一篇也是一边学一边写，敲出来的。有不正确的地方，欢迎指出。
canvas 本身的 api 描述是比较简单，但是衍生出来的东西，操作，图像处理，动画，性能，还是非常的多的。所以对于 canvas 的学习不出意外的话，将会是一个系列。这就是第一篇了。下面就开始吧

前言

1

<canvas id="canvas" style="background:blue;">浏览器不支持canvas</canvas>

在不支持 canvas 的浏览器中，显示标签中的内容。
绘图区域 默认是 300 x 150。
canvas 中的宽高是实际的宽高，css 中的宽高会等比缩放。
在开始绘图之前需要先，获取绘图环境。

1
2
3
4
5

const canvas = document.querySelector('#canvas');
if(canvas.getContext){
    const context = canvas.getContext('2d');
    // .... 绘制
}

已经有很长一段时间没有产出博客了。
一. 是因为花了很多时间去专研业务，能够做到目前的基本业务流程理清，大致了然于胸（导致了一个问题：有人找我解决问题，我可能会先问一句，你的需求是什么？）
二. 确实是自己这一段时间确实懈怠了，每天上班回去就不想敲代码了，看看剧，看看小说，刷刷微博。虽然在组内有过一些分享，整理过一些东西，但是却没有将其在博客产出了。
这样的情况，让我明显的感觉到自己的成长速度相对于第一年成长的速度，慢了几个等级。这让我有一种危机感，于是克服这种懈怠，跳出舒适区，继续强健自己。重新回归吧。
最后。还是引用这个博客的描述：”兴趣遍地都是，专注和坚持才是真正稀缺的。”

不多说了，开始吧。

基础介绍

由于公司的项目内部调整，有幸接触 2 个星期的 electron 开发。（然后我又被拥抱变化了。。）实现了一个多账号的切换，并且同时对于多账号的聊天窗口做一个浏览器 tab 的集成的需求，这里对于接触到的知识点，做一个总结。以免完全忘记(忽略代码规范，我自己都看不下去)

electron-中文文档

很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!!

flex 弹性布局
FlexBox 可控制子元素:

• 水平或垂直排成一行
• 控制子元素的对齐方式
• 控制子元素的高度／宽度
• 控制子元素的显示顺序
• 控制子元素是否折行

** display:flex; 创建 Flexbox 元素 **
在 flex 布局中必须理解的概念就是区分主轴和辅轴(侧轴):

文章是很早之前的笔记，做了一些属性上的补充，现发布到博客中来

十年踪迹的博客：HTML5 元素选择流程图

变量定义的新方式：let/ const

let 特性：

1. 不允许重复声明
2. 没有变量提升（预解析）
3. 块级作用域（一对 {} 包括的区域称为一个代码块，let 声明的变量只在该代码块起作用）

例子1 ：简单的打印数据

使用 var:

1
2
3

for(var i = 0; i<10 ; i++ ){
    setTimeout(()=>console.log(i)) // 执行10次，全都打印 10
}

使用 let:

1
2
3

for(let i = 0; i<10 ; i++ ){
    setTimeout(()=>console.log(i)) // 执行10次，打印 0 - 9
}

之前我们要实现这样的打印，必须使用闭包：

1
2
3
4
5

for(var i = 0; i<10;i++){
    (function(j){
        setTimeout(()=>console.log(j)) // 执行10次，打印 0 - 9
    })(i)
}