业务中涉及图片的制作和审核功能，审核人员需要在图片中进行标注，并说明存在的问题，标注过程中需要支持放大缩小，移动等交互，将业务剥离，这个需求，可以定义为实现一个图片标注功能。实现这个功能并不容易，其涉及的前端知识点众多，本文带领大家从零到一，亲手实现一个，支持缩放，移动，编辑的图片标注功能，文字描述是抽象的，眼见为实，实现效果如下所示：技术方案这里涉及两个关键功能，一个是绘制，包括缩放和旋转，一个是编辑，包括选取和修改尺寸，涉及到的技术包括，缩放，移动，和自定义形状的绘制（本文仅实现矩形），绘制形状的选取，改变尺寸和旋转角度等。从大的技术选型来说，有两种实现思路，一种是 canvas，一种是 dom+svg，下面简单介绍下两种思路和优缺点。canvas 可以方便实现绘制功能，但编辑功能就比较困难，当然这可以使用库来实现，这里我们考虑自己亲手实现功能。优点：性能较好，尤其是在处理大型图片和复杂图形时。支持更复杂的图形绘制和像素级操作。一旦图形绘制在 Canvas 上，就不会受到 DOM 的影响，减少重绘和回流。缺点：交互相对复杂，需要手动管理图形的状态和事件。对辅助技术（如屏幕阅读器）支持较差。可能遇到的困难：实现复杂的交互逻辑（如选取、移动、修改尺寸等）可能比较繁琐。在缩放和平移时，需要手动管理坐标变换和图形重绘。dom+svg 也可以实现功能，缩放和旋转可以借助 css3 的 t ...继续阅读 (13)

4.23世界读书日，今天我想和大家聊聊关于我和书籍的故事，以及我对读书的认识。在开始之前我想先问读者一个问题，你有多久没读书了？欢迎在评论区留言。最近我观察到一个现象，就是身边的同事朋友，读书的变少了，特别是那些刚步入职场的新人，也不爱读书了。这与我刚开始工作时的情况形成了鲜明对比，那时候，几乎每个人都有几本正在读的书，我们之间经常会互相推荐书籍，讨论观点。我印象特别深刻的是，公司给的读书经费，每到电商平台搞活动，每个人都会买好几本书。在我的大学时代，图书馆成了我最常去的地方。那里的前端开发书籍，我几乎一一阅读过。这种全面而深入的学习方法，为我的前端技术打下了坚实的基础。当然在大模型时代的今，这种学习方式可能被认为低效。然而，对我而言，这种能够全面掌握一门技术的方法，不仅没有浪费时间，反而是一种幸福。我能够在不浪费任何一个知识点的情况下阅读书籍，这让我感到非常满足和快乐。能够很浪费时间的去读书是一件很幸福的事，这在工作后变的非常奢侈。工作后，我保持了这种阅读习惯。我开始自己购买书籍，大约买了几百本。单在图灵出版社，我购买了80多本书。我特别喜欢图灵书籍扉页上的那句话：“站在巨人的肩膀上”。读书确实让我站在了巨人的肩膀上，使我在前端技术领域取得了飞速的进展，各种技术手法都变得信手拈来。我的书籍之旅不止于此。随着时间的推移，我开始尝试写作，包括撰写博客、进行技术分享和编写开源库。最终， ...继续阅读 (11)

本文讲解Promise，callback，RxJS多种方式实现并发限制，通过示例循序渐进讲解，如何实现带数量限制的并发请求，这来源于笔者业务中的真实场景，同时也是一道前端面试题，作为面试题的话，一般是考察对Promise的理解。问题笔者的业务中，经常存在通过一堆ids，批量获取的场景，其中最复杂的一个场景是获取数千个手机号的数据，对于这种场景，发送请求并不容易。这里先交代下背景，笔者的系统是运行在 http2 上的，由于 http2 支持并发处理，所以在笔者的系统里，后端接口设计是基于这个假设的，后端不会提供批量获取的接口，需要前端通过 id 来逐个获取。当同时发送上千个请求时，浏览器会变的明显卡顿，虽然这样发送可以更快的获取数据，但会带来不好的用户体验，笔者的解决方案是，给并发添加最大数量限制。这里我们将问题定义为，给你ids和并发限制max，一般作为面试题，会让你直接实现如下的函数：functiongets(ids,max){}补充一点，如果是 http1.1，浏览器会有默认的并发限制，并不需要我们处理这个问题，比如Chrome 中并发数量是6个，所以这个问题的成立，建立在 http2 的基础上，如果是在面试中，不要忘了提这个知识点。Promise目前来说，Promise是最通用的方案，一般我们最先想到Promise.all，当然最好是使用新出的Promise.allsettl ...继续阅读 (14)

如果你看过某个现代 JavaScript 库的代码，一定会困惑其复杂的模块适配，下图目前主流的 JavaScript 库模块适配方案。本文梳理 JavaScript 模块化的历史和现状，不仅介绍不同模块系统是什么，而是深入介绍不同模块系统诞生的原因和解决的问题，阅读本文将为你解开很多 JavaScript 模块化的疑惑。传统 JavaScriptJavaScript 诞生之初，是一门在浏览器使用的脚本语言，并没有提供模块系统，站在当时的视角来看，确实也并不需要模块系统。在浏览器中，如果想引用一个脚本文件，只需要使用 script 标签引入即可，非常简单直观，如下所示即可可入 jQuery。script 的方式，并没有解决依赖的问题，依赖关系的解决，需要我们手动保证引入的顺序问题，2013 年我曾写过一个较为复杂的绘图程序Painter，手动维护依赖关系，如下图所示，曾经让我非常痛苦。JavaScript 缺少模块带来两个问题，一个是封装的问题，一个是依赖的管理问题，关于如何支持模块的问题，浏览器社区和 Node.js 社区分别给出了不同的探索和方案，下面介绍其中影响比较大的模块系统。Node.js 模块方案Node.js 是浏览器之外的另一个运行时，其创建之初，为了弥补 JavaScript 缺失模块的问题，其带来了commonjs 规范，在 Node.js 中模块是强制的，com ...继续阅读 (13)

在技术领域，新技术的出现总是伴随着争议。TypeScript（简称 TS）作为一门静态类型的 JavaScript 超集，自从推出以来，就引发了广泛的讨论。作为一名长期从事 JavaScript 开发的程序员，我最初对 TS 持怀疑态度。但经过几年的实践，我对 TS 有了更深入的理解和认识。在这篇博文中，我将分享我对 TS 的理解，我的个人经历，以及我是如何从一个 TS 的抵抗者变成拥护者的。TS 自 2012 年诞生以来，发展非常迅速，目前已经得到了社区的广泛认可。有图有真香，通过 npm 下载量可以证明这一点。在 TS 刚刚流行起来的时候，不少开发者，包括我在内，都对它持保留态度。我们担心 TS 的类型系统会限制 JS 的灵活性，增加开发的复杂度。而且，那时候社区中也有一些声音，认为 TS 可能只是一时的热潮，不会长久。然而，随着时间的推移，TS 逐渐展现出其强大的生态和优势，越来越多的项目和库开始采用 TS。但也有一些开源库作者选择抛弃 TS，他们认为 TS 增加了开发和维护的成本，对于一些小型或者简单的项目来说，可能没有必要引入 TS。TS 解决了什么问题以下是排名靠前的 10 大 JavaScript 错误，其中 9 个错误都是因为类型错误导致的。尽管存在一些负面声音，但 TS 的采用率仍在逐年增长，特别是在需要类型安全性和改善开发者体验的项目中。TS 引入了静态类型检查 ...继续阅读 (19)

本文已收录到《面试知识系列》我经常在面试中问候：你能用 JavaScript 生成一个二维数组吗？这个问题看似简单，实际上却能揭示出面试者对 JavaScript 的熟练程度。就像茴字有多种写法一样，生成二维数组也有多种方法。今天，就让我们一起来探索这个问题背后的答案，揭开生成二维数组的多种秘密。掌握不同的方法不仅能让我们在面对不同的场景时更加得心应手，还能在面试中展示我们对 JavaScript 的深入理解。毕竟，在编程世界里，灵活多变往往比死记硬背更为重要。建议大家在阅读文章时，对于每个方法先不要看答案，而是先自己思考如何实现，这样会更有收获。创建一维数组在生成二维数组之前，我们先来学习如何创建一维数组。创建一维数组的方法有多种，以下是一些常见的方法：1. 数组字面量这是创建数组的最简单方法，直接使用方括号[]来定义数组。letarr=[1,2,3];2. 使用 Array 构造函数上面的数组也可以使用 Array 构造函数来创建。letarr=newArray(1,2,3);但当使用 Array 构造函数时，需要注意，如果只传入一个参数，则表示数组的长度。如果想要创建包含单个元素的数组，除了使用上面的方法外，还可以使用 Array.of() 方法。当有多个参数时，Array.of 和 Array 构造函数的效果是一样的。letarr=Array.of(2);console.l ...继续阅读 (33)

在这个充满不确定性的时代，焦虑似乎成了每个人心中不可避免的情绪，准备好，我要开始贩卖焦虑了 😂😂😂。最近，裁员的消息真的太多了，下面是我最近看到的裁员消息：2024 年 3 月份，字节内部公开信曝光，飞书裁员或 20%。2024 年 1 月份，网传网易裁员 1600 人，相当于总员工的六分之一。我认识的一个百度朋友和我说他们部门裁员了，裁的全是高 T；一个图森未来的朋友也跟我说，他们部门裁员了。前段时间开到一个好玩的编程方式，叫做防御式编程，这里可不是说写健壮的代码，相反而是写屎山代码，从而增加自己的不可替代性。更有意思的是，在裁员的大背景下，防御式编程已经不好使了，因为产品不能盈利，代码也就没有价值了。作为一名程序员，我感受到了前所未有的压力。我们常说，技术是金钱的保障，但在这个动荡的时代，似乎连技术也难以为我们带来安全感。每一个被裁的消息都像一记重锤，敲打着我们脆弱的心灵。然而，我不想只是停留在传播焦虑之中。是时候面对现实，思考我们该如何在这个充满挑战的时代中找到自己的立足点。我们需要的不仅仅是技术的积累，更需要一份对未来的规划和对现实的勇敢面对。让我们一起探讨，作为程序员，我们该如何在这个充满变数的世界中寻找稳定，构建自己的职业生涯，不仅仅为了生存，更为了在波动中找到自己的价值和意义。程序员的悲哀我们先来分析下为什么程序员会陷入这种困境，我总结了如下几点：首先，技术变迁的速度 ...继续阅读 (19)

从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库开发：原理、技术与实战》已经出版一年了，本文主要内容包括，书籍影响回顾，读者问题答疑和我自己的一些总结和感悟。书籍影响回顾初稿完成后，我就发给很多朋友试读，也收获了很多前端专家的推荐语，这些都记录在书籍开头了，这里不再展开，再次感谢为本书出版带来帮助的所有朋友。自本书出版以来，就受到广大读者们的欢迎，下面我从三个方面梳理记录下：1. 销量：自书籍面世以来，它迅速登上了京东新书榜首，并在飙升榜上一马当先。在当 ...继续阅读 (20)

2023年1月，我和侯策老师共同打磨的书籍《现代JavaScript库开发：原理、技术与实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了克军老师，感谢克军老师在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容。克军老师推荐序我们普遍觉得，在团队里负责开发和维护基础库的工程师都是“高手”。毕竟，能位于团队上游的人总会有种莫名的“优越感”。编写一个JavaScript库很难吗？不就是先把一段通用的代码抽离出来，再按照某种范式封装一下嘛！其实，要想真正回答这个问题，你可能需要先想想以下问题：为什么有些人写的库大受欢迎，而有些人写的库却没人使用？你为什么愿意使用某个库，你到底看重它什么？流行的库有什么共同点？所谓写“好”一个库，到底要符合什么条件？你有过“踩坑”经历吗，当时是什么心情？别人为什么愿意为你的项目贡献代码？怎么让自己写的库日后不成为“债”？如果你只是在自己的项目中抽离一些可复用的代码并将其封装成一个库，这个库可能只适用于比较单一的应用场景。但如果你希望更多的人也能用到这个库，那就要好好设计一番了。你要考虑稳定性、可维护性、安全性，编写一些攻击性测试用例，还要注重代码的可读性、易理解性。如果想扩大影响力，希望更多人参与项目维护，你必须重视库的架构设计、接囗设计、文档撰写、注释情况、代码风格等。不仅如此，你所用的工具也必须是当前最主流、最酷的。你要为库的使用者提供 ...继续阅读 (15)

2023年1月，我和侯策老师共同打磨的书籍《现代JavaScript库开发：原理、技术与实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了狼叔，感谢狼叔在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容。狼叔推荐序我和海镜、侯策认识很久了，他们之前写的那本《React状态管理与同构实战》是新手入门React的好书，我非常喜欢。海镜不仅是大厂工程师、技术博主，还是开源爱好者。他开源了很多JavaScript库，如zepto.fullpage、template.js等。他搞的jsmini可圈可点，尤其难能可贵的是，他还编写了jslib-base——一个可以帮助开发者编写JavaScript库的工具库，这个库的特性涵盖了库开发的各个方面，非常实用。我对海镜很熟悉，对他做的事也比较熟悉，所以当我得知他正在写这本书的时候，我是非常开心且放心的。开心是因为，目前前端领域和Node.js领域都缺少这样的专精内容，我在《狼书》里是写过如何开发JavaScript库的，但限于篇幅未能深入介绍，这本书弥补了我的遗憾。放心是因为，他一直是一线的、热爱开源的前端专家，无论是能力、眼界、判断力还是协作能力，都非常不错，鉴于他之前所写的那本《React状态管理与同构实战》的情况，我相信他能够将JavaScript库开发技术讲清楚。事实上，本书的初稿也确实和我想的一样，章节分布清楚，内容详略得当 ...继续阅读 (14)

2023年1月，我和侯策老师共同打磨的书籍《现代JavaScript库开发：原理、技术与实战》终于正式出版了！在书籍定稿之际，有太多话想和大家说一下，思绪万千，不知从何说起。最终决定写一篇自序，记录一下这本书的由来，以及我在写作过程中的一些感悟。十年磨一剑十年，弹指一挥间。回首过去十年，我一直致力于开源库的开发和维护，一路走来，我也从这个领域的“小白”慢慢成长为“专家”。这十年，支撑我坚持在库开发领域耕耘的原因是热爱分享，我特别希望能把自己做的东西分享给别人，分享的内容既可以是课程、博客文章，也可以是代码。在我看来，一份分享出去的代码片段，就是一个开源库。十年来，前端技术推陈出新，新的开源库如雨后春笋般涌现，相信大部分读者都曾从这些开源库中受益。平日里，我们更多关注的是库的使用，很少关注库开发技术。其实，JavaScript库开发技术在这十年中也经历了快速发展，其中基于新的技术标准开发而成的库，我将其称为“现代JavaScript库”。由于前端技术发展迅速，如今开发一个现代JavaScript库并不容易，其中涉及非常多的知识、工具和经验。比如，库如何兼容日益复杂的前端环境，库如何使用打包工具，库的单元测试如何做，等等。正因为这种复杂性，目前npm上的开源库并不都是现代JavaScript库，很多开源库还在使用十几年前的相对比较原始的技术。除了依赖开发技术，将一个库开源还需要很多准备 ...继续阅读 (18)

本文已收录到《面试知识系列》在 JavaScript 中如何判断两个值相等，这个问题看起来非常简单，但并非如此，在 JavaScript 中存在 4 种不同的相等逻辑，如果你不知道他们的区别，或者认为判断相等非常简单，那么本文非常适合你阅读。ECMAScript 是 JavaScript 的语言规范，在ECMAScript 规范中存在四种相等算法，如下图所示：上图中四种算法对应的中文名字如下，大部分前端应该熟悉严格相等和非严格相等，但对于同值零和同值却不熟悉，下面我们分别介绍这四种算法。同值同值零非严格相等严格相等非严格相等非严格相等使用两个等号，也就是我们熟悉的双等，非严格相等表示语义相等，不要求类型一样，非严格相等在比较前会先将比较参数类型转换为一致，再进行比较，代码示例如下：1==1;// true1=='1';// true 类型不同，不影响比较结果非严格相等有非常复杂的转换规则，非常难以记忆，社区中有人将上面的规则总结成了图片，一图胜千言，如下图所示：为了方便记住非严格相等的的转换逻辑，作者将非对象值，可以总结为如下三条规则：Undefined 只和 Null 相等和 Number 比较时，另一个值会自动转换为 Number和 Boolean 比较时，另一个值会转换为 Number如果值为对象，会使用内部的 ToPrimitive 转换，可以通过自定义 Symbol.to ...继续阅读 (15)

本文已收录到《面试知识系列》划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿JavaScript 是一个动态类型语言，在运行时获取变量类型是常用操作，由于 JavaScript 设计的问题，看似简单的问题，在 JavaScript 中可能并不简单，比如在社区中流传的下图，仔细看一下这些坑，即便是 JavaScript 老司机也经常翻车。上图中typeof NaN会返回number，这可能和你想的不一样，在 JavaScript 准确的获取变量类型，并不简单，正因为如此，这个问题经常被用来考察面试者，由于程序=数据+算法，而基本数据是数据的基础，所以面试中考察类型也是合理的。如果面试中你只回答使用 typeof 获取类型，那大概率是会减分的，那么该如何回答这道题呢？本文将全面系统的介绍如何在 JavaScript 中判断类型，阅读本文，可以帮你，在工作中，避开类型判断雷区，如果在面试中你回答本文的内容，那么面试官将惊呼，这是高手，比我知道的都多，然后自然是好评喽。下面先从最简单的例子开始，并一步一步提升难度，扩展思路，先来看第一个例子：在工作中，对于数据为空的情况，经常要做防御式编程，误区之一是使用非运算符直接判断。但这样做是可能有坑的，比如这会把很多徦值计算在内，常见的徦值有0,'',false,null,undefined等。例如如下的 double ...继续阅读 (14)

Git的杀手锏是带来了轻量级分支，如果你使用svn分支，就会被Git新建分支和切换分支时的速度所震惊。操作分支在Git中非常高频，学好分支操作是学好Git的基础，但在实际工作中，我发现很多同学并不熟悉Git的分支操作，本文试图通过图解的方式，讲解常用分支操作命令，和命令背后的Git分支模型。主分支在Git中新建一个项目后，默认有一个分支，即主分支。主分支一般表示项目的稳定版本，主分支应该包含稳定没有 Bug 的代码，并保持随时可以发布的状态，对于小型项目来说，只有一个主分支就够用了，每次我们提交都会创建一个commit节点。$git commit-m"c1"$git commit-m"c2"$git commit-m"c3"上面的命令会创建三个commit节点，此时master分支如下图所示：主分支上应该只包合并提交，所有的迭代应该都在分支上进行，如果是简单的改动，直接在主分支修改也是可以的，如果功能较复杂，且需要多次提交，不建议在主分支直接修改。功能分支当有新的功能要开发时，应该新建一个功能分支，命令如下：$git checkout-bfeature/a接下来在分支上创建两个提交，命令如下：$git commit-m"c4"$git commit-m"c5"此时提交树如下图所示：当功能分支开发完成后，需要合并回主分支，合并回主分支有两种选择，快速合并和非快速合并，二者的区别在于是 ...继续阅读 (16)

最近文章写得少了，都是因为在填耦合架构的坑，人生苦短，填坑不完，o(╥﹏╥)o，对如何治理耦合架构感兴趣，可以看我之前的文章——比耦合架构更好的架构好不容易从耦合坑里爬出来，又踩到了多子类型的坑，大坑套小坑，放眼望去，我太难了o(╥﹏╥)o本文结合真实项目经验，介绍多子类型的架构演进，将会介绍四种架构的优缺点和适应场景，分别是耦合架构，正交架构，低代码架构，低组件架构故事是这样的，某一天小颜同学接🤚了一个业务M，小颜同学后来才知道，这个业务在团队内部被称为“屎山”，也就是传说中的多年迭代，多人接手，多种组合，缺少文档的烫手山芋，简称三多一少M系统是典型的多子类型，M系统管理M资源，M资源有100多个子类型，每个子类型都有自己的逻辑，大家有类似业务同学可以感同身受一下M系统的现状是100+子类型，2万行代码，但这2万行代码是写在一起的，这个文件内部有2000个分支，OMG，每次打开这文件，编辑器都要卡一会，就给某个子类型加一个逻辑，看了一天还不知道该往哪加，下图是小颜同学下班时的心情就这样熬了一周，小颜同学深感写代码就像在扫雷，每天都在想，应该改哪里，改了会不会触雷，我的天啊，代码成功了比代码出错了不知道为什么，更可怕的是代码成功了，也不知道为什么；那么问题来了，如果是你面对这种情况该怎么办呢？相似又不同的类型快速增长的业务我的代码该如何写？耦合架构像这种把子类型的逻辑都写在一起的模 ...继续阅读 (17)

最近文章写得少了，都是因为在填耦合架构的坑，人生苦短，填坑不完，o(╥﹏╥)o在不断踩坑和填坑的过程中，我不禁感叹，怎么能写出这么糟糕的架构，其实比耦合架构更好怕的是，设计耦合架构，以及维护耦合架构的人意识不到问题的存在，坑是填不完的，要解决挖坑的人，所以我决定把这些经验分享出来，希望可以帮助大家本文的标题稍微有些标题党，本文提到的架构是代码层面的架构，本文通过一个例子，向大家介绍耦合架构，拷贝架构，超类架构和组合架构的区别和优劣背景本文用上传组件作为例子，一般业务中的上传组件都有自己的逻辑，现在假设我们有如下多个不同的上传组件：文件上传组件，通用的上传组件图片上传组件，有自己的展示逻辑和图片处理等音频上传组件，有自己的展示逻辑和音频处理等路径上传组件，有自己的展示逻辑且参数也不同现在让我们想一下，实现这些逻辑，代码该如何设计，在往下看之前，建议先看一下我的另一篇文章——图解7种耦合关系，下面会用到这里面提到的知识耦合架构耦合架构就是把代码都写在一起，这样就实现了公共逻辑只存在一份；然后内部存在很多条件判断，来实现不同的分支逻辑相信大家都能看出来耦合架构的问题，心里也都有自己的答案，但耦合架构是怎么形成的呢？耦合架构大部分都是业务演进的结果，开始时业务只有一种，当来了新的业务时，可能开人员偷懒了，也可能是缺乏重构的勇气，就慢慢积累了下来，然后尾大不掉，渐渐失去了所有人的控制耦合架构 ...继续阅读 (17)

本文已收录到《面试知识系列》划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿又到了金三银四的季节，相信最近有很多同学会出来看看机会，JS中的原型是面试中的必考题，很多面试官都喜欢考察原型相关的知识，没错，我就是其中之一猿辅导，急聘！！！1年以上经验的前端，后端，客户端，点击查看原型作为JS中的核心知识点，可以考察的知识点和细节非常多，当然面试不是为了难住大家，而是希望了解大家的知识边界在哪里，原型知识可以反应大家对JS的了解程度，对技术的兴趣，是否喜欢钻研等原型的考察，绕不过原型链，面试中如果能把原型链画清楚，一定会加分不少，但我发现大部分面试者在面试中很难画好原型链，于是我不禁陷入深深的思考站在面试官的角度，我希望面试者能清晰、快速、无误的画出原型链，本文是我思考良久后，总结的快速绘制原型链的方法题目一面试中，我经常会考察如何实现原型继承，再下一步才是考察原型链，一般我会写出下面的代码，然后让大家绘制原型链classA{}classBextendsA{}constb=newB();面对这个题，我们先来绘制b和B的原型链，这里面涉及到三个对象分别是b,B和B.prototype，相信大部分同学能够画清楚这几个的关系，由于是面试中只有笔和纸，又要清晰快速，所以我们可以像下面这样画，箭头代表关系，箭头上面的字代表属性名字上面包括__proto__，cons ...继续阅读 (15)

rebase是git中一个神奇的命令，可以让并行的提交，变得像线性开发的一样，最近发现rebase在遇到merge commit时可能和认知不太一样，本文通过一个例子来讲解下git rebase遇到merge commit时该如何应对经典rebase先来看下rebase的典型使用场景，假设我们有如下一个提交记录当dev想同步上游(master)的修改时，有两种方案，一种是merge，一种是rebasemerge会创建一个commit节点，并且能够保留分支关系$git merge master但是一般上游到下游的操作，是不需要保留分支关系的，rebase正是为了这个场景设计的，rebase会将dev上的节点，重新在master上重新创建一遍，看起来就是是在master分支最后开发的一样$git rebase master至此就介绍完了rebase常规的使用场景merge rebase如果被rebase的分支上有merge commit，会发生什么呢？假设我们有如下的log tree（请原谅我懒得画图了^_^）*31ef4ec(HEAD -> master)e |*b554f2d(dev)Merge branch'test'into dev | |\| |*853aaf6(test)c |*| 1af86fa d | |/ |*c1b49a5 b |/*763a350 amaste ...继续阅读 (16)

在一些git脚本中，或者git hook中，经常会见到一些不认识的git命令，比如rev-parse, hash-object, cat-file等，这些命令是干什么的？别急，我们需要先了解一下Git中的内部文件类型，git中最基本的单元是文件，多个文件组成文件树，文件树会被提交对象引用，提交对象会被分支引用，如图所示需要注意一点的是，Git中所有这些文件都被拉平，通过一个魔法key来区分不同的文件，Key是通过文件内容自动计算出来的，文件内容不同Key就会不一样，引用关系被存在了文件内容里关于git中内部对象的详细介绍，可以看我的另一篇文章起底Git-Git内部原理Git给每类文件都提供了相关的底层命令，用来直接操作git中的文件，一般要写一些git工具，就绕不开这些命令，本文我们来介绍下Git中比较常用的底层命令Blob操作我们本地的文件，存入Git中就变成了Blob文件，hash-object命令可以直接向git中写入一个文件，同时会输入文件的魔法key$echo'test content'| git hash-object--stdin# d670460b4b4aece5915caf5c68d12f560a9fe3e4$echo'test content'>a$git hash-object a# 和效果上面一样# d670460b4b4aece5915caf5c68d12 ...继续阅读 (13)

最近发现git在修改完文件后，提示恢复修改的命令是restore，如下所示，印象中应该是checkout，所以就研究了下，总结一下分享给大家$git status Changes to be committed:(use"git restore --staged..."to unstage)modified: _posts/git/2020-8-24-how-to-transfer-a-git-repo.md原来是git中的checkout命令承载了分支操作和文件恢复的部分功能，有点复杂，并且难以使用和学习，所以社区解决将这两部分功能拆分开，在git 2.23.0中引入了两个新的命令switch和restore用来取代checkout下面分别来说说分支操作和文件恢复，如果你对git还不太熟悉，可以先阅读我的git入门文章起底Git我的git笔记图解4种git合并分支方法分支操作原来git有两个命令用来操作分支，分别是branch和checkout其中branch用来管理分支$git branch## 查看当前所在分支$git branch aaa# 新建分支aaa$git branch-daaa# 删除分支aaacheckout用来切换分支，切换分支时，也可以新建分支由于git中分支仅仅是一个commit id的别名，所以checkout也可以切换到一个commit id$g ...继续阅读 (21)

最近要把 Git 仓库迁移，看有些同学迁移中不太顺利，自己研究总结了下，分享给大家，本文将向大家介绍迁移 Git 仓库的的方法如果你对git还不太熟悉，可以先阅读我的git入门文章起底Git我的git笔记图解4种git合并分支方法直接PUSH有同学说，这不是很简答么，像下面这样不就好了？$git remote add remote2 xxx$git push--allremote2上面做法的问题在于只能把本地存在的分支推送到remote2，一般公共仓库的话，我们本地都不会有全部远端分支的引用那怎么办？别急，这事其实还不太简单，下面先来研究下push命令，平时推送分支，我们都是直接 push$git push其实 git 在 push 时会自动填充填充缺省参数，比如上面的命令完整命令应该是下面这样$git push origin branch# 自动填充源 origin 以及当前分支 branchgit在push时除了自动填充参数，还会自动展开分支，上面的命令展开后如下$git push origin refs/heads/branch:refs/heads/branch查看下.git下的refs目录，就会发现git会把远端的分支存放在remotes目录.git/refs/remotes/origin/xxx那我们可以用下面的命令进行仓库迁移$git push remote2 ref ...继续阅读 (18)

本文已收录到《jsmini系列文章》划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿首先这是一道非常棒的面试题，可以考察面试者的很多方面，比如基本功，代码能力，逻辑能力，而且进可攻，退可守，针对不同级别的人可以考察不同难度，比如漂亮妹子就出1☆题，(*^__^*) 嘻嘻……一般在面试者回答出问题后，我总能够潇洒的再抛出一些问题，看着面试者露出惊异的眼神，默默一转身，深藏功与名本文我将给大家破解深拷贝的谜题，由浅入深，环环相扣，总共涉及4种深拷贝方式，每种方式都有自己的特点和个性深拷贝 VS 浅拷贝再开始之前需要先给同学科普下什么是深拷贝，和深拷贝有关系的另个一术语是浅拷贝又是什么意思呢？如果对这部分部分内容了解的同学可以跳过其实深拷贝和浅拷贝都是针对的引用类型，JS中的变量类型分为值类型（基本类型）和引用类型；对值类型进行复制操作会对值进行一份拷贝，而对引用类型赋值，则会进行地址的拷贝，最终两个变量指向同一份数据// 基本类型vara=1;varb=a;a=2;console.log(a,b);// 2, 1 ，a b指向不同的数据// 引用类型指向同一份数据vara={c:1};varb=a;a.c=2;console.log(a.c,b.c);// 2, 2 全是2，a b指向同一份数据对于引用类型，会导致a b指向同一份数据，此时如果对其中一个进 ...继续阅读 (14)

最近在开源中国搞了个问答活动，收到了不少网友关于React的提问，本文挑选出一些比较典型的问题总结一下，对问答感兴趣的同学可以移步这里问答问：React如何快速的入手，有什么学习方法推荐的吗？答：快速上手的话，建议阅读一些入门教程，比如阮一峰老师的博客，接下来要实践一下，比如简单实现一个小程序，接下来就是在学习和实践中循环了另外React的官网是非常不错的资料，主要作用可用来查阅资料，如果入门了以后，想要对React有深入的了解，可以关注下我的新书《React状态管理与同构实战》问：问一下React和Vue的区别？React和Vue等框架未来的发展趋势？从开发效率和学习成本来看，未来会不会出现比现有前端工程化更简洁的前端框架或开发模式呢？答：关于React和Vue的区别网上有大把大把的资料，这里就不展开回答了，简单来说Vue是MVVM框架，React是一个View层的抽象解决方案我认为未来React和Vue会长期并存，都会有很多的工作机会，其实在React和Vue之前，框架也是多个并存的情况，另外个人建议不要太局限于框架，在我看来一个功能用Vue和用React来实现，并没有太大的开发效率上的区别从开发效率和学习成本来看，未来可能会出现更高效的情况，但从原理上来说，要颠覆现在框架的原理，可能需要很长时间的发展框架都是用来解决具体问题的，未来不会再出现一个新的react了，颠覆reac ...继续阅读 (14)

本文介绍React中一些问题的最佳解决办法，和一些常见的错误用法组件React的组件有好几种，对于一个组件该如何归类，应该遵守如下的顺序：Functional ComponentPureComponentComponent如果一个组件没有自身状态，应该使用Functional Component；如果组件是纯组件（属性都是简单值），那么应该使用PureComponent；否则应该使用Component；Functional ComponentfunctionHello(props){return{props.name}}Hello.propTypes={name:React.PropTypes.string};Hello.defaultProps={name:'yan'};PureComponentclassDemo1extendsComponent{shouldComponentUpdate(nextProps,nextState){const{props,state}=this;functionshallowCompare(a,b){returna===b||Object.keys(a).every(k=>a[k]===b[k]);}returnshallowCompare(nextProps,props)&&shallowCompare;(nextState,state);} ...继续阅读 (15)

本文已收录到《jsmini系列文章》我写过一些开源项目，在开源方面有一些经验，最近看到了阮老师的微博（好吧确实是几年前看到的了），深有感触，现在一个开源项目涉及的东西确实挺多的，特别是对于新手来说非常不友好最近我写了一个jslib-base，旨在从多方面快速帮大家搭建一个标准的js库，本文将以jslib-base为例，介绍写一个开源库的知识jslib-base 最好用的js第三方库脚手架，赋能js第三方库开源，让开发一个js库更简单，更专业文档所谓代码未动，文档先行，文档对于一个项目非常重要，一个项目的文档包括README.mdTODO.mdCHANGELOG.mdLICENSEdocREADME.mdREADME是一个项目的门面，应该简单明了的呈现用户最关心的问题，一个开源库的用户包括使用者和贡献者，所以一个文档应该包括项目简介，使用者指南，贡献者指南三部分项目简介用该简单介绍项目功能，使用场景，兼容性的相关知识，这里重点介绍下徽章，相信大家都见过别人项目中的徽章，如下所示徽章通过更直观的方式，将更多的信息呈现出来，还能够提高颜值，有一个网站专门制作各种徽章，可以看这里这里有一个README的完整的例子TODO.mdTODO应该记录项目的未来计划，这对于贡献者和使用者都有很重要的意义，下面是TODO的例子- [X] 已完成 - [ ] 未完成CHANGELOG.mdCHANGEL ...继续阅读 (17)

在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式通过归纳范，可以将任意组件间的通信归类为四种类型的组件间通信，分别是父子组件，爷孙组件，兄弟组件和任意组件， 需要注意的是前三个也可以算作任意组件的范畴，所以最后一个是万能方法父子组件父子组件间的通信分为父组件向子组件通信和子组件向父组件通信两种情况，下面先来介绍父组件向子组件通信， 传统做法分为两种情况，分别是初始化时的参数传递和实例阶段的方法调用，例子如下classChild{constructor(name){// 获取dom引用this.$div=document.querySelector('#wp');// 初始化时传入namethis.updateName(name);}updateName(name){// 对外提供更新的apithis.name=name;// 更新domthis.$div.innerHTML=name;}}classParent{constructor(){// 初始化阶段this.child=newChild('yan');setTimeout(()=>{// 实例化阶段this.child.updateName('hou');},2000);}}在React中将两个情况统一处理，全部通过属性来完成，之所以能够这样是因为React ...继续阅读 (15)

从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！下面是本书的详细信息，有兴趣的同学可以了解一下购买方式为大家准备了限量签名版，可指定寄语，附赠小惊喜，目前可通过两种方式购买第一种，扫面下方二维码，通过微店购买第二种，也可以扫面下方二维码，添加我的微信购买不想要签名版的同学可以通过京东或当当购买京东：https://item.jd.com/12403508.html当当：http://product.dangdang.com/25308679.html下面是本书的豆瓣主页，欢迎大家讨论或反馈问题豆瓣：https://book.douban.com/subject/30290509/本书特色一部颠覆前端历史的框架React的横空出世颠覆了以往的前端开发方式，本书深入浅出React与Redux相关原理，重点讲解前沿同构技术，揭秘SSR实战要领！两位知名技术博主的沉淀本书的两位作者都是前端圈内非常活跃的技术博主，拥有丰富的实战经验，经历近十年的沉淀，将鲜活的经验通过本书分享给各位读者！众多圈内技术大咖的力荐百度公司副总裁沈抖、百度公司资深前端工程师董睿、前端圈知名技术专家阮一峰、狼叔、迷渡（justjavac）、小爝、顾轶灵联合力荐！内容简介React自开源以来，便以革命性的设计理念迅速颠覆了前端开发的传统意义，其倡导的 ...继续阅读 (13)

从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！在书籍定稿之际，思前想后，我写了下面这篇自序人生需要勇气人类的每次一进步，技术的每一次发展，都源自对未知世界的探索，探索让我们发现更大的世界，有人说探索需要好奇心，有人说探索需要想象力，而我觉得最重要的是勇气，面对未知，勇敢的人才能迈出一步在前端的世界里，从来不缺乏有勇气的人，这些勇士们引领着前端的不断变革，技术更新了一代又一代，从以jQuery为代表的的操作DOM时代，到以Backbone为代表的的MVC框架，再到以AngularJS为代表的MVVM框架，再到以React为代表的的新一代技术，前端得到了空前的繁荣，颇有百家争鸣，百花齐放的局面，而这一切都源自勇气如果你对上面提到的名词不了解也没关系，如果你对当前爆炸的技术感觉迷茫也不要担心，我也曾经害怕恐惧，对新技术畏手畏脚，其实人的天性就是喜欢熟悉的环境，幸运的是我突破了自己，曾经陌生的名词，如今都被我驾驭的很好，是勇气给了我力量关于我和React的故事，要感谢本书的另一位作者——候策，也是我最志同道合的同事和朋友，他还是一位非常优秀的勇士，他最先研究React，并给我介绍了很多React的知识，也进行了很多探讨，最开始仅仅是做一些比较小的内部系统，现在React已经变成我主要的技术栈了，极大提供了我的工作效率， ...继续阅读 (16)

从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了justjavac，感谢justjavac在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容董睿推荐序对于前端这样一个重界面开发的领域来说，组件化几乎是真理了。但是不同的场景、不同的人对组件化的理解可能很不相同。我见过许多不同的组件形态，有 ExtJS 这种高度封装的富组件、JQuery UI 这种与页面 DOM 强相关的组件、有 Bootstrap 这种重样式轻行为的组件、以及各种不知名的公司内团队内自己的组件实现等等。而从来没有一个组件框架能够像 React 一样那么多的被谈论，它很大程度上改变了前端的开发方式。毫无疑问 React 是成功的，为什么呢？也许是因为它的组件模型足够简单易于理解；也许因为它允许开发者把视图写在 JSX 中；也许因为它为很多前端工程师带来了新的理念（虽然有些不是它创造的），JSX、V-DOM、Flux、immutable、HOC、Fiber…；也许因为它对同构的支持；也许因为 React Native；也许，都有。无论如何，这些理由都不重要了。我看到在我的周围，无论是不是使用 React 的同学，都在谈论和学习它，在框架选型的时候它都是无法回避的选项之一。在我们平时做项目中，框架的选型仅仅是 ...继续阅读 (18)

从去年起，我和知名技术专家侯策开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了justjavac，感谢justjavac在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容迷渡（justjavac）推荐序1995年，Brendan Eich花了10天时间开发出一门脚本语言，取名为Mocha，并将其集成到了Netscape浏览器中，不久后这门语言被改名为LiveScript，意思是可以让网页充满动力。同年年底，网景公司和SUN公司达成协议并获得了Java商标的使用权，于是正式将这门语言更名为JavaScript。历史选择了JavaScript，使其成为了目前浏览器唯一内置支持的语言。时至今日，JavaScript已经不仅仅局限于为网页开发实现特效了，而是真正发展成了一门全功能的编程语言。我从2005年开始接触网页开发，经历了Web开发的“上古时代”。在Web 1.0时期，我们开发出来的网页是给人“看”的，此时流行jQuery这种用来处理浏览器兼容性的库，以及像Dojo、YUI、Extjs这种用来做UI的库。随着计算机和浏览器性能的提升，JavaScript的功能开始不再局限于实现简单的网页开发，特别是Ajax的使用更是显著地提升了用户体验，这个时期被称为Web 2.0。站在开发者和使用者的角度，Web ...继续阅读 (18)