深入理解JSON.stringify()
2020-04-07
阅读 12 分钟
5.8k就我目前4年（实习了1年，965了1年，996了2年，算3年感觉少了，说是4年老司机也不为过吧。）的工作经验来看，JSON.stringify一般有以下用途：
如何处理浏览器的断网情况？
2020-03-30
阅读 8 分钟
11.8k好的断网处理会让人很舒适：lol的断线重连，王者荣耀的断线重连 可以确保游戏的继续进行坏的断网处理甚至不处理会出bug：比如我手上的项目就出了个bug 业务人员表示非常苦恼网络问题一直是一个很值得关注的问题。比如在慢网情况下，增加loading避免重复发请求，使用promise顺序处理请求的返回结果，或者是增加一些友好的...
如何理解vue中的v-bind？
2020-03-24
阅读 8 分钟
4.4k如果你写过vue，对v-bind这个指令一定不陌生。下面我将从源码层面去带大家剖析一下v-bind背后的原理。 会从以下几个方面去探索： v-bind关键源码分析 v-bind化的属性统一存储在哪里：attrsMap与attrsList 绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttr v-bind如何处理不同的绑定属性 v-bind:key源...
如何理解vue中的v-model？
2020-03-18
阅读 12 分钟
5.2k说到v-model，就想到了双向数据绑定，而且往往最常见的是在表单元素<input>,<textarea>,<select>中的使用，在一些自定义组件中也使用到了v-model。
CSS进阶之CSS变量
2020-03-16
阅读 5 分钟
3.4k前言 基本用法 使用自定义属性的第一步 自定义属性的继承 自定义属性的回调值 有效性和值 无效的变量会发生什么 通过js中获取到的css变量值 var()与rgba()配合实现复用变量 vue实战: 通过颜色选择器切换热力图主题颜色 前言 自定义属性（有时可以称为CSS变量或者层叠variables）是由CSS作者定义的实体，这些实体在一个do...
如何为DOM创建自定义事件?
2020-02-25
阅读 4 分钟
4k创建自定义事件（Creating custom events） 增加自定义数据（Adding custom data - CustomEvent()）
MutationObserver是什么？
2019-12-26
阅读 4 分钟
4.8k目录 MutationObserver概览 MutationObserver构造器 MutationObserver实战 MutationObserver概览 MutationObserver interface可以用来监测DOM树的变化。 MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。 在DOM事件触发的时候，会触发MutationObserver中传入的callback。 DOM监听是不会立刻开始的，...
如何打通前端dist和后端jar？
2019-11-30
阅读 3 分钟
6.2k前端dist和后端jar已经分别独立部署到服务器上，这篇博客是对下面两篇博客的延续。 如何部署前端dist目录？ 如何部署后端jar包？ 那么，怎样打通前后端，产出一个完整的线上项目呢？这篇博客主要基于arya-spring-vue项目探索如何打通前端dist与后端jar，从而完成一个完整的包含前后端开发到运维的完整项目。 主要包含以...
如何部署后端jar包？
2019-11-29
阅读 4 分钟
6k虽然是前端，但是自己启动了以vue，typescript，iview，spring-boot，mysql为技术栈启动的arya-spring-vue全栈项目。
如何部署前端dist目录？
2019-11-22
阅读 7 分钟
14.4k前端部署其实也算前端工程化的一部分，这篇博客是我结合实际工作经验和业余探索，总结出的前端部署的一些尝试。一方面自己有所记录，另一方面也能给大家带来些启示。
IntersectionObserver是什么？
2019-11-20
阅读 12 分钟
5.3kIntersectionObserver概览 IntersectionObserver构造器 IntersectionObserver方法 IntersectionObserver懒加载（vue单文件组件简版） IntersectionObserver吸顶（vue单文件组件简版） IntersectionObserver触底（vue单文件组件简版） IntersectionObserver懒加载、吸顶、触底综合（vue单文件组件实战版） 基于Intersecti...
如何理解vue中的key？
2019-11-01
阅读 4 分钟
7k就目前所了解的情况，key的作用有以下这些。 v-for遍历时，用id，uuid之类作为key，唯一标识节点加速虚拟DOM渲染 响应式系统没有监听到的数据，用+new Date()生成的时间戳作为key，手动强制触发重新渲染 场景一大同小异司空见惯，场景二是下面这样的： {代码...} 那么vue中key的相关知识点到底是怎样的呢？ 官方API知识...
ResizeObserver是什么?
2019-10-23
阅读 3 分钟
5.2k其实一开始是一头雾水的，但是通过万能的mdn，以及充满智慧的我，最终还是完成了这个需求。其中最核心的还是ResizeObserver这个第一次用的类，所以会在这里做一些记录。
前端String那些事儿
2019-09-26
阅读 5 分钟
4kjs中的String其实不仅仅是"foo"这样的字面量字符串。Blob构造函数的入参array，数组元素可以是USVString，到底什么是USVString让我很困惑。
前端唯一标识那些事儿
2019-09-17
阅读 5 分钟
4.8k在做聊天模块的时候，最初的消息唯一标识是msgId，在业务量小的情况下是可以满足需求的，毫秒级的唯一冲突是很难出现的。但是当用户量上升之后，时间戳的这种方案显然不行。因此需要引入一种新的前端生成唯一标识的方案。
前端webpack构建优化
2019-08-03
阅读 4 分钟
3.2k从0到1负责手上项目一年多了，webpack虽然是老生常谈的话题，但只有出现问题时，才会去思考怎么去优化。由于项目里引入了越来越多的依赖，所以本地开发编译过程越来越慢，因此才有了这一次的webpack优化。顺便对一些生产环境的静态资源也做了一些优化。
[Leetcode 622]设计循环队列
2019-06-09
阅读 3 分钟
1.7k设计你的循环队列实现。 循环队列是一种线性数据结构，其操作表现基于 FIFO（先进先出）原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。循环队列的一个好处是我们可以利用这个队列之前用过的空间。在一个普通队列里，一旦一个队列满了，我们就不能插入下一个元素，即使在队列前面仍有空间。但是...
如何理解语义(semantic)化？
2019-04-24
阅读 4 分钟
3.2k前端工程师们口里的web语义化，实际上是指HTML5标签的语义化。但是这并不完全正确，在W3C标准，有semantic web的详细介绍，我将结合W3C标准的介绍和其他资料，深入理解web语义化，而不仅仅停留在标签层面。那么HTML的语义化就不重要了吗？显然不是，medium上有一篇很好的博客。
如何理解debounce(防抖)和throttle(节流)?
2019-01-09
阅读 6 分钟
3k前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是throttle，防抖就是debounce，其实这个也属于前端性能优化的一部分。
记一次简单的vue组件单元测试
2018-12-02
阅读 10 分钟
13.8k记录一些在为项目引入单元测试时的一些困惑，希望可以对社区的小伙伴们有所启迪，少走一些弯路少踩一些坑。 jest, mocha, karma, chai, sinon, jsmine, vue-test-utils都是些什么东西? chai，sinon是什么？ 为什么以spec.js命名？ 如何为聊天的文字消息组件写单元测试？ 运行在哪个目录下？ karma.conf.js怎么看？ 人生...
实用webpack插件之DefinePlugin
2018-12-01
阅读 8 分钟
24.4k通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。
如何引入阿里云ARMS前端监控？
2018-12-01
阅读 4 分钟
5.2k老大对我目前手上的项目引入了阿里云ARMS前端监控，但是我自己对ARMS SDK的API以及如何注入到Vue中不是很懂，因此这篇博客诞生了。
简单理解slot算法和shadow DOM
2018-11-23
阅读 3 分钟
4.3k阅读完这篇博客你会有以下收获： slot算法是什么？ shadow DOM是什么？ vue slot机制与w3c web component 规范的 shadow DOM渲染结果有何异同？ slot算法 The slotting algorithm assigns nodes of a shadow tree host into slots of that tree. InputHOST -- a shadow tree hostOutput All child nodes of HOST are slo...
如何使用Chrome DevTools花式打断点
2018-10-13
阅读 15 分钟
19.7k原文：Pause Your Code With Breakpoints作者：Kayce Basques Chrome DevTools & Lighthouse技术作家 参考这份指南，结合自己手上的vue项目进行实践，可以说对原指南进行了plus，因为实践过程中会有很多指南之外的新发现。 主要内容包括如下： 预览几种不同的breakpoint类型 代码行级(Line-of-code)断点 代码里的某...
如何理解git rebase？
2018-10-12
阅读 6 分钟
24.4k在merge PR的过程中，rebase and merge会产生冲突，因此需要补充一下Git rebase的知识点。 Understanding Rebase (And Merge) in Git Merging vs. Rebasing webstorm 的 Rebase Current onto selected什么操作？ rebase and merge 一个Pull request做了什么操作？ Understanding Rebase (And Merge) in Git merge 是Git...
es6必会之let && const
2018-10-07
阅读 9 分钟
2.7klet ，const， blocking scope ，temporal dead zone，redeclaration，reassignment，immutable，initializer