Jiananshi's Blog

「译」Tasks, microtasks, 队列和执行顺序

搁了好久没更博客,再不写要被某人 BS 了,挑了篇之前看过的关于 microtasks 很好的文章(来自 Google Chrome 的开发),看完会对 setTimeout/process.nextTick/Mutation.Observer 等等 task 和 microtasks 的概念更清晰些,当然如果这些名词对你来说感到陌生也不妨碍阅读。 当我告诉我的同事 Matt Gaunt......

「译」通过 ECMAScript 6 proxies 进行元编程

介绍 Proxy 的一篇好文,原文来自 2ality,原文挺长的,拖了很久才成稿。原文地址:Meta programming with ECMAScript 6 proxies 这篇博客介绍 ES6 的一个特性:Proxies,Proxies 允许开发者拦截并自定义一个对象(比如获取属性),这属于元编程的特性。 本文的代码会使用到其它一些 ES6 特性,查看 Using ECMAScri......

开启 Web 桌面通知

通知在手机系统上是很常见的功能,比如我们使用微信的时候,退出应用后有消息进来系统会推送通知给用户,这里涉及到两部分:推送 和 通知,本篇文章主要来看一下 Web 通知(顺便给自己立个 flag,下一篇会写相对复杂一点的 Web 推送)。 申请权限第一步依然是检测浏览器是否支持 Notification API: Reflect.has(window, ‘Notification’) 截止到本......

Cookie:作用域匹配

Cookie 相信大家都很熟悉了,至少最常见的场景:用户登录 通常是通过它完成的。这篇博客起源主要由于有天开发,公司分线上和 dev 环境,两个环境调的接口不一样(其中线上接口的 domain 都不同),而接口是要去 set-cookie 的,这里出了些容易掉坑的地方。 Cookie 既然可以为我们保存客户端数据,自然它是不能泄漏给其他网站的,否则他人就可以使用你的 cookie 进入系......

ServiceWorker + Cache 的前端缓存方案

通过 ServiceWorker 可以拦截前端的请求,而 Cache 可以根据请求将响应存储在前端,那么这两者结合起来我们就可以实现一个前端的缓存方案了,这里我们来讨论一下具体的实现和几种缓存策略。 网络请求优先策略(图片来源:https://huangxuan.me/2016/11/20/sw-101-gdgdf/,侵删) 这个方案优先使用网络请求,网络请求失败后再从缓存中提取数据,记得在......

Javascript Cache API

localStorage 和 sessionStorage 相信大家都用过吧,之前学习 ServiceWorker 的时候还接触到了 CacheStorage,这里把自己的理解分享出来 创建一个 CacheStorage 实例首先我们要检测浏览器是否支持 Cache API: assert(‘caches’ in window) 接下来我们要创建一个 CacheStorage 对象供我们......

Service Worker:拦截请求

Service Worker 为浏览器提供了缓存、拦截请求、推送消息、离线应用等帮助开发者为 webapp 提供接近 native app 体验的功能,本文主要讨论拦截 HTTP 请求部分 创建一个 serviceWorkerserviceWorker 的代码需要放置在一个 JS 文件里,通过 serviceWorker.register 注册后才可以使用,在注册之前我们首先需要判断浏览器是......

不定高度内容固定底部 footer

这周基本都在写页面,某天遇到一个很常见的需求:一个在每个页面都要用到的 footer,无论页面内容是否超出 100% 都保持在底部。 以前遇到这种场景通常会用 {position:fixed; bottom: 0} 来解决,但是到了页面超出 100% 的时候就会挡住底部的内容,后来觉得如果想做好一点不用 JS 不行了。今天不甘心查了查资料发现有种很优雅的纯 CSS 解决方案: body 上......

「译」Symbols in ECMAScript 6

Symbol 是 ES6 中一个新的原始类型,这篇博客解释了它的原理。 1. 一个新的原始类型ES6 带来了一个新的基础类型:Symbol,它可以被作为独一无二的 ID 来使用,,通过调用工厂函数 Symbol() 创建一个 symbol(类似把 String 作为函数调用时会返回 string 一样)。 let symbol1 = Symbol(); Symbol() 有一个可选的字符串参......

「译」Reflect in Javascript

在 harmony-reflect 项目中看到一篇介绍 Reflect 的文章,翻译一篇到这里 原文链接 Reflect 对象提供了很多实用的函数,其中有很多和 ES5 全局 Object 的方法重合了(具体是哪些可以查看 harmony-reflect/api.md ),下面我想列举一下你为什么应该现在就开始使用 Reflect 的几个原因: Reflect 有很多跟 ES5 Obje......