Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederyanhaijing.com
颜海镜
Get the latest updates from 颜海镜 directly as they happen.
Follow now 16 followers
Latest posts
Last updated 7 months ago
揭秘自定义 ESLint 插件开发，打造高效开发环境
9 months ago
本文已收录到《jsmini系列文章》 在工作中，我们会沉淀了一些最佳实践，一般工作中的一个项目可能由多个开发者负责，在这样的背景下，很难做到每个开发者对最佳实践都了然于胸，在遇到人员更迭的时候，就更难受了。 虽然可以通过代码审查发现问题，但是代码审查存在两个问题：一个是滞后问题，代码审查时已经开发完了；另一个是靠人来审查，难以 100%保证质量。 如何保障团队代码风格，最佳实践的一致性，让代码看起来就是一个人写的，本身就是一个难题。 如果能有一个智能助手，实时提示代码中的哪些部分可以使用工具库中的函数代替就好了。对于前端来说，这个助理就是 ESLint。 那么如何让 ESLint 支持我们的最佳实践呢，这可以通过 ESLint 的自定义插件来实现。要开发...
一文搞定函数参数默认值
11 months ago
本文已收录到《jsmini系列文章》 划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿 在JavaScript的世界里，函数参数的处理不仅是代码复用性和模块化设计的核心，也是提高开发效率和可维护性的关键。随着JavaScript语言的发展，我们见证了从基本技术到复杂处理的演变。本文将探讨JavaScript中处理函数参数和默认值的历史，包括早期的技术、ECMAScript 2015引入的现代语法，以及如何高级处理复杂对象。 在ECMAScript 2015之前的参数默认值 在 ECMAScript 2015 之前，语言层面并不支持函数默认值，一般都是函数内部自己处理，比较常见的做法是使用或逻辑运算符...
手把手教你破解 JavaScript 深层数据
11 months ago
本文已收录到《jsmini系列文章》 划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿 今天我们将探讨如何处理 JavaScript 中的一个常见问题：深层数据访问。 JavaScript 中常用的引用数据结构是数组和对象，数组表示有序数据，对象表示无序数据，使用对象和数组可以组合出任何数据结构，如对象嵌套对象可以表示树形结构等。示例代码如下： const tree =...
如何优雅的安装Node.js和npm
about 1 year ago
我之前写过一篇小白的 Mac 上手指南(干货)，受到了很多掘友好评，最近重新安装环境，我发现以前安装 Node 和 npm 的方法还有优化空间，原来老司机也有翻车的时候。 所以我决定重写一篇文章，本文的技巧一定会让你效率翻倍，老规矩本文不止告诉你怎么做，还告诉你为什么这么做。 Node.js 是现代 Web 开发中不可或缺的工具，随着项目需求的变化，可能需要使用不同版本的...
解锁前端难题：亲手实现一个图片标注工具
about 1 year ago
业务中涉及图片的制作和审核功能，审核人员需要在图片中进行标注，并说明存在的问题，标注过程中需要支持放大缩小，移动等交互，将业务剥离，这个需求，可以定义为实现一个图片标注功能。 实现这个功能并不容易，其涉及的前端知识点众多，本文带领大家从零到一，亲手实现一个，支持缩放，移动，编辑的图片标注功能，文字描述是抽象的，眼见为实，实现效果如下所示： 技术方案 这里涉及两个关键功能，一个是绘制，包括缩放和旋转，一个是编辑，包括选取和修改尺寸，涉及到的技术包括，缩放，移动，和自定义形状的绘制（本文仅实现矩形），绘制形状的选取，改变尺寸和旋转角度等。 从大的技术选型来说，有两种实现思路，一种是 canvas，一种是 dom+svg，下面简单介绍下两种思路和优缺点。 canvas 可以方便实现绘制功能，但编辑功能就比较困难，当然这可以使用库来实现，这里我们考虑自己亲手实现功能。 优点： 性能较好，尤其是在处理大型图片和复杂图形时。 支持更复杂的图形绘制和像素级操作。...
世界读书日：ChatGPT 时代你多久没读书了？
about 1 year ago
4.23世界读书日，今天我想和大家聊聊关于我和书籍的故事，以及我对读书的认识。在开始之前我想先问读者一个问题，你有多久没读书了？欢迎在评论区留言。 最近我观察到一个现象，就是身边的同事朋友，读书的变少了，特别是那些刚步入职场的新人，也不爱读书了。这与我刚开始工作时的情况形成了鲜明对比，那时候，几乎每个人都有几本正在读的书，我们之间经常会互相推荐书籍，讨论观点。我印象特别深刻的是，公司给的读书经费，每到电商平台搞活动，每个人都会买好几本书。 在我的大学时代，图书馆成了我最常去的地方。那里的前端开发书籍，我几乎一一阅读过。这种全面而深入的学习方法，为我的前端技术打下了坚实的基础。当然在大模型时代的今，这种学习方式可能被认为低效。然而，对我而言，这种能够全面掌握一门技术的方法，不仅没有浪费时间，反而是一种幸福。我能够在不浪费任何一个知识点的情况下阅读书籍，这让我感到非常满足和快乐。 能够很浪费时间的去读书是一件很幸福的事，这在工作后变的非常奢侈。 工作后，我保持了这种阅读习惯。我开始自己购买书籍，大约买了几百本。单在图灵出版社，???购买了80多本书。我特别喜欢图灵书籍扉页上的那句话：“站在巨人的肩膀上”。读书确实让我站在了巨人的肩膀上，使我在前端技术领域取得了飞速的进展，各种技术手法都变得信手拈来。 我的书籍之旅不止于此。随着时间的推移，我开始尝试写作，包括撰写博客、进行技术分享和编写开源库。最终，我还出版了自己的技术书籍《React状态管理与同构实战》《现代JavaScript库开发：技术、原理与实战》。这是年轻时的我从未敢想象的成就。书籍不仅丰富了我的知识，也实现了我的梦想，给我的生活带来了巨大的变化。关于写书的更多故事，我希望在未来有机会再与大家分享。 读书不香了？ 在个人层面，我发现尽管我依然热爱阅读，我的阅读频率却逐年下降。如今，不用为了买书而省吃俭用，想要的书，出版社基本都会送我。但实际上，我发现自己的阅读量减少主要是由于几个方面的原因：首先，工作的忙碌占据了我大部分时间，空闲时间变得更加宝贵。其次，随着年龄的增长，家庭责任也随之增加，不仅要照顾年幼的孩子，还要关心年长的父母。此外，随着年龄的增长，我的体力和精力也有所下降，我开始更多地感受到身体对休息的需求。 我感觉全世界都在找我要时间，工作要，家庭要，连我的身体也向我要休息的时间。 在大众层面，阅读传统纸质书的习惯同样受到多种因素的影响： 多样化的学习媒介：随着技术的发展，人们有更多选择来获取知识，如在线课程、教育视频等，这些都在一定程度上替代了传统的书籍阅读。 算法驱动的内容分发：社交媒体和视频平台的算法优化了用户的内容消费习惯，使得短视频等形式的内容更能吸引用户的注意力，占据了原本可能用于阅读的时间。...
异步难题：前端并发控制全解析
about 1 year ago
本文讲解Promise，callback，RxJS多种方式实现并发限制，通过示例循序渐进讲解，如何实现带数量限制的并发请求，这来源于笔者业务中的真实场景，同时也是一道前端面试题，作为面试题的话，一般是考察对Promise的理解。 问题 笔者的业务中，经常存在通过一堆ids，批量获取的场景，其中最复杂的一个场景是获取数千个手机号的数据，对于这种场景，发送请求并不容易。 这里先交代下背景，笔者的系统是运行在 http2 上的，由于 http2 支持并发处理，所以在笔者的系统里，后端接口设计是基于这个假设的，后端不会提供批量获取的接口，需要前端通过 id 来逐个获取。 当同时发送上千个请求时，浏览器会变的明显卡顿，虽然这样发送可以更快的获取数据，但会带来不好的用户体验，笔者的解决方案是，给并发添加最大数量限制。 这里我们将问题定义为，给你ids和并发限制max，一般作为面试题，会让你直接实现如下的函数：...
一文搞懂 JavaScript 模块化
about 1 year ago
如果你看过某个现代 JavaScript 库的代码，一定会困惑其复杂的模块适配，下图目前主流的 JavaScript 库模块适配方案。 本文梳理 JavaScript 模块化的历史和现状，不仅介绍不同模块系统是什么，而是深入介绍不同模块系统诞生的原因和解决的问题，阅读本文将为你解开很多 JavaScript 模块化的疑惑。 传统 JavaScript...
TypeScript：从抵触到真香，一个开发者的心路历程
about 1 year ago
在技术领域，新技术的出现总是伴随着争议。TypeScript（简称 TS）作为一门静态类型的 JavaScript 超集，自从推出以来，就引发了广泛的讨论。作为一名长期从事 JavaScript 开发的程序员，我最初对 TS 持怀疑态度。但经过几年的实践，我对 TS 有了更深入的理解和认识。在这篇博文中，我将分享我对 TS 的理解，我的个人经历，以及我是如何从一个...
掌握JavaScript：多种方法生成二维数组
about 1 year ago
本文已收录到《面试知识系列》 我经常在面试中问候：你能用 JavaScript 生成一个二维数组吗？这个问题看似简单，实际上却能揭示出面试者对 JavaScript 的熟练程度。就像茴字有多种写法一样，生成二维数组也有多种方法。今天，就让我们一起来探索这个问题背后的答案，揭开生成二维数组的多种秘密。 掌握不同的方法不仅能让我们在面对不同的场景时更加得心应手，还能在面试中展示我们对 JavaScript 的深入理解。毕竟，在编程世界里，灵活多变往往比死记硬背更为重要。 建议大家在阅读文章时，对于每个方法先不要看答案，而是先自己思考如何实现，这样会更有收获。 创建一维数组 在生成二维数组之前，我们先来学习如何创建一维数组。创建一维数组的方法有多种，以下是一些常见的方法：...
程序员的出路：技术变迁与时代背景的双重挑战
about 1 year ago
在这个充满不确定性的时代，焦虑似乎成了每个人心中不可避免的情绪，准备好，我要开始贩卖焦虑了 😂😂😂。 最近，裁员的消息真的太多了，下面是我最近看到的裁员消息： 2024 年 3 月份，字节内部公开信曝光，飞书裁员或 20%。 2024 年 1 月份，网传网易裁员...
《现代JavaScript库开发》一年回顾：收获与反思
about 1 year ago
从2013年至今，我陆续创作了多个库，关于如何开发JavaScript库，我也做了一些总结和分享，借这个机会，下面做个简要回顾。 2015年，我发布了zepto.fullpage，一款轻量级的全屏滚动插件。 2016年，我发布了前端模板template.js。 2018年是一个里程碑，我给公司搭建了Util.js，同时开源了jslib-base v1，并撰写了《如何写一个现代的JavaScript库》一文，开始将自己的经验分享给大家。 2019年，我一边搭建jsmini，一边开始着手撰写《现代JavaScript库开发：原理、技术与实战》。 2021年，我给公司搭建了jssdk，作为Util.js的升级版。 2023年1月，《现代JavaScript库开发：原理、技术与实战》正式出版。 2023年10月，jslib-base 发布了v2版本，带来重要升级。 时光飞逝，《现代JavaScript库开发：原理、技术与实战》已经出版一年了，本文主要内容包括，书籍影响回顾，读者问题答疑和我自己的一些总结和感悟。 书籍影响回顾...