网格布局(CSS Grid Layout)浅谈

近几年,Flexbox的出现,带来了巨大的轰动效应,它使CSS变得更加强大,给我们带来了更大的施展空间,并在几乎所有的浏览器中都得到了很好地支持,你没有理由不使用它。我们发现Flexbox在很多情况下对我们非常有帮助,但是它绝对不是一个构建整个布局的理想候选方案。我们更倾向于使用浮动或者内联元素来构建整体布局,但是这并不是浮动、内联元素被创建出来的初衷。但很遗憾CSS从来没有一个这样的内置功能,为了建立布局,我们没有选择,只能用这些Hack。 好消息是CSS Grid Layout Model 是一个转折点,我们可以用它的一些基础功能就可以重建一些标准布局。目前,浏览器对网格布局的支持情况还不是很理想。唯一支持它的浏览器是Edage和最新的Internet Explorer »

JavaScript 中的尾调用

尾调用(Tail Call) 尾调用是函数式编程里比较重要的一个概念,它的意思是在函数的执行过程中,如果最后一个动作是一个函数的调用,即这个调用的返回值被当前函数直接返回,则称为尾调用,如下所示: function f(x) { return g(x) } 在 f 函数中,最后一步操作是调用 g 函数,并且调用 g 函数的返回值被 f 函数直接返回, »

SVG Sprite 简介

前言   首页的高速加载和渲染一直是前端开发者们津津乐道的事情,因此各种技术也应运而生。在 HTTP1.1 时代,为了减少请求的发送,加快首页加载,压缩和合并成了必不可少的技术,其中包括了 JavaScript 文件的压缩、混淆和合并,还有 CSS 文件的压缩和合并,最后还有一个是针对小图片的请求优化,也就是 CSS Sprite,也叫 雪碧图 或 »

【译】IntersectionObserver 正在来到我们的视野

译自:https://developers.google.com/web/updates/2016/04/intersectionobserver?hl=en 比如说,你想跟踪 DOM 树里的一个元素,当它进入可见视口时得到通知。 也许想实现即时延迟加载图片功能,或者你需要知道用户是否真的在看一个广告 banner。 你可以通过绑定 scroll 事件或者用一个周期性的定时器,然后再回调函数中调用元素的 getBoundingClientRect() 获取元素位置实现这个功能。 »

让我们一起来学习 RxJS

这是一篇 RxJS 初学者教程。 What Is RxJS 通过阅读官方文档,不难得出:RxJS 可以很好解决异步和事件组合的问题。 这个时候我就有疑问了,异步问题不是用 Promise ( async/await ) 就好了吗? 至于事件,配合框架 ( React, Vue, Angular2 等 ) 的话不也很容易解决吗? 不管怎样, 让我们先看个 Hello »