Vim 中使用 eslint 代码风格

ES6 JavaScript Vim 代码风格 Vundle 快捷键

eslint 是一款可配置的插件式架构的代码风格检查工具。可配置不足为奇,但插件式的架构却能带来很多方便。 例如在单元测试代码中,引入 mocha 插件便可自动引入一系列额外的语法规则。

打造前端开发的 Vim 环境 一文中提到了使用 Syntastic 对代码进行代码风格检查。 但同时我们需要按照同样一份规则(就是下文的 eslintrc)来进行代码格式化。 本文详细介绍如何在 Vim 中引入 eslint,以及用 eslint 规则来格式化代码。

继续阅读

浏览器前进/后退缓存(BF Cache)

Chrome Firefox JavaScript DOM XHR 缓存

浏览器前进/后退缓存(Backward/Forward Cache,BF Cache)是指浏览器在前进后退过程中, 会应用更强的缓存策略,表现为 DOM、window、甚至 JavaScript 对象被缓存,以及同步 XHR 也被缓存。 这一现象在移动端浏览器尤为常见,除 Chrome for Android、Android Browser 之外的浏览器基本都会触发。

BF Cache 本来是一项浏览器优化,但在某些情况下(比如前端路由的 Web App)会引起困惑。 本文主要讨论 BF Cache 的行为、如何检测 BF Cache 缓存、以及如何 workaround。

继续阅读

国内主要视频网站的嵌入方式

Flash iframe 视频播放

来一篇水文,整理一下国内各大视频网站的视频嵌入方式,或许有一点用处。 爱奇艺、优酷、搜狐视频、腾讯视频、酷6、土豆、乐视。 这些视频站绝大多数都采用 Flash 的方式播放,很多也提供了 iframe 的播放方式。

根据最新标准应当使用 <object>,可以添加 <embed> 作为Fallback。

但目前正在逐步地支持 HTML5 的原生 <video> 标签,这需要大量的开发工作。 因为 <video> 会被绝大多数国内手机浏览器劫持产生各种出乎意料的渲染结果, 只有 iOS 可以完美地使用 <video>

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript. – App Store Review Guidelines

继续阅读

Web Components 可用性调研

ShadowDom CustomElement 兼容性 模块化 组件化

Web 开放的本质在某种程度上导致其在面向对象、软件工程方面的改进进展缓慢, 而 Web Component 正在尝试将基于组件的软件开发方法应用到 Web 前端的开发中。 使我们可以创建可复用的 UI 组件,并以组件化的方式进行 Web 开发。 Web Components 是一系列 Web 技术的集合,主要包括 Shadow DOM、 CSS Scoping/Encapsulation、 HTML Import、 HTML Template。 这些技术标准大多处于草案阶段,下文中会给出具体的兼容性现状, 以及现有的一些替代方案。

在 Github 等社区和绝大多数互联网公司,从未停止过对前端组件化的尝试。 这些尝试产生了大量的各式各样的组件化技术,它们在解决的问题粒度、 提倡的架构设计、编译和处理的时机等方面各有不同:

  • 从预编译时进行处理的 ES6 模块,到运行时异步加载的 AMD 模块;
  • 从简单的 RoR 简单的服务器端 MVC 设计,到 AngularJS/Vue.js 的前端 MVVM;
  • 从 LESS 等单个语言的预编译工具,到 webpack 这样的全站打包工具。

但基于这些技术的组件化仍然依赖于规范层面的约束,无法保证彻底的组件化。 举例来说,即使是完全 AMD 化的前端组件,也无法保证它能够立即移植到其他环境中。 Web 难以组件化的原因有很多,但最为重要的几个原因是: JavaScript 缺乏模块化标准、CSS 的全局作用域、缺乏组件解析/加载的基础设施等。

顾名思义,Web Components 的主要特性便是提供具有良好封装的、良好互操作性的 Web 组件。 除了标准统一之外,还提供了较为底层的组件化能力:组件可以有独立的 DOM、CSS 的作用域、组件引入机制。

继续阅读

在 Vim 中执行 Shell 命令

Shell Tmux Vim 进程 快捷键

刚开始使用终端和 Vim 工作时,桌面上总是铺满了执行各种任务的终端窗口,任务切换极其困难。 尤其在使用 Vim 编辑文件时每次想执行一些 Shell 命令就会新开一个窗口。 虽然搭建终端工作环境的终极方式是终端复用,但有一些更加轻巧的办法可以在 Vim 中快速执行 Shell 命令。

比如 :!cmd Vim 命令和 :sh Vim 命令,以及 Ctrl+Z Shell 快捷键。 除此之外还可以使用 benmills/vimux 来在 Vim 中操作 Tmux, 这可以达到类似 IDE 的效果:按下编译快捷键打开命令窗格并开始编译, 编译过程中 Vim 不会失去焦点,编译成功后自动关闭命令窗格。

继续阅读

Vim 中的变量类型与作用域

Vim 作用域 寄存器 环境变量 变量

有没有想查看一个 vim 变量的值却无从下手? 有没有被 Vim 变量作用域前缀搞晕? 有没有在 Vim 脚本中不知如何变量赋值? 本文梳理了 Vim 变量的赋值、取值与打印,以及在脚本中如何使用变量及其作用域。

TL;DR

  • 在命令模式、Ex 模式或 Vim 脚本中都可以操作变量。
  • 使用 let, echo, unlet 进行赋值输出和销毁,Vim 选项还可用 set 来操作。
  • $前缀表示环境变量、@前缀表示寄存器变量、&表示 Vim 选项。
  • 使用 b:,g:,l:,t: 等前缀可以限制变量的作用域。
继续阅读