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高了,大家可以再等等。

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

阿里云安装wordpress报500 Internal Server Error

问题发生在我帮别人远程安wordpress的时候。

通常是输入数据库相关信息后,点下一步,就报一片英语错误,最显眼的是:Internal Server Error,以及让你联系管理员之类的(我就是管理员,靠!)

为了解决这个问题,我用过 https://www.aliyun.com/zixun/content/3_12_194015.html 里说的办法(也是别人转到阿里云上的),好不容易找到。解决办法简单的说是改WP的文件:wp-includes/class-http.php。

改了后,可以安装了,结果又有问题:无法在线安装WP插件。进入安装插件页面,本来会显示WP插件推荐,但实际上却报:发生意外错误,可能是wordpress.org。。。

今天我终于把这个错误与前面改掉的文件联系起来了,于是我改回原样传上去,好吧,又报Internal Server Error了,网站直接进不去了。

气得我马上填了个阿里云的工单,因为这是我第2次重装WP了,还是故意找的较低的版本。

刚发去就有人回了,让我在空间管理后台切换php版本至5.3以上

就此问题解决。也不报错了,插件也能正常安了。

虽然对阿里云处理工单的速度挺满意,但还是很好奇为啥aliyun默认的PHP版本不能适配wordpress较新的版本(最新都4.4了,我用4.0安也安不起)

完毕

测试七牛云存储的图片外链

自从我按上一篇文章里改了xmlrpc.php受攻击的问题后,网站一直稳定运行,哈哈,心情舒畅!看来并不是空间商的错了。

本文插了一张图,是放在七牛云上的,如果加载不了,则表明七牛云的外链出了问题。

七牛有一个非常好的地方,在于你可以随意调用一张图片的不同规格,比如加上缩略图,加水印等。示范: 继续阅读测试七牛云存储的图片外链