前端如何实现广播式通信呢?Broadcast Channel 就是一个好方法。它会创建一个所有同源页面都可以共享的(广播)频道,因此其中某一个页面发送的消息可以被其他页面监听到。

阅读更多>>

记得年初的时候我给自己制定了一个学习计划,现在回顾来看完成度还不错。但仍有些遗憾,一些技术点没有时间去好好学习。

在学习中我发现,像文章这样的知识往往是碎片化的,而前端涉及到的面很多,如果不将这些知识有效梳理,则无法形成体系、相互串联。最后有一种东懂一块,西了解一点的感觉。因此,我结合工作体会抽象出了一些前端基础技术能力,并将这段时间学习或产出的一些不错的内容根据这些能力进行整理,形成了一份前端技术清单

不论你是正在自学前端遇到了瓶颈,还是对某些技术熟练掌握但某些还未涉足,都希望这份清单能对你有所帮助。

阅读更多>>

「 你能回答这十问么?」

  1. webpack默认配置是在哪处理的,loader有什么默认配置么?
  2. webpack中有一个resolver的概念,用于解析模块文件的真实绝对路径,那么loader和普通模块的resolver使用的是同一个么?
  3. 我们知道,除了config中的loader,还可以写inline的loader,那么inline loader和normal config loader执行的先后顺序是什么?
  4. 配置中的module.rules在webpack中是如何生效与实现的?
  5. webpack编译流程中loader是如何以及在何时发挥作用的?
  6. loader为什么是自右向左执行的?
  7. 如果在某个pitch中返回值,具体会发生什么?
  8. 如果你写过loader,那么可能在loader function中用到了this,这里的this究竟是什么,是webpack实例么?
  9. loader function中的this.data是如何实现的?
  10. 如何写一个异步loader,webpack又是如何实现loader的异步化的?

阅读更多>>

webpack 的成功之处,不仅在于强大的打包构建能力,也在于它灵活的插件机制。

本文的第一部分会先介绍钩子(hook)这个重要的概念与 webpack 插件的工作方式。然而,熟悉的朋友会发现,这种灵活的机制使得 webpack 模块之间的联系更加松散与非耦合的同时,让想要理清 webpack 内部源码结构与联系变得更困难。第二部分将会介绍 webpack 内部插件与钩子关系的可视化展示工具📈,用一张图理清 webpack 内部这种错综复杂的关系。

阅读更多>>

Babel 是一个非常强大的工具,作用远不止我们平时的 ES6 -> ES5 语法转换这么单一。在前端进阶的道路上,了解与学习 Babel 及其灵活的插件模式将会为前端赋予更多的可能性。

本文就是运用 Babel ,通过编写 Babel 插件 解决了一个实际项目中的问题。

阅读更多>>

本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint,但是通过本文,你会快速学习到这一件页面加载性能利器。本系列相关demo的代码都可以在github repo中找到。

阅读更多>>

本文为翻译文章,原文链接见文末

无论你是一个想要学习CSS布局的新手,还是一个比较有经验但想要进一步巩固与了解最新CSS布局知识的前端开发者,这篇指南都能帮你全面了解如今CSS布局发展的现状。

阅读更多>>

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×