随笔分类 - Javascript
摘要：一起网易云 🍉 网易云音乐想必是大家很熟悉的一款 app 了，毕竟大家在深夜都会网抑云 开玩笑了，最近在网易云听歌时，发现了一个很有意思的特效： 就是切换歌曲时，会根据当前封面替换背景色。作为资深切图仔，我那该死的好奇心兜不住了，不行，我要去一探究竟。 首先我构思了很多它可能的实现方式： 机器学习
阅读全文
摘要：解决一个问题不只要搜寻最终的答案，寻找答案的过程同样也是重要的，善于思考与总结总归是好的。 本文介绍一个概念 SAX 的设计模式，这个概念虽然不是来源于 Node.js，但它解决问题的一些思想当我们在使用 Node.js 或一些其它的编程语言中遇到类似问题时也会受到一些启发，本文后面会介绍如何流式处
阅读全文
摘要：来自公众号：前端真好玩 Source map 想必大家都不陌生。线上的代码多是压缩后的，如果线上有报错却只能调试那个代码多半是个噩梦。因此我们需要有一个桥梁帮助我们搭建起源代码及压缩后代码的联系，source map 就是起了这个作用。 以下是 MDN 对于 source map 的解释： 调试原始
阅读全文
摘要：很高兴大家喜欢！Github：leonof/imgRecJs，刚刚上传，代码还需要完善～因为有不少同学表示训练和识别有疑问，我做了个小接口放在最后，可以方便大家先把流程走通。 后续会更新：将js代码等打包成chrome扩展程序，这样就可以让浏览器自动识别，完全傻瓜式使用啦～！（更新啦：利用chrom
阅读全文
摘要：思路分析 实现 html parser 主要分为词法分析和语法分析两步。 词法分析 词法分析需要把每一种类型的 token 识别出来，具体的类型有： 开始标签，如 <div> 结束标签，如 </div> 注释标签，如 <!--comment--> doctype 标签，如 <!doctype htm
阅读全文
摘要：js代码的执行，主要分为两个个阶段：编译阶段、执行阶段!本文所有内容基于V8引擎。 1前言 v8引擎 v8引擎工作原理： V8由许多子模块构成，其中这4个模块是最重要的： Parser：负责将JavaScript源码转换为Abstract Syntax Tree (AST)； 如果函数没有被调用，那
阅读全文
摘要：本文意在简单的介绍一下 V8 执行 JS 的过程，通过了解 V8 执行 JS 的过程，知道 JS 代码呈现在浏览器上到底做了什么。当然本人也是在陆续探索 V8 ，文章中如有不当之处，还望不吝指正，理性交流。 众所周知，机器（CPU）只能识别机器码（二进制码），对于 JS 代码，它是识别不了的，所以当
阅读全文
摘要：本文介绍在实现 CLI 中常用的一些终端交互相关的四个工具包，如果你需要实现一个 CLI，这几个工具包必不可少。你只需要将他们组合一下，然后实现你的业务逻辑即可。 inquirer https://github.com/SBoudrias/Inquirer.js 功能：用户和命令行交互(问卷)，获取
阅读全文
摘要：在日常工作中，文件上传是一个很常见的功能。在上传文件时，我们可以选择上传单个文件，也可以通过设置 multiple 属性来上传多个文件。 本文阿宝哥将介绍如何上传目录及如何压缩目录并上传，压缩目录的功能是通过 JSZip 这个库来实现。利用这个库还可以实现在线预览 ZIP 文件的功能，感兴趣的小伙伴
阅读全文
摘要：简介项目中用到获取图片的原始尺寸，然后适配宽高；网上的大部分前端解决方案，都是new Image()后,在onload事件中获取image的尺寸。在图片数量较多的时候，这样的获取效率实在是低下。所以就有了这篇文章。通过直接读取解析文件的字节码来获取图片的尺寸。 IMAGE_HEAD_SIGS var
阅读全文
摘要：前言 Chrome 浏览器的 Performance 面板为我们提供了检测页面性能的能力，但其提供的远不止一些性能数据。本文将从工作原理的视角，结合实际工程的录制结果，探一探性能面板向我们透露的其他信息。 性能面板 关于面板的功能与使用方法，可以参考这篇文章。本节主要介绍浏览器架构与性能面板的关系。
阅读全文
摘要：前言 本文会介绍浏览器中帧（Frame）的概念，它的流程是怎么样的。 至于写这个文章的出发点在于，我好奇浏览器中像素工作流程是怎么样的，什么时候开始的，最后的结果是什么。 基于这些好奇，查阅了些外文资料，本文提供了些参考，参考链接在文末。 缘由 在将帧的概念前，我们得从背景开始看起，也就是渲染页面的
阅读全文
摘要：本文首发于 https://github.com/whxaxes/blog/issues/10 背景 jscodeshift 是 fb 出的一个 codemod toolkit，基于 recast 这个 js 解析器封装了不少方便使用的工具方法。可是因为官网对使用方式的描述有点谜，刚用起来会有点蛋疼
阅读全文
摘要：lottie是一个跨平台的动画库，通过AE（After Effects）制作动画，再通过AE插件Bodymovin导出Json文件，最终各个终端解析这个Json文件，还原动画。本文中我只介绍前端用到的库lottie-web。 对比三种常规的制作动画方式 Png序列帧 2.Gif图 前端Svg API
阅读全文
摘要：我过去写过关于有限状态机的文章 ，并提到XState 。 在这篇文章中，我想介绍这个流行JavaScript库。 有限状态机是一种有趣的方式，可以解决复杂的状态和状态更改，并尽可能避免代码错误。 正如我们使用各种工具为软件项目建模以帮助我们在构建软件之前对其进行设计，以及使用模型和UX工具在构建UI
阅读全文
摘要：如何监控资源加载失败 方案一：script onerror 我们可以给 script 标签添加上 onerror 属性，这样在加载失败时触发事件回调，从而捕捉到异常。 <script onerror="onError(this)"></script> 并且，借助构建工具( 如 webpack 的 s
阅读全文
摘要：本文首发于政采云前端团队博客：如何用 JS 实现二叉堆 https://www.zoo.team/article/binary-heap-with-js 前言 二叉树(Binary Tree)是一种树形结构，它的特点是每个节点最多只有两个分支节点，一棵二叉树通常由根节点、分支节点、叶子节点组成，如下
阅读全文
摘要：CSRF攻击 是前端领域常见的安全问题，概念方面不再赘述，可以参考维基百科。对于这些概念，包括名词定义、攻击方式、解决方案等估计大家都看过不少，但留下印象总是很模糊，要动手操作一番才能加深印象并能真正理解，所以我决定动手实现一个 CSRF 的攻击场景，并通过演示的方式讲解 CSRF 的防范手段。 C
阅读全文
摘要：在 从观察者模式到响应式的设计原理 这篇文章中，阿宝哥介绍了 observer-util 这个库如何使用 Proxy 来实现响应式。而对于 vue-next 项目中的 @vue/reactivity 模块，也是利用 Proxy 来实现响应式。因此，如果你要学习 @vue/reactivity 模块的
阅读全文
摘要：前言 不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难
阅读全文
浙公网安备 33010602011771号