前端森林-CSDN博客

原创使用 Nginx 构建前端日志统计服务

背景之前的几篇文章都是关于之前提到的低代码平台的。这个大的项目以 low code 为核心，囊括了编辑器前端、编辑器后端、C 端 H5、组件库、组件平台、后台管理系统前端、后台管理系统后台、统计服务、自研 CLI 九大系统。今天就来说一下其中的统计服务：目的主要是为了实现 H5 页面的分渠道统计(其实不仅仅是分渠道统计，核心是想做一个自定义事件统计服务，只是目前有分渠道统计的需求)，查看每个渠道具体的 PV 情况。(具体会在 url 上面体现，会带上页面名称、id、渠道类型等)先放一下整体流程

2021-12-24 13:38:19 1805

原创使用Docker Compose、Nginx、SSH和Github Actions实现前端自动化部署测试机

开篇，我们先来看一下远古时代的构建部署流程。想必大家对这个都不陌生：开发将源码经过编译、压缩打包生成打包文件将打包生成的文件上传服务器显然这个流程不仅繁琐，而且效率也不高，开发每次发布都要耗费很长的时间在部署构建上面。后面为了解决这个问题，就出现了CI/CD。接下来我们来聊一下什么是CI/CD？CI/CD 是 Continuous Intergration/Continuous Deploy 的简称，翻译过来就是持续集成/持续部署。CD 也会被解释为持续交付（Continuous Deli

2021-11-08 23:14:34 367

原创如何设计实现H5营销页面搭建系统

背景近几年，low code、no code、pro code等越来越多的出现在我们的视野中。抱着不被卷的心态 ????，我决定来深入探索一下。我所在的是营销部门。每天/月都承载着大量的营销活动，本文也是我在探索可视化搭建过程中的一些心得体会其实这些名词都与搭建相关。其中一个应用最广的场景就是营销。我们知道无论是淘宝、京东这些电商巨头，亦或是携程、去哪儿这些OTA，每天 APP 上都承接着无数的活动页面。大致梳理一下营销活动的一些特点：页面类似: 页面布局和业务逻辑较固定需求高频: 每周甚

2021-09-30 10:56:21 928

原创 Rejouer：探秘web页面录制与回放的新大陆

在我长期的固有认知中：为了收集和上报网站交互过程中 JavaScript 的报错信息和其它相关数据，我们一般会采用自研或者第三方的SDK，也可以简单理解为埋点。这也是为了方便生产问题的排查，做到可溯源。但是，在前一段，和隔壁组的同事交流时，我发现了一个有点东西的系统–Rejouer。这个系统可以做到完整复现用户的操作行为，类似于录屏的功能，起初我还真的以为他们就是给我放了一个录屏，后来发现没那么简单。本文也是在和这位同事探讨的过程中得到的一些启发。业务背景不要重复造轮子！这是我一直以来的信念。轮子的

2021-09-22 14:51:56 469

原创那些年错过的React组件单元测试（下）

????‍???? 写在前面上篇文章我们已经了解了前端单元测试的背景和基础的jestapi，本篇文章我会先介绍一下Enzyme，然后结合项目中的一个真实组件，来为它编写测试用例。????‍???? Enzyme上一篇中我们其实已经简单介绍了enzyme，但这远远不够，在本篇的组件测试用例编写中，我们有很多地方要用到它，因此这里专门来说明一下。Enzyme是由Airbnb开源的一个React的JavaScript测试工具，使React组件的输出更加容易。Enzyme的API和jQuery操作DOM一样

2021-09-17 23:43:22 651

原创那些年错过的React组件单元测试（上）

???? 写在前面关于前端单元测试，其实两年前我就已经关注了，但那时候只是简单的知道断言，想着也不是太难的东西，项目中也没有用到，然后就想当然的认为自己就会了。两年后的今天，部门要对以往的项目补加单元测试。真到了开始着手的时候，却懵了 ????我以为的我以为却把自己给坑了，我发现自己对于前端单元测试一无所知。然后我翻阅了大量的文档，发现基于dva的单元测试文档比较少，因此在有了一番实践之后，我梳理了几篇文章，希望对于想使用 Jest 进行 React + Dva + Antd 单元测试的你能有所帮助。

2021-09-15 11:25:13 367

原创来自小姐姐的灵魂拷问：位运算是什么？

前两天上班，突然小叶给我发消息：哥哥，你看这两段代码是什么意思啊？乍一看，感觉这代码既熟悉又陌生。好像在哪里见过，但平时好像又很少用到。我喝口水，冷静的想了 3s：咦，这个不就是那个位运算符吗？之前大学就学过，前一段看react源码也有看到过啊！小叶：哥哥，那你能不能给我讲一下这是什么呢？我：没问题，等我整理一下～什么是位运算？位运算简单来说就是基于整数的二进制表示进行的运算。它直接处理每一个比特位，是非常底层的运算，好处是速度极快，缺点是不太直观。你这会可能会问：二进制是什么？

2021-09-10 22:23:38 365 1

原创你不知道的npm

引言作为 node 自带的包管理器工具，在 nodejs 社区和 web 前端工程化领域发展日益庞大的背景下，npm已经成为每位前端开发同学必备的工具。每天，无数的开发人员使用npm来构建项目，npm init、npm install等方式几乎成为了构建项目的首选方式，但是大多数同学对于 npm 的使用却只停留在了npm install这里。（相信删除 node_modules 文件夹，重新执行 npm install 这种事情你应该做过吧）本篇文章主要是结合我以往的经验，带大家更深层次的了解一下 npm

2021-09-07 22:09:17 419

原创哔哩哔哩面试官：你可以手写Vue2的响应式原理吗？

写在前面这道题目是面试中相当高频的一道题目了，但凡你简历上有写：“熟练使用Vue并阅读过其部分源码”，那么这道题目十有八九面试官都会去问你。什么？你简历上不写阅读过源码，那面试官也很有可能会问你是否阅读过响应式相关的源码还是那句歌词唱的：挣不脱逃不过眉头解不开的结命中解不开的劫整体流程作为一个前端的MVVM框架，Vue的基本思路和Angular、React并无二致，其核心就在于: 当数据变化时，自动去刷新页面DOM，这使得我们能从繁琐的DOM操作中解放出来，从而专心地去处理业务逻辑

2021-09-02 16:25:30 2219 10

原创小红书面试官：介绍一下 tree shaking 及其工作原理

写在前面今天这道题目是在和小红书的一位面试官聊的时候：我：如果要你选择一道题目来考察面试者，你最有可能选择哪一道？面试官：那应该就是介绍一下tree shaking及其工作原理？我：为什么？面试官：是因为最近面了好多同学，大家都说熟悉webpack，在项目中如何去使用、如何去优化，也都或多或少会提到tree shaking，但是每当我深入去问其工作机制或者原理时，却少有人能回答上来。（小声 bb：并不是我想内卷，确实是工程师的基本素养啊，哈哈 ????）面试官：那你来回答一下这个问题？我：我也

2021-09-01 13:41:44 407 1

原创彻底玩转图片懒加载及底层实现原理

前言图片懒加载其实已经是一个近乎“烂大街”的词语了，在大大小小的面试中也会被频繁的问到，我在之前的面试中也被问到了图片懒加载的原因、实现方式及底层原理，但由于自己平时很少做“图片”相关的处理，对于“懒加载”也是知之甚少，所以在面试中问答的也不是很好。今天，我将首先从浏览器底层渲染机制来剖析为什么要去做图片懒加载，之后我将带大家一起来看下目前主流的几种实现图片懒加载的方式及其实现原理，最后会做一个展望。为什么要做图片懒加载要问答这个问题，首先我们先来看下浏览器的底层渲染机制：1、构建 DOM 树2

2021-08-26 22:40:17 315

原创为什么 husky 放弃了传统的 JS 配置

前言husky想必大家都不陌生。作为前端工程化中一个不可或缺的的工具，它可以向我们的项目中添加git hooks。同时配合lint-staged可以方便的在代码提交前进行lint。最近要对一个老项目添加commit-msg校验，同时要在commit前进行eslint校验。之前我也写过一篇类似的文章你可能已经忽略的 git commit 规范，就直接上手了。大致流程就是先安装依赖：npm i husky -D然后在package.json配置：{ "husky": { "hooks"

2021-08-23 22:01:34 1124

原创好玩儿的css

引言其实很早就想写一篇关于 css 的文章了。（拖延症，一直没写。。。）css 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。今天带大家看几个用css（部分会用到canvas和js）实现的好玩儿的效果（不好好琢磨下，还真写不出来）本篇文章有参考一些css大佬的杰作，具体参考链接在文末有提及超能陆战队-大白超能陆战队中的大白，相信你一定不陌生吧。影片中的大白又萌又可爱，十分惹人喜欢。下面让我们打造属于自己的大白吧！效果思路大白主要是由

2021-08-18 23:08:25 578 2

原创滚动视差让你不相信“眼见为实”

引言视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果。其实，这项技术早在 2013 年就已经开始在一些国外的网站中得到了大量的应用。由于它给网站带来了非常出色的视觉体验，现在已经有数不胜数的网站应用了这项技术。我是在最近的项目中用到了这块，觉得有必要整理一下。本文主要是简单的介绍一下什么是视差滚动，实现方式以及如何在现有框架(vue/react)中使用视差滚动。什么是视差滚动？视差效果，最初是一个天文术语。当我们看着繁星点点的天空时，较远的恒星运动.

2021-08-17 00:16:00 2324 6

原创字节跳动面试官：请用JS实现Ajax并发请求控制

最近也好久没输出文章了，原因很简单，最近巨忙，，，，讲真的，最近也很迷茫。关于技术、关于生活吧。也找了很多在大厂的朋友去聊，想需求一些后期发展的思路。这其中也聊到了面试，聊到了招聘中会给面试者出的一些题目。我正好也好久没面试了，就从中选了几道。最近也会陆续出一系列关于一些面试问题的解析。今天这道是字节跳动的：实现一个批量请求函数 multiRequest(urls, maxNum)，要求如下：• 要求最大并发数 maxNum• 每当有一个请求返回，就留下一个空位，可以增加新的请求• 所有请求完

2021-08-13 18:41:54 936

原创优雅的在vue中使用TypeScript

引言近几年前端对 TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。在单独学习 TypeScript时，你会感觉很多概念还是比较好理解的，但是和一些框架结合使用的话坑还是比较多的，例如使用 React、Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍，需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义、组件的书写方式等都要做

2021-08-10 10:42:45 1754 2

原创 useTypescript-React Hooks和TypeScript完全指南

引言React v16.8 引入了 Hooks，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用，从而易于共享逻辑。Hook 令人兴奋并迅速被采用，React 团队甚至想象它们最终将替换类组件。以前在 React 中，共享逻辑的方法是通过高阶组件和 props 渲染。Hooks 提供了一种更简单方便的方法来重用代码并使组件可塑形更强。本文将展示 TypeScript 与 React 集成后的一些变化，以及如何将类型添加到

2021-08-05 14:52:38 333

带你探秘前端森林