ArchLinux
MacBook
WiFi
声卡驱动
屏幕背光
键盘背光
i3wm
04/26 2019
Web
PWA
SPA
03/27 2019
从 AJAX (Asynchronous JavaScript + XML,异步JavaScript和XML)开始应用,
尤其是 AngularJS 推出之后 SPA (Single Page App,单页应用)已经成为前端 App 的必选方案。
SPA 可以在客户端提供完整的路由、页面渲染、甚至一部分数据处理;
这往往需要一个比 jQuery 时代更重的 JavaScript 框架,来实现这些原本发生在后端的逻辑。
多数框架如 React 、Vue 还会内置组件化机制来帮助开发者组织代码,
它们甚至进化到专门负责视图组件的程度,路由和数据交由各种插件来处理,
比如 vuex 、Redux 、Vue Router 等等。
这些工具已经相当先进和完整,提供了路由方案、服务器端渲染方案、前端状态管理方案。
但 SPA 的本质还是浏览器端 App,底层技术仍然依赖
history API 、defineProperty 、AJAX 。
这些 API 的能力和完备性,决定了 SPA 能达到的用户体验和上层架构设计。
也正是这些底层 API 的不足和缺陷使得 SPA 很难企及原始 Web 的架构优势。
比如在内容可访问性(Accessibility)、服务的独立部署和演化(Independent Deployment)
等方面远不及十年前搭建的同类站点。同时还在不同程度上破坏了 HTTP、URL、HTML 的语义,
这些缺陷使我们需要花费大量精力去修复日志统计、性能优化、首屏渲染、静态分析和测试等环节。
而陷阱在于决策使用 SPA 方案时不一定能有足够的远见看到这些问题对架构带来的深远影响。
与此同时 Web 标准也在持续迭代,诸如 Web Bluetooth、Push API、Web of Things、Service Worker
的标准已经在主流浏览器(尤其考虑国内 webkit 内核的普及程度)有不同程度的支持。
尤其是 PWA (Progressive Web App,渐进式 Web 应用)概念的提出,
给出了一种在不破坏 Web 架构的前提下实现流畅用户体验的方式。
本文就 SPA 架构的一些不足展开讨论,
并探讨 PWA 方案(这里说是方案,其实更是一种技术方向的选择)的价值和私有平台的最佳演化方式。
CommonJS
ESM
ES6
allowSyntheticDefaultImports
esModuleInterop
03/21 2019
从 ECMA 2015 (ES6)JavaScript 开始标准化 ES Modules ,
从 JavaScript 语言层面给出了模块的概念和 import
, export
等关键字。
ES Modules 用来取代 AMD、Webpack Require,CommonJS 这些社区规范。
那么 ES Modules 和 CommonJS 有啥区别,以及新的 ES Module 和旧的 CommonJS 之间怎么相互引用呢?
毕竟 npm 上还有成千上万的 CommonJS 模块,本文就来谈 ES Modules 和 CommonJS 之间的互操作问题 。
TL; DR
ESM 需要不同的解析方式,因此 Node.js 中需要用新的 .mjs 后缀名。
CommonJS 可以通过 import API 引用 ESM,ESM 则可以直接 import CommonJS。
import =
语法受到 Babel 和 TypeScript 支持,但不符合 ES Modules 标准。
TypeScript 中通过 import * as
引用 CommonJS 的方式不符合 ES Modules 标准。
使用 default-import + esModuleInterop 来让你的 TS 代码符合 ES Modules 标准。
开启 esModuleInterop 之后,allowSyntheticDefaultImports 也会自动开启。
Web
性能
03/14 2019
摘要:如果我们继续使用这么多的 JavaScript,Web 就不会走向繁荣。现在多数开发者仍然在不加限制地使用 JS。即使有很多无 JS 和 TTI 友好的工具,但是我们陷入 JS 的泥潭无法自拔。鉴于 JS 的不对称成本,我们需要重新讨论“开发者体验”。
TypeScript
Error
继承
03/05 2019
在 JavaScript 中很多时候都需要自定义错误,尤其是开发 Node.js 应用的时候。
比如一个典型的网站服务器可能需要有 NetworkError
, DatabaseError
, UnauthorizedError
等。
我们希望这些类都拥有 Error
的特性:有错误消息、有调用栈、有方便打印的 toString
等。
最直观的实现方式便是 继承 Error 类 。
但考虑 TypeScript 需要编译到 ES5 兼容性问题会较为复杂,
本文用来帮助理解 TypeScript 中继承 Error 的问题来源以及对应的几种解决方式。
Bash
encodeURIComponent
sed
03/01 2019
JavaScript
Microtask
setTimeout
requestAnimationFrame
Promise
01/16 2019
JavaScript 是单线程的,但提供了很多异步调用方式比如
setTimeout
,setInterval
,setImmediate
,Promise.prototype.then
,postMessage
,requestAnimationFrame
,
I/O,DOM 事件等。
这些异步调用的实现都是事件循环 ,但根据插入的队列不同和取任务的时机不同他们的表现也不同。
尤其在涉及与页面渲染的关系时。
TL;DR
页面渲染/交互任务也会插入在 Task Queue 中,会与各种异步机制插入的任务交错执行。
Microtask Queue 会在下一个任务开始之前清空。
单个耗时任务和 Microtask Queue 都会阻塞页面交互,Task Queue 则不影响。
渲染时机可以通过 requestAnimationFrame 精确控制。
setImmediate 与 setTimeout 一样使用 Task Queue,但克服了 4ms 限制。