博文（玖五）
博文（玖五）
# 深入浅出 - vue之深入响应式原理 本文讲的内容是 vue 1.0 版本，同时为了阅读者的阅读心情，本文尽量做到不枯燥，特别适合那些想明白内部原理又讨厌看枯燥的源码的同学~ 说到响应式原理其实就是`双向绑定`的实现，说到 `双向绑定` 其实有两个操作，数据变化修改dom，input等文本框修改值的时候修改数据 ``` 1. 数据变化 -> 修改dom 2. 通过表单修改value -> 修改数据 ``` 先说第一步，数据变化更改DOM的一个前提条件是能够知道数据什么时候变了，像这种需求如果不考虑兼容性的话，用屁股想都知道可以通过 `getter` 和 `setter` 来实现，每当触发 `setter` 的时候更新DOM 但这就引发了一个问题，我们怎么知道当 `setter`...
Vue 模板编译原理
# Vue 模板编译原理 关于vue的内部原理其实有很多个重要的部分，变化侦测，模板编译，virtualDOM，整体运行流程等。 之前写过一篇[《深入浅出 - vue变化侦测原理》](https://github.com/berwin/Blog/issues/17) 讲了关于变化侦测的实现原理。 那今天主要把 **模板编译** 这部分的实现原理单独拿出来讲一讲。 本文我可能不会在文章中说太多细节部分的处理，我会把 vue 对模板编译这部分的整体原理讲清楚，主要是让读者读完文章后对模板编译的整体实现原理有一个清晰的思路和理解。 关于 Vue 编译原理这块的整体逻辑主要分三个部分，也可以说是分三步，这三个部分是有前后关系的： * 第一步是将 `模板字符串` 转换成 `element ASTs`（解析器） * 第二步是对 `AST` 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器） * 第三步是 使用...
2019年终总结
# 2019年终总结 年终总结是一种针对自己的复盘，回顾这一年是否完成了年初为自己设定的目标，分析原因，并从中学习经验。 ## 大事回顾 * 2019.1 在俄罗斯的东宫广场跨年 * 2019.4 《深入浅出Vue.js》顺利出版 * 2019.5 在FDCON2019（第四届中国前端开发者大会）分享《让你的网页更丝滑》 * 2019.6 开始发明360PC小程序引擎 * 2019.7 获得业务线上半年度优秀个人，获得独孤求败奖。 * 2019.8 云南（丽江，泸沽湖）一周游 * 2019.9 去日本参加TPAC * 2019.11 获得大学专科毕业证 *...
git的快捷键 alias，加 oh-my-zsh应该是使用中比较实用的小技巧 在实际应用中，一遍一遍输入git status,git status,git commit -m 'xx'什么的确实挺繁琐，于是配置alias可以简化成 gst === git status，gcmsg 'xxx' === git commit -m 'xxx'，gp === git push等等。。 大概是这样配置的 - alias gst='git status' - alias gp='git...
# 关于代码评审（Code Review） 前不久Google开源了一份文档（谷歌工程实践文档），里面包含了他们的代码评审（Code Review）指南，通读之后我发现这份文档非常有价值，所以决定写一篇文章将一些入门的，科普性质的部分翻译并总结成一篇文章帮助大家了解下Google的代码评审。 在Google开源的文档中，有两个内部的专业术语：CL和LGTM： * CL，全称为“Change List”，表示已提交到版本控制或正在进行代码评审的一个独立更改。 > 我理解和Github上的PR有点类似。 * LGTM，表示“Looks Good to Me”，当某个CL被批准后，评审者会说LGTM。 ## 1. 什么是代码评审 代码评审是评审者（某段代码作者之外的人），对某段代码进行检查（审核）的一个过程。 我们可以使用代码评审来维持代码和产品的质量，代码评审的主要目的是确保代码库的整体健康状况会随着时间不短改善。 代码评审的另一个重要功能是，它可以教给开发者一些关于语言，框架，常用的设计原则等知识。 ### 1.1 评审什么 当进行代码评审时，评审者应该评审： * 设计：代码是否拥有良好的设计，并适用于项目整体设计。 * 功能：代码的行为是否是作者想要的？这种行为对用户是否友好。...
深入浅出 Koa 原理
# koa 学习koa需要一些相关知识，有两个关键词 - generator - promise 本文主要针对koa的原理进行讨论，属于深度篇，并不会对koa的使用过多介绍。 如果在阅读过程中，发现有哪些地方我写的不太清楚，不容易理解，希望能提出，我会参考建议并进行修改~~ ## koa总体流程图 让我们从一张图开始 上图中，详细说明了koa从启动server之前，到接受请求在到响应请求的过程中，经历了哪些步骤。 那我们按照时间线说起~ ## 启动前 图中有三个蓝色的方块，分别代表三个`静态类`。 什么是`静态类`？这个是我自己给起的名，哈哈 `静态类`就是程序运行前就存在的方法集合，`动态类`就是通过代码生成出的方法集合。额，都是我自己起的名，概念也是我自己琢磨的，就是简单归个类。 三个静态类分别是`Request`，`Context`，`Response` **Request** Request中包含了一些操作 Node原生请求对象的非常有用的方法。例如获取query数据，获取请求url等，更多方法去查API **Response** Response中包含了一些用于设置状态码啦，主体数据啦，header啦，等一些用于操作响应请求的方法。更多方法去查API **Context** Context是koa中最重要的概念之一，Context字面意思是上下文，也有环境等意思，koa中的操作都是基于这个context进行的，例如 ``` javascript this.body...
2018年终总结
# 2018年终总结 2017年仿佛就在昨天，但一眨眼，2018年都结束了。 不晓得为什么，时间过的越来越快。上学的时候一个学期像一辈子，永远也盼不到寒暑假。工作这么多年却感觉，当初一个学期的时间，现在仿佛连睡个懒觉都不够。 今年的年终总结比以往来的更晚一些，因为跨年这两天在俄罗斯玩耍，写年终总结的事情就往后拖了拖。 ## 技术 今年我对Vue.js这个框架自认为可以算精通的程度，我对Vue.js内部各个核心技术的实现原理以及实现细节和框架相关宏观上的思想（例如：框架要解决的问题、如何解决、会遇到的问题）都比较了解。 > 注意：我对Vue.js的学习更多的是在了解它在解决什么问题，使用了哪些技术与方案解决的，这些技术和方案的原理是什么。**而不是如何使用Vue.js**。 > > 或许更精准的描述是：我在学习对于某个问题，Vue.js给出的解决方案是什么。 今年上半年的全部时间都在撰写《深入浅出Vue.js》一书，下半年我把关注点放在了Web性能上面，一方面是自己对这方面比较感兴趣，另一方面也是因为自己加入了W3C性能工作组。现在，我已经对Web性能领域建立起比较完善的知识体系，精读了W3C性能工作组的所有规范，并写了5篇Web性能领域的文章。 > 计划2019年，撰写Web性能领域的知识付费课程。 上面说的两点是看得见摸得着的成长，我觉得今年让我觉得最欣喜的成长是境界上的成长。我在工作了3年的时候，就有一种感觉，觉得自己很牛逼，什么都会，很飘飘然，但始终不知道自己如何向真正的技术大神靠近。当时很困惑我的一个问题是，我什么都会，为什么和真正的大神差距还是那么大呢？说实话，这个就是眼界的问题，因为我看见的东西少，在我看得见的世界里我确实什么都会，但是更大的世界我没有看见，不知道蚂蚁是否意识到人类的存在？ 今年10月份去法国参加了W3C一年一度的TPAC，在那里我感受到了一个专业的世界级程序员应该是什么“感觉”的，虽然没有让我一下子学会什么，但却对我日后的成长照成了一些影响。 > 在Web领域，武林秘籍就是W3C规范，W3C各个工作组分别定义了Web领域各个细分领域的规范。按照武侠小说的说法，如果把武林秘籍修炼至大成，江湖上顶级强者中必有你一席之位。 ## 写作 这一年我做过的最有成就感的事是写完了《深入浅出Vue.js》这本书、 除此之外，今年在博客上共发布了9篇文章。很庆幸各位读者的不离不弃，在各种文章满天飞的今天，这么低的发文频率关注我博客的用户不但没有减少反而提升了不少。2018-1-1我博客的Star数是420，截止到2019-1-7我博客的Star数是1460、差不多这一年涨了1K吧，感谢大家的支持。 ## 生活 今年或许是我生活的最潇洒的一年。我的足迹踏到了阿姆斯特丹、法国里昂、伊尔库茨克、莫斯科、摩尔曼斯克、圣彼得堡、阿拉木图、阿斯塔纳、上海、杭州。 这一年我在不同的国家，不同的城市见到了不同的景色和形形色色的人。也遇到了各种各样的事与图突发情况，有好的也有不好的。或许这对我来说也是一种历练。人活一世不多看看地球长什么样，那和咸鱼有什么区别。我对旅行非常感兴趣，我的足迹也不会就此止步。 ## 读书...
# 5分钟彻底理解Object.keys  前几天一个朋友问了我一个问题：为什么`Object.keys`的返回值会自动排序？ 例子是这样的： ```javascript const obj = { 100: '一百', 2: '二', 7: '七' } Object.keys(obj) // ["2", "7", "100"] ``` 而下面这例子又不自动排序了？ ```javascript const obj = { c:...
# 谈谈我对函数式编程的思考 今天在公司内部听月影讲[《如何写“好” JavaScript》](https://ppt.baomitu.com/d/760c9ae7)，其中重点提到了函数式编程，听完之后很有感想，于是写一篇文章来谈谈我对函数式编程的理解 对前面的例子不感兴趣的同学可以直接拉到最后看结论。 聊函数式编程前，先看几个高阶函数的例子，月影的PPT中也是从高阶函数讲起的 ## 高阶函数 ### 执行一次 ```javascript block.onclick = function (evt) { block.onclick = null; evt.target.className = 'hide'; setTimeout(function () { document.body.removeChild(block); }, 2000); }; ```...
优化关键渲染路径
# 优化关键渲染路径 上个月，我写了一篇文章介绍什么是[“关键渲染路径”](https://github.com/berwin/Blog/issues/29)，其实目的是为了给这篇文章做一个铺垫，本文将谈谈如何优化关键渲染路径（本文将假设您已经阅读过[《关键渲染路径》](https://github.com/berwin/Blog/issues/29)这篇文章或已经懂得了什么是“关键渲染路径”）。 > 优化关键渲染路径可以提升网页的渲染速度，从而得到一个更好的用户体验。 ## 如何优化关键渲染路径？ 优化关键渲染路径有很多种方法与情况，不同情况下优化方式也各不相同，初步看起来这些优化方法五花八门，知识非常的零散。 但在这些看似零散的知识中，我们会发现一些规律，将这些规律总结起来后，可以得出一个结论：到目前为止，只有三种因素可以影响关键渲染路径的耗时。而所有的优化方式，都是在尽可能的针对这三种因素进行优化。 这三种因素分别是： * 关键资源的数量 * 关键路径的长度 * 关键字节的数量 > 切记，非常重要，所有优化关键渲染路径的方法，都是在优化以上三种因素。因为只有这三种因素可以影响关键渲染路径。 关键资源指的是那些可以阻塞页面首次渲染的资源。例如JavaScript、CSS都是可以阻塞关键渲染路径的资源，这些资源就属于“关键资源”。关键资源的数量越少，浏览器处理渲染的工作量就越少，同时CPU及其他资源的占用也越少。 关键路径的长度指的是浏览器和资源服务器之间的往返次数（Round-Trip Time），通常被称作RTT。 关键字节的数量指的是关键资源的字节大小，浏览器要下载的资源字节越小，则下载速度与处理资源的速度都会更快。通常很多优化方法都是针对关键字节的数量进行优化。例如：压缩。 > 关键路径中的每一步耗时越长，由于阻塞会导致渲染路径的整体耗时变长。 ## 优化DOM 在关键渲染路径中，构建渲染树（Render Tree）的第一步是构建DOM，所以我们先讨论如何让构建DOM的速度变得更快。 **HTML文件的尺寸应该尽可能的小**，目的是为了让客户端尽可能早的接收到完整的HTML。通常HTML中有很多冗余的字符，例如：JS注释、CSS注释、HTML注释、空格、换行。更糟糕的情况是我见过很多生产环境中的HTML里面包含了很多废弃代码，这可能是因为随着时间的推移，项目越来越大，由于种种原因从历史遗留下来的问题，不过不管怎么说，这都是很糟糕的。对于生产环境的HTML来说，应该删除一切无用的代码，尽可能保证HTML文件精简。 总结起来有三种方式可以优化HTML：**缩小文件的尺寸（Minify）**、**使用gzip压缩（Compress）**、**使用缓存（HTTP...