Move fast and break things.
- All
- Life
- Tech
2019年终总结
Overview 现在是 20 年 3 月，这篇 19 年的年终总结来的有点晚了，19 年这一年,每天还是过着按部就班的生活，工作和生活上并没有让我觉得有惊喜的地方，从离开学校到现在也快 3 年了，在我 21 岁上大三的时候，我曾经写过一篇 在 21 岁的时候写给 25 岁的自己，在今年 25 岁这个时间节点，去看看几年前的我的自己的期许，是一件很有意思的事。 Life 消费主义 去年一年在生活…
使用Passive event保证平滑滚动
Problem 我们先来看一个Demo, 在 Demo 中，在的事件的中跑了一段的循环，打开的，切换到移动端的模式，在页面上滑动的时候，可以明显感觉到左边盒子的滚动有明显的延迟和卡顿，而右边的盒子滚动起来却很顺滑；这两个盒子的事件的跑的循环是一样的，差异在于右边盒子将置为了。 Overview 页面的平滑滚动对于用户体验来说是很重要的，特别是移动端，如果开发人员在或者中执行了涉及的代码，会影响页…
双向绑定
在前端的学习中，经常会听到双向绑定（）这个概念，双向绑定的概念很简单，就是视图（）上的更新能够实时更新数据层（），同时数据层的更新也会实时更新到视图层。不同于的数据单向流动（从数据层到视图层），那么如何实现数据和视图的双向绑定呢？ 实现数据的双向绑定，首先我们要搞明白面临的问题： 如何监听试图层的变化？ 视图层变化之后如何更新到数据层？ 如何监听数据层的变化？ 如何将数据层的变化更新到视图层？ …
浏览器同源策略
什么是同源策略 上面是对同源策略的定义，简单来说同源策略就是限制不同的源（）之间的交互的安全策略。想象如果没有同源策略的限制，你访问银行的网站A时的登录信息，在你访问另一个网站B的时候，B网站可以拿到A网站的信息，如果B网站有恶意的代码，就可以直接访问你的银行账户。 同源策略中的同源，是三个相同： 协议相同 域名相同 端口号相同 以为例： URL Outcome Reason http://w…
Promise初探
什么是Promise？ 英文翻译过来是诺言、承诺的意思 顾名思义，的潜在含义是： 代表的是还没发生的事 在事情没有完成之前，无法确定是成功还是失败 而在中的代表的意义是类似的，对于异步操作（网络请求、文件I/O等）这些事情在完成之前无法确定其状态，在完成的时候要么成功要么失败，会在完成的时候通知你。 上面是的定义，是一个表示异步事件处理完成的对象，我们看看传统的异步操作是怎样的： 在传统的异…
前端路由
什么是路由？ 路由最一开始是在后端中出现的，我们在访问某些网站的时候经常会见到类似于这样的: 或者 ，这就是（Server Side Render）服务端渲染，通过后端直接渲染前端页面。这里客户端会发向服务端发请求，服务端解析，根据将需要的资源返回给前端，路由其实就是前端和服务端的一种交互方式，相当于服务端针对于的，每一类对应一个。 前端路由 上面介绍了传统意义上的路由，用户在页面上点击的时候…
实现一个前端状态管理库
在前端开发中，如何对前端状态的管理是一个需要面对的问题，前端主要是数据展示和界面交互，交互的存在就会导致数据的变化，数据的变化会影响页面的展示，也就是说，一个完整的前端状态管理，要提供数据的存储、更新、数据变化的通知机制。这篇文章，我们来了解一下如何从0到1，如何实现前端数据的管理。 发布订阅 首先我们需要一个机制在数据更新的时候，用到这份数据的部分能够知道数据更新了，这样才能保证页面的同步；这…
ES6 Module
在ES6之前，并没有官方标准的模块化方案，在社区中就出现了和这两种方案，前者主要用于服务端，后者用在浏览器端，为了统一写法，又出现了的标准，在中，终于有了官方标准的模块化方案，这篇博客我们就来看看的模块化方案。 Overview 定义和使用模块 如上，是中的用法，这里有两个保留字和，从上面的代码中，我们可以发现，对于不同的方式，对应的的方式也不一样。 Name Export 如上，就是的写法，每…
script在HTML中的加载
在访问网页的时候，浏览器是如何渲染当前的页面的？浏览器获取到输入（、、）的时候，输入中有的信息，有样式信息，代码，在加载页面的时候，如果的加载和解析太耗时的话，首屏的大量留白是很影响用户体验的，这里我们来看看，对于在页面中的加载对的加载的性能影响。 Script在页面中的位置 标签在页面中放置的位置对于整个页面的加载和功能影响是很大，默认情况下，浏览器在解析页面的时候，遇到标签，如果是的话，会立…
自己动手写AMD Loader
上一篇博客Javascript模块化介绍了前端的模块化的一些方案和历史，基于浏览器的规范，我们尝试自己实现一个。 AMD Loader要解决的问题 主要是为了解决浏览器端的模块化，实现的话，以下的点要考虑到： 前端的加载是异步的 模块的依赖也是模块（可能会出现循环依赖的问题） 每个Module只加载一次 暴露 和 其实我们主要要解决的点在于，如何处理的加载。加载要解决两个主要问题，一是对模块的引…