小老百姓买房记录

今天是周六,而我还在上班。国庆前夕公司突然改制,提出大小周上班(即双周周六上班),而今天就是国庆来后的第一个大周,恰好又赶上国庆来的连续7天班,所以个人的心情好不了。

这也是个人对互联网寒冬最直接的体验了。

本周四的时候,陪舅妈去把房子买了。舅妈来成都买房,没有靠得住的亲戚在这边,于是整个看房到买房的阶段我都有参与,就在这里记录一下吧,但我对某些事情不发表评论。

舅妈是国庆前来的,国庆假间我们陪她看了几天的房子。不得不说舅妈回来得不是时候,正赶上10.1黄金周,且又正是回成人口炒房的高峰期,我们看了几个区域,最后只有选双流,因为那边位置不算太远而最便宜。

节后我上班了,我表妹陪舅妈又看了两天。我们的意思就是先不买了,但舅妈应该是觉得回都回来了,不买就又出去打工,太不划算,最终决定买了。但这次要买的,比之前看中的同样条件的一套房,多了一万。

而且要去房东上班的地方签合同。

由于年轻人都在上班,要签合同就得请假,但只有我与我弟买过房,最终决定由我陪舅妈去。 继续阅读小老百姓买房记录

nodejs实现复制文本到剪切板

在工作中遇到一种需求:我需要请求后端数据,但请求数据前需要登陆,获得一个token。登陆方式是向一个json地址post数据即可。之前我的做法是,用chrome插件postman来实现登陆动作。但后来无意中发现,postman内存占用超高!即使我并没有使用它。这让我很不爽。

后来一想,实现这么简单的一个动作,用这么重的插件,对于我这样一个会nodejs的前端程序员是不是太Low了?简直不好意思对人讲自己会nodejs!

于是我就花了点时间写了个简单的脚本。本文记录一下开发过程。

思路大概是,用nodejs脚本发请求,并将返回结果中的token自动复制到剪切板,于是我只用在调试代码中,ctrl+v就行了。

思路很简单,但实现起来居然坑很多。

nodejs没有直接复制到剪切板的API!

非常简单的功能,但nodejs没有提供。但不要绝望,因为nodejs可以调用系统命令,而系统命令中有不少可以操作剪切板的命令。

我google之后,由于系统是windows,所以考虑使用windows cmd命令中的clip,来实现复制到剪切板的功能。

nodejs调用系统命令(cmd)

var exec = require(‘child_process’).exec,然后你就可以像普通函数一样调用它,如:exec(‘echo 111’);

clip命令的坑

在cmd里,实现复制文本到剪切板最简单的命令是:echo 123456 | clip。本来,在nodejs中拼出这样一句语句,交给child_process.exec执行就可以了。但这个命令的执行结果,有个我无法忍受的bug:复制出来的文本,最后有个换行符(echo造成的)!我不可能在ctrl+v后,还要按几下删除键才能ctrl+s啊!

当时让我很纠结,我很奇怪微软连这么简单的命令都没作好。但无奈事情还是要做的,只有继续寻找解决办法。于是有了下面这个不经过echo的方式:

1
<nul (set/p z=123456) | clip

这种方法十分别扭,注意最开头那个<,不是我打错了字!大致思路是,通过set命令设置一个变量名为p(此名随意改)的变量,值为12346,并马上调用clip复制此变量的值。 但这种方法复制出来的值还是有bug:末尾多了一个空格!虽然你代码里并没有空格,但复制出来就是有!去不掉! 当时我简直要骂娘了!没有换行就有空格,能不能靠点谱! 继续阅读nodejs实现复制文本到剪切板

推荐一篇webpack入门文章

是中文的哟。https://angular.cn/docs/ts/latest/guide/webpack.html

虽说是入门文章,但我觉得我需要用的都说到了。感觉比官方文档好太多。

讽刺的是,是Google写的。这些大公司也挺奇特,生产工具的写个文档超复杂;用工具的完全有能力自己写个,却用了别人的,并写了一篇别人工具的教程。

看这篇文章需忍受将bundler翻译成”包儿”的别扭感。

Javascript:Element.matches()与jQuery.is的实现

这几天在写一个简单的只针对单Dom节点的jquery,只考虑IE8+。jq里有个is方法,非常好用,他的用法是:

1
$('#div1').is('#content .sidebar');

这样就可以判断$(‘#div1’)是否是位于#content下面,且具有.sidebar的className了。我也要实现一个。

本来我昨天已经实现了,但今天在搜索mouseleave相关问题时,居然意外的发现了更好的解决方式。就是Element.matches(),他用来判断element是否匹配给定的选择器

他的使用方式简单得和jq.is一样:

1
node.matches('#content .sidebar');

当然,这么好的方法,IE8是不支持的,有的旧的现代浏览器也不支持,但MDN直接给出了polyfill: 继续阅读Javascript:Element.matches()与jQuery.is的实现

Javascript神技:快速判断两个DOM节点是否相同-Node.isEqualNode()

注意,是相同,不是相等。

比如:

1
2
3
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

其中第1个div与第3个div明显完全相同,但用==或===判断他们时,永远会得到false。

判断两个DOM节点相同的需求在哪里呢?最近React不是很热吗,他提出了“虚拟DOM”的概念,其中提到,他们会判断虚拟dom与真实dom,并只更新需要更新的部分,这是一种需求;

而平时我们自己写JS时,比如你用各种办法生成了一段html,想用他替换已存在的一个dom节点,不过如果此html与现存dom节点本来就是一样的,那不管不顾的更新dom就会造成性能浪费。

此时你可以用一个临时节点(不用添加到document里都行),将你的html赋进去,然后与现存的dom节点对比,如果有不同,再更新(或做其他你想做的)。

Node.isEqualNode()

继续阅读Javascript神技:快速判断两个DOM节点是否相同-Node.isEqualNode()

尝试用七牛云加速了本站

网上有不少如何使用七牛加速wordpress的教程,之前我一直觉得应该很难很繁琐,所以没尝试过。不过老婆总是觉得她的网站很慢让我想办法,迫不得已研究了一下,发现比想像中要简单些。

我参考的主要有两篇文章:

这是不使用插件的: http://cuiqingcai.com/357.html

这是使用我爱水煮鱼提供的七牛云存储插件的: http://blog.wpjam.com/project/wpjam-qiniutek/

本站使用的是无插件的办法,因为本站恰好也用了wp-super-cache。我老婆的站则使用了插件。目前不论是我的站还是她的站,速度都有很明显的提升。

使用插件的情况下,配置相对要简单些。

不论是否启用插件,都要使用七牛云自身的“镜像存储”功能。具体请参考上面两篇文章。

HTML:表格rowspan跨行时的hover效果

rowspan跨行是table的一个很正常的需求,而tr的hover效果更是普遍。但既有rowspan又需要行的hover效果时,往往看到的就是这样:

简直不能忍!!

前几天碰到这问题时,我本打算写些JS代码来解决,但写起来比较复杂,虽然后面我想到了一种相对简单的思路,但需要html本身可控(就是html啥样可以由你决定),不适合大部分情况。

后来我觉得,这样一个显著的问题,不可能前人没有碰到过。于是用Google搜索之,果然。

解决思路很简单,我甚至不需要给大家列举代码,只口述即可。

继续阅读HTML:表格rowspan跨行时的hover效果

开始Linux学习之旅

今天把系统升级到了Win10,为什么呢?因为原来的win7安虚拟机总是有各种各样的问题。。。

于是今天特地升级到win10,现在已经安装好了虚拟机,且安装好了Ubuntu了。正式开启Linux学习之旅!

第一个要安装的,就是node.js了,我cd到根目录,居然无法wget,一想觉得应该是我不该切换到根目录的,于是我切换到home/user下,终于可以wget了。

后续安装教程请在网上搜索吧,我也要开始了!

etpl-wrap的产生

这周发了个etpl的node包装器,到npm上,以及对应的github地址:https://github.com/wslx520/etpl-wrap

为什么会有etpl-wrap?

etpl是我用过的一款非常强大的模板引擎,该有的功能都有。

etpl是可以用在node环境下的,但用法与我想像中的不一样。

这就要从我学习koa说起了,我学的koa2,他有一个koa-views的中间件,用来接入渲染模板文件的功能。但理所当然的是,无法与etpl配合起来使用。 继续阅读etpl-wrap的产生