标签 代码段 下的文章

Canvas 实现根据背景色更改前景色

最近有一个需求,大致是要根据图片的背景色来切换前景色,也就是根据 background-color 的色值切换 color。

虽然这么一说,那么就能抽象出以下几个问题:

  1. 如何取到图片某像素的 color 值,或者是某像素区域的平均 color 值
  2. 如何根据 color 划分、如何改变前景的(如 icon、font)color。

- 阅读剩余部分 -

使用 Swagger Mock API

Swagger 是一个完整的从设计到文档到 Mock 的 API 生态体系。

它会帮助你进行一定的设计,对于不符合的设计会报错,你需要掌握它的 yaml 文件书写规范,可以通过 OpenAPI Specification 稍作了解。

最初写文档可能会因为 yaml 语法不熟报一堆 error,习惯之后基本上也没啥问题,这样可以摒弃一些不规范的文档带来的沟通成本。

当然,今天就不介绍这一部分的信息了,在http://editor.swagger.io/#/会存在默认的示例。

- 阅读剩余部分 -

Vue Server Side Render 的爱与恨

昨天整了一天的 SSR,卒,总结一些经验教训仅供参考。

为什么又双叒叕要用 Server Side Render

这就要说到天下合久必分,分久必合的道理了——最初的时候,静态页面就是静态页面,前后端 MVC,服务端渲染出页面;之后,前后端分离,后端提供 API,由客户端渲染页面;最后,我们又回到了最初的起点,不过是前后端分离后再由后端多渲染一次。

这样做的优点当然有很多啦,比如说我们要照顾爬虫(不),照顾蜘蛛,Vue 官方文档写的几点都已经很清楚了:

- 阅读剩余部分 -

Chrome 插件开发:Alarms 定时与事件页面

Chrome 插件本身也提供了计划任务,使用起来也非常简单,我们主要顺着思路来解释一下事件页面的概念。

在使用之前,我们需要清楚,alarms 的 create 只包含了定时器名和一些定时器需要的相关信息,而具体执行什么,则是由 onAlarm 监听决定的,由 alarm 参数的信息来决定执行内容:

- 阅读剩余部分 -

谈谈 Chrome 插件中的 Storage

Chrome 的 Storage 有点类似于 HTML5 的 localStorage,最初我没有注意到这个 API 的时候也是用 localStorage 存储的,但是它可以通过 storage.sync 使用浏览器自带的自动同步,在禁用 localStorage 的隐身模式,storage.sync 也能够正常的使用,此外它是异步操作,因此比阻塞和串行化的 localStorage 更快,用户的数据也能够存储为 String 以外的类型。

当然由于历史原因(需要将过去的配置进行兼容迁移),我这里还是没有直接存储对象,而是处理成字符串存储。(因为在 localStorage 中存储的就是这样,挨个处理太麻烦了 /w)

- 阅读剩余部分 -

Vue2.x 中实现父子组件间的双向绑定

Vue2.x 中父子组件中 props 的属性不能在子组件中改变其值然后传出至父组件了,但是有的时候也会存在一些麻烦,比如我们想要实现一些自定义组件,总是会有值的传入传出改变的,比如我希望做一个 popup,那么肯定需要根据父节点的状态来确定子节点。

尽管官方推荐双向数据流,但还是有一些方法避免报错,实现或 hack 双向数据流:

Event Bus / Vuex

最简单的当然是通过状态管理来管理我们的变量,但对于数据流不复杂的父子节点交互而言,未免太过浪费,因此通常我们不会特别的去考虑它,尤其是 popup / checkbox 这种基础组件的时候。

使用 Object

Object 的值是其内存地址,只改变 Object 内部的值不改变地址将不会出现报错。

- 阅读剩余部分 -

编译原理从零到一 写一个 JSON parser

最近在做 Chrome 插件的高级功能,突然想要试试可视化选择 key 的路径,再一想,咦,这不就是个编译原理的典型例题吗?

于是我就开始着手学编译原理了,主要参考 dalao 的以下两篇文章:

编译原理一共分为四个部分:词法分析,语法(文法)分析,语义分析,代码生成。

词法分析,就是逐个解析之后加上词性,语法分析则是将词法分析后的结果解析为抽象语法树,语义分析是在语法分析时针对具体的实例加上额外的动作解释。具体的可以见上面的链接。

JSON 的首页有非常完整的词法和语法分析的 token 列表甚至是流程图,所以可以省去了一些劳动。

- 阅读剩余部分 -

MongoDB aggregate 入门

本文可能随着 MongoDB 使用技能的增长而更新,因为 aggregate 可以做的事情太多啦。

在 MongoDB 中,最强大的工具无异于 aggregate,aggregate 接受一个数组,数组的每一项都是管道(pipeline)对象。

管道的概念我们在 Linux 中也遇到过,可以把前面的返回值作为后者的输入值操作。

- 阅读剩余部分 -

CSS Safari Hack

这次的标题起得比较简单是因为起标题太难了。

故事要从我在 Element 里发现了一个 Bug 说起,实际上这是 Safari 的渲染问题:http://jsfiddle.net/erpf75ky/4/

实际上在新版也能够复现这个问题,只要是 Safari,屡试不爽。

我们发现是table-layout的问题,在动态添加的table-layout似乎存在了一些微妙的渲染问题,于是在 Safari 下添加一个 class 去修改table-layout的状态,改变一次设置值即可正确渲染。

然而,这样的 Hack 在大部分浏览器里是没有必要的,所以就想着试试加了一下 Safari 的 Hack:

 // Simple hack for Safari 9+
_::-webkit-:not(:root:root), .el-table.loading {
    .el-table__body, .el-table__header {
        table-layout: auto;
    }
}

参考:

is there a css hack for safari only NOT chrome?