前端杂货铺

webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。 莫慌，我们一点点拆分开看，其实总体的文件就是一个 IIFE——立即执行函数。 函数的入参 mo…

最初，Javascript 没有导入/导出模块的方法， 这是让人头疼的问题。 想象一下，只用一个文件编写应用程序——这简直是噩梦！ 然后，很多比我聪明得多的人试图给 Javascript 添加模块化。其中就有 CJS、AMD、UMD 和 ESM。你可能听说过其中的一些方法(还有…

1. 使用引号强制进行精确匹配搜索 2. And 运算符 3. 使用 OR 操作符获取搜索词中某一个的结果 4. - 操作符将排除包含搜索词的结果 5. 可以使用(*)通配符作为占位符，它将被任何单词或短语替换 6. 在一个单一的网站搜索 7. 查找特定的文件类型 8. 搜索一…

全称 JSON Web Token， 是目前最流行的跨域认证解决方案。基本的实现是服务端认证后，生成一个 JSON 对象，发回给用户。用户与服务端通信的时候，都要发回这个 JSON 对象。 用户向服务器发送用户名和密码。 服务器验证通过后，在当前对话（session）里面保存相…

前端面试中，估计大家都被这么问过。 答：Javascript 中的数据类型包括原始类型和引用类型。其中原始类型包括 null、undefined、boolean、string、symbol、bigInt、number。引用类型指的是 Object。 ... 因为 JavaScr…

CSS 变量又称为 CSS 自定义属性，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);） 为什么选择两根连词线（--）表示？…

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。 奇怪的事情来了，浏览器竟然识别不出来这是一个无效的值，计算值的结果还是 test（这里猜测因为 font-family 可以通过 @font-face …

大家好，我是 Gopal。最近工作些许繁忙，利用闲暇之余，记录一下我的 2020，展望 2021 今年是比较特殊的一年，春节大家都很默契，不再相互串门，不再出去游玩。随着武汉封城，恐惧笼罩了全国。大家都带起了口罩，人与人之间多了一些距离。 天佑我中华。如今，虽然疫情还没结束，但…

当我们的项目越来越大的时候，Git 冲突是团队协作中令人非常苦恼的事情，不仅仅浪费了我们时间，而且很容易解决冲突的时候出现问题。 我能想到的就是模块细分化，每个人都负责自己相关的模块，这样开发者之间的代码就不会相互影响，也就不会有代码的冲突。但多人协作项目中公共的代码模块必不可…

如今，在我们繁忙的日程和紧迫的截止日期中，选择能够提高工作效率的工具至关重要。 在这里，我整理了一些我最喜欢的 NPM 包的列表。 我也将它们分类，因此信息更加结构化，更易于浏览。 当然，你不必安装和学习所有这些工具。在大多数情况下，从每个类别中挑选一个就足够了。我想提供一些替…

随着项目不断发展壮大，组件数量开始变得越来越多，项目也开始变得庞大，webpack 编译的时间也会越来越久，我们现在的项目编译一次在 40s ——70s 之间，这是一个效率非常低下的操作。优化的手段有很多，之前项目原本已经做了很多，本文从缓存的角度进行优化讲解 babel-lo…

笔者最近在看 你不知道的JavaScript上卷，里面关于 this 的讲解个人觉得非常精彩。JavaScript 中的 this 算是一个核心的概念，有一些同学会对其有点模糊和小恐惧，究其原因，现在对 this 讨论的文章很多，让我们觉得 this 无规律可寻，就像一个幽灵一…

这期分享的是 Shopee 的面经，中间较为曲折。先走了一轮卖家平台的面试，HR 面面完之后说不合适。后面供应链部门 HR 又找到我，说可以再面一次供应链部门，所以就有了两次面经，每次都有技术一二面以及 HR 面 关于事件循环，我写了一篇 【前端进阶】深入浅出浏览器事件循环【内…

JavaScript 是单线程的，单线程是指 JavaScript 引擎中解析和执行 JavaScript 代码的线程只有一个（主线程），每次只能做一件事情。单线程存在是必然的，在浏览器中， 如果 javascript 是多线程的，那么当两个线程同时对 dom 进行一项操作，例…

笔者其实是三月份就面的 Bigo，当时工作经验算一年半多。之所以现在才发，其实是之前虽然总结了，但多半是自己总结归纳复盘用，有点粗糙，现在重新整理，希望对大家有所帮助 引用类型：对象（Object）。其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的…

对象是一个复杂的数据结构。最简单的 JavaScript 对象是普通对象 —— 键和相关值的集合 但是很多情况下不能创建一个对象。在这种情况下，JavaScript 提供了一个特殊的值 null —— 表示缺少对象 但是，函数中不传任何参数时，该函数返回 null。返回 nul…

2020 年 9 月 18 号，尤大大发布了 Vue 3.0，代号 One Piece。同时中英文版本的文档相继出来，笔者也去通读了一遍，发现很多宝藏，其中有个新特性非常吸引我——Teleport （中文译为：传入，读着有点奇怪，本文统一以英文 Teleport 来讲） 如果用…

之前写过一篇文章，关于 Vue 属性透传的，文章中我列举了很多种方法去实现属性透传。其中包括直接设置 props，v-bind="$attrs"，render function 等方式。感兴趣，详情看 【Vue进阶】——如何实现组件属性透传？ 这让我意识到了自己对一些 Vue …

这显然是吃力不讨好的，这个时候就派上 JSX 上场了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在 Vue 中写 JSX 吧 具名插槽：父组件的写法和单文件组件模板的类似，通过 slot="header"…

插槽（slot）通俗的理解就是“占坑”，在组件模板中占有位置，当使用该组件的时候，可以指定各个坑的内容。也就是我们常说的内容分发 在 Vue 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-sco…