本文属于《Javascript基础纪要

今天在看一个模板引擎的源码里,发现一个函数:

1
2
3
4
5
function regexpLiteral(source) {
        return source.replace(/[\^\[\]\$\(\)\{\}\?\*\.\+]/g, function (c) {
            return '\' + c;
        });
    }

这函数本来没有问题。但在用于模板引擎中,在解析模板语法的过程中,可能大量调用,此时就会有一个潜在问题——或者说,可以优化之处:

函数中给replace传入了一个正则表达式,是直接使用正则表达式字面量传入的,而这实际上相当于,每次执行这个函数,都会创建一个正则表达式。继续阅读

nodejs,本来是用来开发网站的,但用它来写小工具真是好用到不行,反而用纯JS语法来开发一个整站,看起来不那么容易和靠谱。不过经过这么几年的发展,nodejs已经从0.12升级到了7.5(不得不说版本变化太快同样会给人“不稳定”的印象),大量框架纷纷发布,日益成熟。用来做web开发,应该是足够了。

比如现在想开发一个网站,可使用的框架有: Hapi, Express.js, Restify 与 Koa。

记得我刚开始学习nodejs建站时,网上全是express的文章,没办法,因为当时除了express,其他框架都还没出生,更别提推广了。

而express给我的印象,并不好。首先是他默认的模板引擎jade,让我很抵制——我并不认为有什么比html语法更具描述性,嵌套能力更强的文本标记语言了;其次是express太轻量级了,处理一个表单都要引入“中间件”,在我看来,处理表单(以及文件上传)不应该是一个web框架最基本的能力吗?偏偏要独立出来。基于这两个主要原因,一直没能将express学完。

restify,我也用过,人如其名,他主要是用来做restful的网络接口,要用来做整站(比如动态生成静态html, 处理文件上传等)那就是用错地儿了。继续阅读

本文属于《javascript基础纪要》的一节。

今天在家看书:《你不知道的Javascript》,看到构造函数调用时会绑定this,就顺便打开控制台输了一些代码,详细测试了一下。

构造函数简单的讲,即定义出来专供new 式调用的函数。如:

1
2
3
function A(b) {
    this.b = b || 'bbb';
}

然后你就可以通过new ,来构建一个 A 的实例:

1
var a = new A('B')

但是,一个首要的坑是,构造函数与一个普通函数并无不同,如果你故意不使用new,或忘记用new,都会得到奇怪的错误:继续阅读

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

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

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

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

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

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

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

在工作中遇到一种需求:我需要请求后端数据,但请求数据前需要登陆,获得一个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的方式:继续阅读

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

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

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

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

这几天在写一个简单的只针对单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:继续阅读

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

比如:

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()

继续阅读

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

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

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

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

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

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

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

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

简直不能忍!!

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

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

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

继续阅读