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的产生

JavaScript设计模式与开发实践

今天在图灵社区发现一本书,《JavaScript设计模式与开发实践》,有意购买,网页上也就有几个主要图书电商网站的购买链接,比如当当,京东,亚马逊等,我打开了当当与亚马逊,居然发现亚马逊的价格超便宜!

一本原价也50多(本身也不算贵)的书,亚马逊居然标价39.5,相当于7-8折吧。

amazon

当当标价51.4.不知道是亚马逊正在搞活动还是咋的。

可以去看看,过期不候。JavaScript设计模式与开发实践 当然,如果价格比39.5高了,大家可以再等等。

另外我发现,当当的网页变漂亮了。。看来我已经好久没买过书了,不过亚马逊的页面还是一如继往