本文已收录到《jsmini系列文章》在工作中，我们会沉淀了一些最佳实践，一般工作中的一个项目可能由多个开发者负责，在这样的背景下，很难做到每个开发者对最佳实践都了然于胸，在遇到人员更迭的时候，就更难受了。虽然可以通过代码审查发现问题，但是代码审查存在两个问题：一个是滞后问题，代码审查时已经开发完了；另一个是靠人来审查，难以 100%保证质量。如何保障团队代码风格，最佳实践的一致性，让代码看起来就是一个人写的，本身就是一个难题。如果能有一个智能助手，实时提示代码中的哪些部分可以使用工具库中的函数代替就好了。对于前端来说，这个助理就是 ESLint。那么如何让 ESLint 支持我们的最佳实践呢，这可以通过 ESLint 的自定义插件来实现。要开发 ESLint 插件需要一些知识储备和经验，本文我将通过一个实例来教大家如何写一个 ESLint 插件。本文通过一个真实案例来讲解，这个案例来源于我的实际工作，通过编写 ESLint 插件，并集成到项目，帮我解决了最佳实践的推广落地问题。背景知识下面先来介绍下背景知识，在我之前的文章《如何回答面试中的JavaScript获取变量类型问题》中，提到过使用 typeof 和 instanceof 来判断变量类型是存在很多坑的，不信你看下面的例子，如果你对这个问题感兴趣，欢迎阅读我上面的文章：typeof[];// 'object'typeof{} ...继续阅读 (22)

本文已收录到《jsmini系列文章》划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿在JavaScript的世界里，函数参数的处理不仅是代码复用性和模块化设计的核心，也是提高开发效率和可维护性的关键。随着JavaScript语言的发展，我们见证了从基本技术到复杂处理的演变。本文将探讨JavaScript中处理函数参数和默认值的历史，包括早期的技术、ECMAScript 2015引入的现代语法，以及如何高级处理复杂对象。在ECMAScript 2015之前的参数默认值在 ECMAScript 2015 之前，语言层面并不支持函数默认值，一般都是函数内部自己处理，比较常见的做法是使用或逻辑运算符functionleftpad(str,len,char){len=len||2;char=char||'0';}或运算符是一个短路运算符，当前面的值是真值时，返回前面的值；当前面的值是徦值时，返回后面的值，在参数默认值这个场景下，对于假值或运算符是有问题的。JavaScript 中的徦值包括：空字符串, 0, undefined, null，对于参数默认值来说，当值为undefined返回默认值是正确的行为，空字符串，0 和 null 都会被错误的返回默认值。undefined||1;// 1null||1;// 10||1;// 1''||1;// 1更好的做法 ...继续阅读 (50)

本文已收录到《jsmini系列文章》划重点，这是一道面试必考题，我就问过很多面试者这个问题，✧(≖ ◡ ≖✿)嘿嘿今天我们将探讨如何处理 JavaScript 中的一个常见问题：深层数据访问。JavaScript 中常用的引用数据结构是数组和对象，数组表示有序数据，对象表示无序数据，使用对象和数组可以组合出任何数据结构，如对象嵌套对象可以表示树形结构等。示例代码如下：consttree={left:{a:1},right:{b:2},};当嵌套层级很深时，读/写深层数据并不简单，这篇文章将一步步指导你构建一个名为anypath的库，介绍如何读/写深层数据中的数据。背景知识下面先来了解读取深层数据问题，上面的例子如果想读取tree.left中的a属性，一般会写如下的代码consttree={left:{a:1},right:{b:2},};console.log(tree.left.a);这么写逻辑上正确，但是容错性很差，为什么这样说呢，因为 JavaScript 是动态类型的，在编译阶段无法发现类型的问题，如果数据是完全可控的，比如上面的tree中的数据，但更多的情况下数据可能来源于接口数据，用户输入数据等，思考下如果tree上的left不存在会发生什么consttree={right:{b:2},};console.log(tree.left.a);// Uncaught Typ ...继续阅读 (50)

我之前写过一篇小白的 Mac 上手指南(干货)，受到了很多掘友好评，最近重新安装环境，我发现以前安装 Node 和 npm 的方法还有优化空间，原来老司机也有翻车的时候。所以我决定重写一篇文章，本文的技巧一定会让你效率翻倍，老规矩本文不止告诉你怎么做，还告诉你为什么这么做。Node.js 是现代 Web 开发中不可或缺的工具，随着项目需求的变化，可能需要使用不同版本的 Node.js。因此，优雅地管理和切换 Node.js 版本显得尤为重要。本文将介绍如何在 Mac 上使用 Homebrew 安装n工具来管理多个 Node.js 版本，并解决 npm 全局安装包时需要sudo权限的问题。开始之前先说明下，我的系统是 macOS 14.x，本文中介绍的工具安装方法，可能具有时效性，比如 brew 的安装可能会过时，如果遇到问题，可以去官网查看最新安装方法。优雅地安装nn是一个 Node.js 版本管理工具，允许你轻松地安装、管理和切换多个 Node.js 版本。它的使用简单直观，非常适合开发者。通过n，你可以在不同版本的 Node.js 之间快速切换，以满足不同项目的需求。为什么选择 Homebrew？Homebrew 是 macOS 上的一个包管理工具，它使得软件的安装和管理变得非常方便。通过 Homebrew 安装n，可以简化安装过程，并确保环境的整洁和一致性。使用 Homebr ...继续阅读 (62)

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

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

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

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

在技术领域，新技术的出现总是伴随着争议。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 引入了静态类型检查 ...继续阅读 (82)

本文已收录到《面试知识系列》我经常在面试中问候：你能用 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 ...继续阅读 (97)

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

从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. 销量：自书籍面世以来，它迅速登上了京东新书榜首，并在飙升榜上一马当先。在当 ...继续阅读 (79)

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

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

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

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

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

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"此时提交树如下图所示：当功能分支开发完成后，需要合并回主分支，合并回主分支有两种选择，快速合并和非快速合并，二者的区别在于是 ...继续阅读 (78)

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

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

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

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 ...继续阅读 (74)

在一些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 ...继续阅读 (79)

最近发现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 ...继续阅读 (76)

最近要把 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 ...继续阅读 (81)

本文已收录到《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指向同一份数据，此时如果对其中一个进 ...继续阅读 (68)

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

本文介绍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);} ...继续阅读 (69)

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

在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 ...继续阅读 (61)