淡色的云_社区达人页

2022年04月

• 04.28 13:22:24
  发表了文章 2022-04-28 13:22:24

  属性遍历，会了又没完全会

  我们来归类下，这些都属于哪些属性分类。 了解属性分类以后，让我们再想想 我们又如何获取person 对象的所有属性呢？？

  
• 04.28 13:19:52
  发表了文章 2022-04-28 13:19:52

  chrome开发者工具网络请求过滤

  chrome开发者工具，会列出所有的网络请求，网络请求太多的时候，如何准确过滤出我们需要的网路请求呢？

  
• 04.28 13:15:36
  发表了文章 2022-04-28 13:15:36

  DOM事件避坑指南

  我们常用的document.head和document.body是对开发人员比较重要的两个节点快捷访问。

  
• 04.28 13:09:48
  发表了文章 2022-04-28 13:09:48

  为什么会有window.window这种设计

  为啥要搞这个这个看起来貌似很奇葩的设计。 要解答这个问题，还得请出this，我们经常说浏览器中的全局对象是window, 这句话对了，也还没完全对。 全局对象的真实身份应该是全局作用域的this。 window只是为了便于访问this，弄出来的一个属性。

  
• 04.28 13:07:05
  发表了文章 2022-04-28 13:07:05

  学了这么久，还真就不太懂JavaScript，不信？

  内部槽对应于与对象关联的内部状态，并由各种 ECMAScript 规范算法使用。内部槽不是对象属性，也不是继承的。根据特定的内部槽规范，这种状态可能由任何 ECMAScript 语言类型的值或特定的 ECMAScript 规范类型值组成。除非另有明确指定，否则内部槽是作为创建对象过程的一部分分配的，不能动态添加到对象中。

  
• 04.28 13:02:04
  发表了文章 2022-04-28 13:02:04

  react-use 部分源码分析（下）

  2019 年写的分析，慎重观看。不过其中的思路还是值得学习的。
• 04.28 13:01:35
  发表了文章 2022-04-28 13:01:35

  react-use 部分源码分析（上）

  2019 年写的分析，慎重观看。不过其中的思路还是值得学习的。
• 04.28 12:57:03
  发表了文章 2022-04-28 12:57:03

  hot load那点事

  热加载，最初接触的时候是使用create-react-app的时候，创建一个项目出来，修改一点代码，页面自动刷新了，贫道当时就感叹，这是造福开发者的事情。 再后来编写静态页面的时候使用 VS Code 的插件 Liver Server, 也是及时刷新，平僧幸福感慢慢，什么单不单身，狗不狗的，都不重要了。
• 04.28 12:53:44
  发表了文章 2022-04-28 12:53:44

  如何监测节点尺寸变化检测

  近来有需求要做分页，听起来可能有点Low。 所以我要把Low的事情做得有点逼格。
• 04.26 23:31:58
  发表了文章 2022-04-26 23:31:58

  【编码篇】看破字符 %20 之谜，百分号编码以及其背后

  提到这个 %20，想必大家都见过，熟悉一点编码的人，还会知道这玩意就是空格转换而来！ 那么我们一起破解， 如何编码而来？ 我们今天继续学习前端编码知识

  
• 04.26 23:25:38
  发表了文章 2022-04-26 23:25:38

  字母a的6种表示方法，以及其背后的编码知识

  字符是我们编写程序的基础的基础。 我们前端是最常见的字符，符号，数字，英文，中文， 我们通常都是使用直接量来表示，偶尔会在正则表达等场景用到UTF-16码点的格式，问题来了，那你知道JS有几种字符表示方式吗？

  
• 04.26 23:18:14
  发表了文章 2022-04-26 23:18:14

  localStorage灵魂五问。 5M？？ 10M !!!

  localStorage 存储的键和值始终采用 UTF-16 DOMString 格式，每个字符使用两个字节。与对象一样，整数键将自动转换为字符串。

  
• 04.26 23:13:40
  发表了文章 2022-04-26 23:13:40

  网络请求避坑，2021新规范-私有网络请求（Private Network Access）

  网络请求，大家肯定熟悉的不能再熟悉，网络请求失败，大家也肯定很熟悉。排查网络请求，也是我们必备的技能，对不，兄弟。 我坦言，最怕两种网络请求失败。 第一种：PC端模拟没有异常，到手机上 eruda, vconsole等网络请求信息空白。 这种，就比较头大一点了，可能需要设置手机的网络代理 + 抓包工具 去排查。 第二种： Provisional headers are shown 这种也是比较头疼的，虽然网络有很多文章讲了排查之道，很多时候不太好使，这一回，也不生效。 今天，出场的嘉宾比较特别：Private Network Access 翻译成中文，就是私有网络请求，开始正文

  
• 04.26 23:08:35
  发表了文章 2022-04-26 23:08:35

  复杂web动画，不慌，选择 web Animations API

  说动前端动画，今天说的是第三种 Web Animations API, 也有简称为 WAAPI 的。 与纯粹的声明式CSS不同，JavaScript还允许我们动态地将属性值设置为持续时间。 对于构建自定义动画库和创建交互式动画，Web动画API可能是完成工作的完美工具。

  
• 04.26 23:02:05
  发表了文章 2022-04-26 23:02:05

  NaN你都未必懂，花五分钟让你懂得不能再懂

  NaN全称是Not-A-Number，不是一个数字。 在 JavaScript 中，整数和浮点数都统称为 Number 类型。

  
• 04.26 22:53:28
  发表了文章 2022-04-26 22:53:28

  大挑战！ JS前端知识闯关，你过得了几关？

  基础知识真有趣，10个基础知识的题目，请君来战！

  
• 04.26 22:46:16
  发表了文章 2022-04-26 22:46:16

  【代码篇】事件监听函数的内存泄漏，都给我退散吧！

  内存泄漏是个很严肃的问题，可是迄今也没有一个非常有效的排查方案，本方案就是针对性的单点突破。 工作中，我们会对window, DOM节点，WebSoket, 或者单纯的事件中心等注册事件监听函数, 添加了，没有移除，就会导致内存泄漏，如何预警，收集，排查这种问题呢？

  
• 04.26 22:38:10
  发表了文章 2022-04-26 22:38:10

  【方案篇】事件监听函数的内存泄漏，帮你搞定！

  工作中，我们会对window, DOM节点，WebSoket, 或者单纯的事件中心等注册事件监听函数。要是没有移除，就可能导致内存的泄漏。 SPA更加剧了这种现象 比如React组件加载后，在window上注册了监听事件，组件卸载没有删除，极有可能像滚雪球一样，一发不可收拾。

  
• 04.26 22:22:12
  发表了文章 2022-04-26 22:22:12

  跨浏览器窗口通讯 ，7种方式，你还知道几种呢？

  为什么会扯到这个话题，最初是源于听 y.qq.com/ QQ音乐， 播放器处于单独的一个页面 当你在另外的一个页面搜索到你满意的歌曲的时候，点击播放或添加到播放队列 你会发现，播放器页面做出了响应的响应 这里我又联想到了商城的购物车的场景，体验确实有提升。 刚开始，我怀疑的是Web Socket作妖，结果通过分析网络请求和看源码，并没有。 最后发现是localStore的storage事件作妖，哈哈。 回归正题，其实在一般正常的知识储备的情况下，我们会想到哪些方案呢？

  
• 04.26 22:18:56
  发表了文章 2022-04-26 22:18:56

  30 second of code 15个有意思的代码段

  30-seconds 是一个学习系列，基本都是通过简短的代码实现某些功能， 包含 30-seconds-of-code 满足所有开发需求的简短JavaScript代码片段 30-seconds-of-css 满足所有开发需求的简短CSS代码片段 30-seconds-of-react 满足所有开发需求的简短React代码片段 等等，还有很多系列， 我们今天的主题是 30-seconds-of-code ， 即简短的代码段。 挑选了我觉得比较有意思或者有意义的15个代码，我们一起开始简短代码之旅吧！

  
• 04.26 22:15:50
  发表了文章 2022-04-26 22:15:50

  数值千分位，6种方法和性能对比，值得一看

  前端嘛，经常处理数值和时间。 所以数值和时间的格式化少不了。 最近一直在面试前端， 就出了一个如何给数值添加千分位的面试题。 至于答案，， 一是基于你现有的知识实现， 二是知识面。 有人说， 不就一个千分位， 分分钟解决你， 正则万岁。 没错， 正则很帅， 那么性能呢？ 好了， 进入正文。

  
• 04.26 22:13:08
  发表了文章 2022-04-26 22:13:08

  中高级前端？ 这些一元运算符，你真的搞清楚了吗

  前言 一元运算符，不太起眼，作用很大，请别忽视她！ 走近她，爱上她！

  
• 04.26 22:07:04
  发表了文章 2022-04-26 22:07:04

  贝塞尔曲线在前端，走近她，然后爱上她

  今天我们聊聊我们经常用的CSS3动画里面的贝尔赛曲线，希望能做到，她认识你，你也熟悉她！ 本文源码： Bezier 看完你就懂了一半，动手你就成功了另外一半！

  
• 04.26 21:59:41
  发表了文章 2022-04-26 21:59:41

  前端9种图片格式基础知识, 你应该知道的

  GIF是一种索引色模式图片，所以GIF每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明图片，其中一种方案就是生成GIF图片。

  
• 04.26 21:55:22
  发表了文章 2022-04-26 21:55:22

  call, call.call, call.call.call, 你也许还不懂这疯狂的call

  Function.prototype.call 我想大家都觉得自己很熟悉了，手写也没问题！！ 你确认这个问题之前， 首先看看 三千文字，也没写好 Function.prototype.call,

  
• 04.26 21:52:10
  发表了文章 2022-04-26 21:52:10

  chrome地址栏命令和快捷键，强大到天际，你知道多少!

  前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。 chrome菜单栏的命令，其底层都是调用了chrome://[xx] 这种内置地址， 外加快捷键 所以地址和快捷键记得好，根本没菜单什么事！
• 04.26 21:50:24
  发表了文章 2022-04-26 21:50:24

  最轻量级前端模板Micro-Templating， 源码解析

  关于模板，写页面的人们其实一直在用，asp.net , jsp , php, nodejs等等都有他的存在，当然那是服务端的模板。 前端模板，作为前端人员肯定是多少有接触的，Handlebars.js,JsRender,Dust.js,Mustache.js,Underscore templates,Angularjs,Vuejs,reactjs到处都离不开模板的影子。
• 04.26 21:46:41
  发表了文章 2022-04-26 21:46:41

  掘金可视化智能抽奖，支持暂停和继续, 插件版

  今天我们实现的是可视化智能抽奖， 还是先看效果！！！

  
• 04.26 21:42:09
  发表了文章 2022-04-26 21:42:09

  【利器篇】前端40+精选VSCode插件，总有几个你未拥有！(下)

  有句话，事半功倍，其必然是借助了某些思想和工具。 VSCode是我们前端开发的武器，本文40+精选插件，让其更加锋利，无坚不摧！

  
• 04.26 21:32:33
  发表了文章 2022-04-26 21:32:33

  【利器篇】前端40+精选VSCode插件，总有几个你未拥有！（上）

  有句话，事半功倍，其必然是借助了某些思想和工具。 VSCode是我们前端开发的武器，本文40+精选插件，让其更加锋利，无坚不摧！

  
• 04.26 17:54:35
  发表了文章 2022-04-26 17:54:35

  【SSD系列】雪花飘，购物抛物线，进度条等四个案列，带入走进 CSS transition

  Transition事件的触发次数是非复合的过渡属性的个数, 比如width, height同时变换，那么就是两次。 还比较有趣的事， 比如hover到某元素的时候，开始变换，没变换结束，你就离开。 变换效果会倒着来。上面的demo，就会看到。

  
• 04.26 17:48:28
  发表了文章 2022-04-26 17:48:28

  【SSD系列】DOM0, DOM1, DOM2, DOM3, DOM4，知多少

  DOM（文档对象模型）是针对 HTML和 XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

  
• 04.26 17:45:02
  发表了文章 2022-04-26 17:45:02

  【SSD】掘金的抽奖，“拆穿她“，然后实现一个，顺便封装一个库

  常见表现形式 常见的抽奖表现有两种，九宫格和转盘，转盘又有转动指针和转动转盘两种。 从实现难度上来说， 转盘大于九宫格。

  
• 04.26 17:35:32
  发表了文章 2022-04-26 17:35:32

  【SSD系列】五分钟，100余行代码，纯web技术一起实现摄像头和麦克风视频录制，并带历史记录功能

  关于关于【SSD系列】： 前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。 如题，今天我们用纯web技术，实现摄像头+麦克风 视频的录制功能，代码约100余行

  
• 04.26 17:30:45
  发表了文章 2022-04-26 17:30:45

  【SSD系列】没了jquery, vue, react，你还会DOM节点的增删改查吗？

  关于【SSD系列】： 前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。

  
• 04.26 17:25:06
  发表了文章 2022-04-26 17:25:06

  【SSD系列】图片作为背景的闪白问题，6种基础方案， 不会不知道吧

  关于【SSD系列】： 前端一些有意思的内容，旨在3-10分钟里， 500-1500字，有所获，又不为所累。 某天，发现有背景图片的弹出框，会出现闪白现象，这，兄弟们，你们说能忍么？ 答案：不能！

  
• 04.26 17:21:03
  发表了文章 2022-04-26 17:21:03

  【SSD系列】网页内容生成图片，这18般武艺你会几种呢？

  前端一些有意思的内容，旨在3-10分钟里， 500-1000字，有所获，又不为所累。 网页截图，windows内置了快捷命令和软件，chrome开发者工具也能一键截图，html2canvas和无头浏览器都可以实现，您需要哪一种呢？

  
• 04.26 17:14:29
  发表了文章 2022-04-26 17:14:29

  【SSD系列】共享桌面，3分钟自己实现一个吧，还能听见麦克风声音哦

  关于【SSD系列】： 前端一些有意思的内容，旨在3-10分钟里， 500-1000字，有所获，又不为所累。 共享桌面程序，哇，高大尚耶！其实不然，让我带你3分钟实现桌面共享程序，还能听到对面说话哦。

  
• 04.26 17:09:36
  发表了文章 2022-04-26 17:09:36

  【SSD系列】视频自定义字幕，中英文，彩色的，你也可以，不会不知道吧

  关于【SSD系列】： 前端一些有意思的内容，旨在3-10分钟里，有所获，又不为所累。 字幕，大家见过吧，其实你也可以，真的可以，真的真的可以。不难，不难，真的不难。 我们一起来做点有意思的弹幕吧。

  
• 04.26 16:53:03
  发表了文章 2022-04-26 16:53:03

  【SSD系列】都说柯里化，反柯里化 , 不会不知道吧

  柯里化和偏函数都是函数式编程里面重要的概念，我们今天来来点不一样的 反柯里化。 不过既然是反柯里化，就先了解一下其姊妹 柯里化和偏函数。

  
• 04.26 16:47:54
  发表了文章 2022-04-26 16:47:54

  【SSD系列】傻傻的，3行代码一个订阅发布中心，不会不知道吧

  无处不在的订阅发布模式，也是常备手写系列，可见其地位。 其实，在浏览器端，3行代码，没错3行代码，你就可以拥有一个具备订阅，取消订阅，发布，并具备once能力的订阅发布中心。

  
• 04.26 16:42:54
  发表了文章 2022-04-26 16:42:54

  【SSD系列】傻傻的，连JavaScript，ECMAScript和ECMA-262都分不清楚

  JavaScript一种脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

  
• 04.26 16:39:26
  发表了文章 2022-04-26 16:39:26

  【玩转掘金】掘金专栏文章正生成pdf文档 ｜Python 主题月

  掘金有在看各位的很多优秀的专栏，我一直在思考，如何把这些专栏的文章内容整合在一起呢？ 对，生成PDF文件，数据聚合，方便你我她他它。 Don't worry! 实现的方法方式都很简单，一共不到200行代码。

  
• 04.26 16:30:19
  发表了文章 2022-04-26 16:30:19

  前端Base64编码知识，一文打尽，探索起源，追求真相。

  Base64编码，你一定知道的，先来看看她在前端的一些常见应用： 当然绝部分场景都是基于Data URLs

  
• 04.26 16:16:53
  发表了文章 2022-04-26 16:16:53

  【干货】私藏的这些高级工具函数，你拥有几个?

  很多功能，其实内置的Web API已支持， 比如基于URLSearchParams或者URL的queryString获取和生成 比如基于btoa,atob的base64的编码和解码 比如基于sendBeacon的数据上报 比如基于 Array.from的序列生成 比如基于canvas的视频截图 比如基于URL的UUID生成 我们用精简的代码来实现相对复杂的功能，没有第三方库，你也能秀得飞起。

  
• 04.26 16:08:25
  发表了文章 2022-04-26 16:08:25

  用Python print画一条龙，有眼睛，会动，彩色的，还会喷火那种

  古有 div画条， console画龙。 今有我 Python print 画 战龙， 一条目光凶猛，霸气红色，爱运动，能战斗的霸王龙。 上面的都是产品说的，我是研发， 所以，大家懂的，从产品到设计， 从设计到实现， 每一步都是有差距的。

  
• 04.26 15:57:47
  发表了文章 2022-04-26 15:57:47

  这16种原生函数和属性的区别，你真的知道吗？ 精心收集，高级前端必备知识，快快打包带走

  原生内置了很多API, 作用类似，却也有差千差万别，了解其区别，掌握前端基础，是修炼上层，成为前端高级工程师的必备知识，让我们一起来分类归纳，一起成长吧。

  
• 04.26 15:39:17
  发表了文章 2022-04-26 15:39:17

  依赖反转 + 迭代器思想，实现setTimeout面向next编程

  本着遇到问题，解决问题，记录方案，思考问题的原则，写一个专栏 从问题到提问， 欢迎大家关注。 上一篇专栏的文章是 两个数组数据的高效合并方案。

  
• 04.26 15:33:01
  发表了文章 2022-04-26 15:33:01

  觉醒吧，异步单例模式 - 不一样的单例模式

  异步单例： 创建实例需要一定的时间，创建期间，交出执行权，创建完毕后，拿回执行权，返回结果。

  
• 04.26 15:28:24
  发表了文章 2022-04-26 15:28:24

  三千文字，也没写好 Function.prototype.call

  Function.prototype.call，手写系列，万文面试系列，必会系列必包含的内容，足见其在前端的分量。 本文基于MDN 和 ECMA 标准，和大家一起从新认识call。