建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

什么样的一个内容是热门的呢？这其实是一个相对的概念，面对不同的需求，它的表达是不同的。 可以看到热度 $H$ 在这样的公式中有 4 个变量即 $H(W,I,T,G)$，此公式与 Hacker News、Reddit 相同，只是定义内容质量 $W$ 时用的逻辑不一样。 很清楚，时…

PWA 技术的流行，给了前端许多新的能力。以前很多前端做不到的事情，现在逐渐可以做到了。本系列文章讲述的的 Web 推送通知就是前端开发者最希望获得的能力之一。 通过推送通知，即使用户的浏览器没有打开，我们也可以触达用户，让用户与我们的 Web 站点有更多的互动。在国外可以直接…

本文暂未涉及Performance面板的内容。 1. Chrome Devtools 的用处 2. 菜单面板拆解 3. 常用命令和调试 1. 呼出快捷指令面板：cmd + shift + p 在Devtools打开的情况下，键入cmd + shift + p将其激活，然后开始在…

大家都说前端写页面较多，几乎用不到算法。本文愿从弹幕设计这个场景来描述算法在前端中的应用，我们先来看下实现效果： 开场之前我们先来描述弹幕开发的难度，再集中精力描述算法设计的思路。 如果弹幕采用相同的字号，碰撞的问题处理起来比较简单，只要考虑相邻弹幕的播放速度和偏移的位置就可以…

深色模式（Dark Mode）在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前，深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度，使得使用人员长时间盯着屏幕眼睛没有那么疲惫；后者通过深色模式来降噪，从而突出主体内容部分。快速开发一个深…

背景：朋友来深圳玩，若说到在深圳有什么好玩的，那当然是宅在家里斗地主了！可是天算不如人算，扑克牌丢了几张不全……大热天的，谁愿意出去买牌啊。不过问题不大，作为移动互联网时代的程序猿，当然是撸一个手机在线斗地主来代替实体牌了。 本文分为上下两篇，本篇讲准备工作以及前端一些布局相关…

2. 循环实现数组 map 方法 3. 使用 reduce 实现数组 map 方法 4. 循环实现数组 filter 方法 5. 使用 reduce 实现数组 filter 方法 6. 循环实现数组的

在我们日常开发的时候，可能会遇到各种各样的需求，但是自己一时半会儿可能找不到合适的办法去解决。书到用时方恨少，下面的这些JavaScript的工具函数可能就会派上大用场了，我们可以进行复用，提高我们的工作效率。 我把下面的方法都大致分了个类放在了我的GitHub上。大家可以cl…