前端知识库

Spring Boot+Vue前后端分离项目部署笔记 前言： 因为毕设项目老师要求上线，所以这是我第一次将本地项目部署到云服务器上，在部署的时候出现过许多问题，最后也是成功将毕设项目部署上线，在此进行

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

debugger 的实现原理。ide 和 chrome devtools 如何实现调试功能的。本文带你深入探索 debugger 的原理。

插播一下，本文案例已整理成插件，已上传 npm ，可通过 npm install js-image-compressor -D 安装使用，可以从 github 下载。

前言 Yarn 团队在春节前公布了 Yarn 2.0 的规划。其中提到了一个之前没听说过的名词 “PnP”。发现 Yarn 的这个功能早在 18 年 9 月份就被提出并实现了。于是花了一些时间了解了一下它的工作原理以及解决的问题并整理除了本篇文章。 现状与痛点 Yarn 团队开发 PnP 特性最直接的原因就是现有的依赖管理方式效率太低。引用依赖时慢，安装依赖时也慢。 先说说 Node 在处理依赖引用时的逻辑，这个流程会有如下两种情况： 如果我们传给 require() 调用的参数是一个核心模块（例如 “fs”、”path”等）或者是一个本地相对路径（例如 ./module-a.js 或 /my-li/module-b.js），那么 Node 会直接使用对应的文件。 如果不是前面描述的情况，那么 Node 会开始寻找一个名为 node_modules 的目录： 首先 Node 会在当前目录寻找 node_modules，如果没有则到父目录查找，以此类推直到系统根目录。 找到 node_modules 目录之后，再在该目录中寻找名为 moduleName.js 的文件或是名为 moduleName 的子目录。 此处旨在说明问题，对 Node 内部模块解析逻辑做了简化描述 可见 Node 在解析依赖时需要进行大量的文件 I/O 操作，效率并不高。 再来看看安装依赖时发生了什么，现阶段 yarn install 操作会执行以下 4 个步骤： 将依赖包的版本区间解析为某个具体的版本号 下载对应版本依赖的 tar 包到本地离线镜像 将依赖从离线镜像解压到本地缓存 将依赖从缓存拷贝到当前目录的 node_modules 目录 其中第 4 步同样涉及大量的文件 I/O，导致安装依赖时效率不高（尤其是在 CI 环境，每次都需要安装全部依赖）。

前端已经被玩儿坏了！像 console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧…

在开始前确保已经安装了 npm。 当我们说 ‘npm scripts’ 的时候，我们说的是 package.json 中的 'scripts' 属性值。你可以在此制定要公开的各种命令和脚本，然后可以使用 npm run <script-name> 去执行它们。 将会打…

事情是这样的，前两天有学员问我轮播图无缝滚动的原理，说平时用框架习惯了，到自己手撸的时候不会了。 如果是几十张图片，那就直接做成一个3D的圆环，还是那句话，有解决思路最重要。 想看代码的，继续往后看，代码量其实很少，连着css一起也才一百多行而已，所以其实一点都不复杂，重点还是…

Simple. Fast. Web Components.

Simple. Fast. Web Components.

组件化是客户端开发最重要的内容，设计一套复用度高、扩展性好的组件系统，可以显著提高开发效率，并且可以减少后期的维护成本。 就以我正在使用的笔记app为例，上图展示的笔记的阅读与书写区域，如何将这个区域抽象为一个组件呢？让我们一步一步来分析。 1. 最简api 我们为该组件取个名…

在实际的开发过程中，我们经常用别人开发的脚手架，以节约搭建项目的时间。但是，当npm没有自己中意的脚手架时，我们不得不自己动手，此时学会开发前端CLI脚手架的技能就显得非常重要。搭建一个符合大众化的脚手架能使自己在项目经验上加个分哦！ 其实很多时候从0开始搭建的项目都可以做成模…

文末领取昨天的红包抽奖抽中的金额以及查看106期中奖用户

想知道他们有什么很棒的功能吗

下面我将选择进行划分为三大部分，对于基本选择器我就不说了，主要讲下伪类选择器，组合选择器及它们各自的使用场景。 下面讲讲nth-child()括号中的公式，这个算是这个选择器的亮点了。 上面这两我就不说了，相信大家都用烂了。主要说说下面这两个。 好了，在讲完这些选择器之后我们来…

在了解这些概念之前，我们要先了解一个熟知的概念，那就是 SPA(Single Page Application)，没错，就是大家熟知的单页应用，其实 CSR、SSR、Prerender 都是基于 SPA，关于 SPA 的概念我就不多阐述了。 即，渲染过程全部交给浏览器进行处理，…

Install Jest using your favorite package manager:

一步步实现一套基于容器化技术的 CI/CD 流程，助力研发提效。「从 0 到 1 实现一套 CI/CD 流程」由王圣松撰写，3212人购买

本文是对《可视化拖拽组件库一些技术要点原理分析》的补充。上一篇文章主要讲解了以下几个功能点： 友善提醒：建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 14. 拖拽旋转 在写上一篇文章时，原来的 DEMO 已经可以支持旋转功能了。但是这个旋转功能还…

好了不装了，今天我就化身性感面试官在线问大家一个问题，“谈谈你对前端路由的理解”。看到这个问题，那回答可多了去了。但是换位思考一下，你问候选人这个问题的时候，你想要得到什么答案？以我个人拙见，我希望候选人能从全局解读这个问题，大致以下三点。 1、为什么会出现前端路由。 2、前端…

前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会周边技术群，第二十届|前端管理专场，2021-1-23，线上直播。 大家好，我是 Scott，很高兴来到「前端艺术家沙龙 "前端职业成长" 专场（深圳）」做这一场分享，只不过我现在头发…

豆皮粉儿们，又见面了，今天这一期，由字节跳动数据平台的“虫二”，给大家讲一讲LSP-language-server-protocol。 yuge最近在学习WebIDE的实现机制，需要实现类似IDE的智能提示、语法检查和解析、悬停文档等交互体验；由于没法直接嵌入进来VSCode，…

1. 前言 对于写博客的朋友们来讲，图床这个东西一定不会陌生，而且在一定程度上也给大家造成过一定困扰。 对于不清楚这个东西的朋友，我就在这儿大概说一下图床是个啥东西。所谓图床，其实可以就相当于我们手机上的相册，不过他是在线的，而且是对大家开放的，大家都可以访问查看，但是编辑删除…

我觉得每个人可能都有过看源码的想法吧，也包括我。因为看源码不光能使自己对这个库更加熟悉，还能学习到作者强大的思想，久而久之，自己的水平和思想也会有明显的提升的。 1. 查看工具函数 2. 入口文件 3. Store类的实现 可以看到传入的 options 整体可以看成一个根模块…

在JS 事件循环之宏任务和微任务中讲到过，setInterval 是一个宏任务。用多了你就会发现它并不是准确无误，极端情况下还会出现一些令人费解的问题。下面我们一...