gulp是我编译sass与js的不二利器(比webpack好用),但这几天突然发现,gulp watch时,通常莫名其妙的退出,然后实时编译就断了,然后你还在奇怪为什么改了样式没反应。

gulp实现编译sass时,容易频繁出错,比如你写了个ma没按tab就手贱按了保存,sass一编译,不认识ma,就报错了,如果此时导致watch被退出,那后续编译就中断了。报错导致退出,很正常,但如果报错很频繁又每次都导致退出,那人都要疯了。

于是我只有找一下如何让gulp的watch任务在出错时不自动退出。

很简单,我直接说结论

在gulp的task里,加入onerror监听,在监听函数中,处理错误并触发end。代码如下:继续阅读

在线预览(懒更新…)

github地址:https://github.com/wslx520/llazy/

图片懒加载,是一个非常实用且使用非常广泛的功能。由于历史悠久,所以此功能的实现也达成了不少共识,我先简单列举几点:

  1. 需要后端配合:在输出html代码时,不能直接将图片真实地址赋给img.src,而是用自定义属性保存起来,图片的初始src里放一个占位图
  2. 无论是从左往右,从右往左,从上向下,从下向上,都需要能动态lazyload
  3. 初始图片(占位图)如果有明确的宽高信息就好了,不然load时会发生抖动(这也要靠后台,在输出时输出width与height)

网上有太多太多的实现,大部分都很好,完全可以满足使用需求。不过我是一个任何事情都想自已尝试下用起来心中才踏实的人,所以花了点时间自己写了个llazy.js

兼容性

网上有很多jquery的lazyload插件,而做成jq插件,就可以兼容到jq兼容的浏览器,因为最难兼容的就是选择器了。而llazy不想有依赖,所以只兼容到IE8。为什么?因为IE8就支持querySelector了啊!

判断load的时机

很多lazyload插件在判断load时机时都比较麻烦。其实load的时机从人的角度来说很简单,即:图片框出现在了可见区,就可以load了。关键就在于,如何判断图片出现在了可见区。

对这个问题,大家各显神通,什么 offset, client, page, screen, scroll等属性一长串,能把人看晕。甚至有的人实现出来才发现,只能从上向下拖时触发load,其余情况又不兼容,非常尴尬。

而我就在想,图片,是一个矩形;图片的容器,也是一个矩形。当这两个矩形相交时,不就表示可以触发load了吗?

于是google了一下:如何判断两个矩形相交,获得了一个公式——虽然公式是c语言的,但套入JS一点困难也木有。继续阅读

本文属于《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黄金周,且又正是回成人口炒房的高峰期,我们看了几个区域,最后只有选双流,因为那边位置不算太远而最便宜。

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

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

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

2017/3/24: 由评论区网友 clearbug 提供,在windows下最简单的办法是:

1
2
const util = require('util');
require('child_process').spawn('clip').stdin.end(util.inspect("content_for_the_clipboard"));

↓↓↓↓想看我以前的思路可以继续阅读下面的文章↓↓↓↓

在工作中遇到一种需求:我需要请求后端数据,但请求数据前需要登陆,获得一个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()

继续阅读