标签 语法 下的文章

CSS 文字描边效果的研究

前一阵在做 Chrome 插件研究了一波文字前景色的问题,最终我们还是把思路望向了描边,又正好最近看了一波《CSS 揭秘》,里面正好讲到了描边的问题。

最快捷的方法:text-stroke

有个神奇的 text-stroke 属性,如同名字所描述的那样,就是用于文字描边的。

缺点是,它的描边是内描边,占用了字体本身的空间,其二,兼容性太差,这并不是一个标准的属性,目前只支持很少的浏览器,关于它可以阅读:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke

- 阅读剩余部分 -

CSS 文字反色的研究

在之前我们使用 Canvas 去计算颜色和反色,之后经过大佬提醒,原来 CSS 本身也是能根据背景色取反显示的。在这里,我们会学习一个新的特征:mix-blend-mode

引用 MDN 的介绍:

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

- 阅读剩余部分 -

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 中也遇到过,可以把前面的返回值作为后者的输入值操作。

- 阅读剩余部分 -

HTML5 Drag & Drop 入门

以前在面试的时候正好做过一道拖动方块的题,那个时候没有用 HTML5 的 Drag & Drop 来做,其实用 Drag 来做的话会简单很多,不过当时写的文件现在估计早就找不到了,这次业务正好有这个需求,而且又不用考虑兼容性,理所当然的用起了这个。

Drag 的使用门槛还是相当低的,基本上只要知道什么时候触发什么事件就行了,因此这篇主要也像是过一遍 API。

用原生 JS 实现了以下效果:

- 阅读剩余部分 -

MySQL 子查询使用LIMIT

昨天在帮受泽写一句查询的时候才发现MySQL在子查询中是无法直接使用Limit的,不仅低版本没法用,官方手册表明连最新版(5.7)依旧不能用:

https://dev.mysql.com/doc/refman/5.7/en/subquery-restrictions.html

当然,实在想要搞也是可以的,在子查询里再嵌套一层就行了。

比如原句:

select * from table where id in (select id from table limit 10);

- 阅读剩余部分 -

JavaScript Debouncing与Throttling

这周还遇到了一个问题,在遇到了overflow坑之后,我准备自己实现以下滚动效果,第一是滚动条太难看,第二是overflow无法达成我要的效果。

所以就找到了wheel事件想要借此来自己实现滚动,结果一监听就坑了,我发现只要稍微移一下就会触发一次事件,那样一秒可以触发上百次了吧,尤其是使用触摸板的时候还有惯性——根本停不下来。

之后就接触到了解决方案:

参考:http://stackoverflow.com/questions/3515446/jquery-mousewheel-detecting-when-the-wheel-stops

- 阅读剩余部分 -