我不是外星人Alien-CSDN博客

原创「微信小程序」生成水印原理与插件编写

一前言今天分享一个小程序生成水印的小技巧——canvas绘制背景图，接下来我会详细介绍绘制的细节。希望开发过微信小程序的同学可以把文章收藏起来，这样如果以后遇到类似的需求，可以翻出来作为参考。本文的插件同样适用于Taro，uniapp，原生等构建的小程序项目，项目demo是采用Taro-Vue构建的。我们先来看看demo效果。二原理实现canvas绘制背景图这个方案原理本质上是非常简单的，就如把大象放冰箱一共分成三步那样简单????????。第一步冰箱门打开，因为这个功能是前端实现的，

2021-06-29 00:05:21 1005 1

原创「React进阶」一文吃透react事件原理

一前言今天我们来一起探讨一下React事件原理，这篇文章，我尽量用通俗简洁的方式，把React事件系统讲的明明白白。我们讲的react版本是16.13.1 , v17之后react对于事件系统会有相关的改版，文章后半部分会提及。老规矩，在正式讲解react之前，我们先想想这几个问题(如果我是面试官，你会怎么回答?)：1 我们写的事件是绑定在dom上么，如果不是绑定在哪里？2 为什么我们的事件不能绑定给组件？3 为什么我们的事件手动绑定this(不是箭头函数的情况)4 为什么不能用 retu

2021-05-23 12:00:35 801

原创「react进阶」 react全部api解读+基础实践大全(夯实基础)

很多同学用react开发的时候，真正用到的React的api少之又少，基本停留在Component,React.memo等层面,实际react源码中，暴露出来的方法并不少，只是我们平时很少用。但是React暴露出这么多api并非没有用，想要玩转react,就要明白这些API究竟是干什么的，应用场景是什么，今天就让我们从react 到 react-dom,一次性把react生产环境的暴露api复习个遍(涵盖90%+)。我们把react,API，分为组件类，工具类，hooks，再加上 react-dom ，

2021-04-19 13:49:50 1010

原创「react进阶」一文吃透react-hooks原理

一前言之前的两篇文章，分别介绍了react-hooks如何使用，以及自定义hooks设计模式及其实战，本篇文章主要从react-hooks起源，原理，源码角度，开始剖析react-hooks运行机制和内部原理，相信这篇文章过后，对于面试的时候那些hooks问题，也就迎刃而解了。实际react-hooks也并没有那么难以理解，听起来很cool，实际就是函数组件解决没有state，生命周期，逻辑不能复用的一种技术方案。Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况

2021-04-09 08:33:00 1562

原创「react进阶」一文吃透React高阶组件(HOC)

一前言React高阶组件(HOC)，对于很多react开发者来说并不陌生，它是灵活使用react组件的一种技巧，高阶组件本身不是组件，它是一个参数为组件，返回值也是一个组件的函数。高阶作用用于强化组件，复用逻辑，提升渲染性能等作用。高阶组件也并不是很难理解，其实接触过后还是蛮简单的，接下来我将按照，高阶组件理解？，高阶组件具体怎么使用？应用场景，高阶组件实践(源码级别) 为突破口，带大家详细了解一下高阶组件。本文篇幅比较长，建议收藏观看我们带着问题去开始今天的讨论：1 什么是高阶组件，它解决了什

2021-03-20 15:11:01 1000

原创「小议」我从读源码中收获到了什么？阅读源码那点小事

一前言说到源码，大家脑海里可能浮现出四个字我太难了????????????。读源码貌似和我们遥不可及，因为在日常工作中，我们基本掌握在熟练的程度上，就能够满足工作需求，即便是想看源码，也会被源码复杂的逻辑拒之门外,成为了我们心中挥之不去的阴影。那么我们真的有必要阅读源码吗？我以一个过来人的角度看，答案是肯定的，阅读源码不只是停留在源码层面，它还会带来一些附加的价值。笔者读过很多源码，比如主流前端框架 vue2.0,vue3.0,react，node框架 express , koa，和它们衍生生

2021-03-19 14:02:52 741

原创「源码解析」一文吃透react-redux源码（useMemo经典源码级案例）

前言使用过redux的同学都知道,redux作为react公共状态管理工具，配合react-redux可以很好的管理数据,派发更新，更新视图渲染的作用，那么对于 react-redux 是如何做到根据 state 的改变，而更新组件，促使视图渲染的呢，让我们一起来探讨一下，react-redux 源码的奥妙所在。在正式分析之前我们不妨来想几个问题:1 为什么要在 root 根组件上使用 react-redux 的 Provider 组件包裹？2 react-redux 是怎么和 redux 契合，做

2021-03-10 13:49:50 629

原创开发嵌入京东app h5| Hybrid | 微信小程序｜实践踩坑总结十六条

一前言笔者最近一直在开发京东app嵌入的h5项目和微信小程序商城项目，在此期间遇到很多坑。这篇文章主要是针对 h5| Hybrid | 微信小程序三个方向来讲述我遇到的坑，以及详细讲解我是如何解决问题的。一直以来，移动端适配就是一个令人头疼的问题。如果想要吃透移动端，还需要不少的实践经验，有的时候在pc端调试没有问题，但是在m端就会出现问题。以下这16个问题是我在实际工作中遇到的，亲自奉上给大家。希望大家收藏一波，以备不时之需。喜欢笔者的可以「点赞 + 收藏」一波，持续更新前端硬核文章。M端

2021-03-01 23:20:29 1924

原创小程序canvas绘制带二维码海报全流程

接下来，我会把纯前端实现生成带二维码的海报全流程给大家讲个明明白白，把我自己遇到的坑，给大家详细分享并讲解，防止大家遇到相似问题，即使遇到问题，也会有一个明确的方向，并且吐血建议大家收藏一波，以备不时之需。(你不能保证以后的需求，没有类似的吧，有的话，记得翻出来看看)长路漫漫，总得有人敢于迈出踩坑的第一步，我想我就是那个????????，希望大家能踏着我冒着抬上救护车危险填平的坑，通向小程序生成海报胜利之路。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波陆续更新超干，超硬核的前端文章。一写

2021-02-08 23:11:06 1233

原创「react缓存页面」从需求到开源（我是怎么样让产品小姐姐刮目相看的）

一一切根源都从产品小姐姐无厘头需求开始最近在开发业务项目的时候，产品小姐姐突然来到我身边，然后就对着电脑一顿操作，具体场景大致是这样的。场景一：如上图所示，当在数万级别的数据中，选择一条，点击查看，跳转到当前数据的详情页，当点击按钮返回返回来，或者是浏览器前进后退等其他操作，返回到列表页的时候。要记录当前列表的位置。也就是要还原点击查看查看前的页面。但是当点击tab菜单按钮的时候，要清除页面信息。场景二：如上图所示，当我们编辑内容的时候，一些数据可能从其他页面获得，所以要求，无论切换路由，切

2021-01-31 13:06:01 550

原创「前端工程化」从0-1搭建react，ts脚手架（1.2w字超详细教程）

一前言读完这篇文章你可能会学到哪些知识？①node实现终端命令行 ②终端命令行交互③深copy整个文件夹 ④nodejs执行终端命令如 npm install⑤建立子进程通信⑥webpack底层操作，启动webpack,合并配置项⑦编写一个plugin,理解各阶段⑧require.context实现前端自动化1 实现效果展示项目效果mycli creat 创建项目mycli start 运行项目mycli build 打包项目体验步骤我们在这边文章里面用的是mycli ，但是我

2021-01-20 10:14:40 1974 2

原创「react进阶」年终送给react开发者的八条优化建议(篇幅较长，占用20-30分钟)

笔者是一个 react 重度爱好者，在工作之余，也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波。公众号：前端Sharing 陆续更新前端文章。本文篇幅较长，将从编译阶段 ->路由阶段 ->渲染阶段 ->细节优化 ->状态管理 ->海量数据源，长列表渲染方向分别加以探讨。一不能输在起跑线上，优化babel配置,w

2020-12-25 19:09:53 1700 1

原创 vue组件通信方式总结及其应用场景

前言相信实际项目中用过vue的同学，一定对vue中父子组件之间的通信并不陌生，vue中采用良好的数据通讯方式，避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式，优缺点，及其实际工作中的应用场景首先我们带着这些问题去思考1 vue中到底有多少种父子组件通信方式？2 vue中那种父子组件最佳通信方式是什么？3 vue中每个通信方式应用场景是什么？一 prop1 基本用法prop通信方式大家最常见的，也是最常用的父子组件通信类型，我们可以直接在标签里面给子组件绑定属性和方

2020-12-08 15:05:57 1250

原创纯前端实现一键生成二维码

前言：相信不少同学在实际工作中做项目的时候会遇到点击形成二维码，跳转新的页面展示二维码的项目需求。解决问题的思路实际又很多种，今天笔者介绍一个简单实现的思路，供大家参考，实际实现这个小功能其实是特别简单的。demo效果思考如何让实现如何实现这个需求呢首先我们需要生成二维码，而且要打开一个新的页面展示，那么我们需要img标签来展示图片的载体，那么生成图片src必不可少的。无论我们的项目是spa，还是多页面应用，我们这里都要用base64储存图片的信息。所以需要把生成的二维码转化成base64。接.

2020-11-20 09:55:49 4223

原创玩转react-hooks,自定义hooks设计模式及其实战

前言自从react16.8，react-hooks诞生以来，在工作中一直使用hooks，一年多的时间里，接触的react项目，渐渐使用function无状态组件代替了classs声明的有状态组件，期间也总结了一些心得。尤其对于近期三个月的项目里，一点点用自定义hooks来处理公司项目中重复逻辑，总体感觉还不错。今天给大家讲讲我在工作中对react-hooks心得，和一些自定义hooks的设计思想，把在工作中的经验分享给大家。自定义hooks设计又回到那个问题？什么是hooks。react-hooks

2020-11-04 11:03:21 2332

原创「源码解析」这一次彻底弄懂react-router路由原理

写在前面：为什么要学习react-router底层源码? 为什么要弄明白整个路由流程？笔者个人感觉学习react-router，有助于我们学习单页面应用(spa)路由跳转原理，让我们理解从history.push，到组件页面切换的全套流程，使我们在面试的时候不再为路由相关的问题发怵，废话不说，让我们开启深入react-router源码之旅吧。一正确理解react-router1 理解单页面应用什么是单页面应用？个人理解，单页面应用是使用一个html下，一次性加载js, css等资源，所有页面.

2020-10-22 21:38:30 1578 1

原创「原题 + 精讲」7.8 月份新出炉面试题含大厂100道1.2万字整理(一)

7.8 月份面试题新鲜出炉啦，里面有很多大厂面试题原题，大家喜欢的可以给笔者点个赞，花费了很长时间整理，这些面试题更适合为中级前端进阶高级前端的小伙伴查缺补漏，和为打算金九银十换工作的同学们保驾护航。陆续还有相关文章分享连载，喜欢的可以关注一下笔者和笔者的公众号：前端Sharing废话不说，面试题奉上html篇问题一:Meta标签常用属性值的写法和作用答：meta 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜

2020-09-11 13:18:06 1960

原创 vue3.0 源码解析二：watch 和 computed原理解析

之前的文章详细的介绍了vue3.0 相应式原理，知道了用proxy代替Object.defineProperty 的利与弊，了解了依赖收集和派发更新的大致流程，知道了vue3.0响应式原理，这节我们一起研究vue3.0中的 watch 有那些变化。一 watch 和 watchEffect之前我们讲解到，vue3.0取消了渲染watch概念，取而代之的effect副作用钩子，来完成当依赖项更改而促使视图。 /* 创建一个渲染 effect */instance.update = effect(fun

2020-08-24 07:59:54 2288 2

原创 vue3.0 响应式原理(超详细)

一基于proxy的Observer1 什么是proxyProxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。proxy是es6新特性，为了对目标的作用主要是通过handler对象中的拦截方法拦截目标对象target的某些行为（如属性查找、赋值、枚举、函数调用等）。/* target: 目标对象，待要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。 *//* handler: 一个通常以函数作为属性的对象，各属性中的函数.

2020-08-09 15:59:59 8023

原创 webpack性能优化

当我们不用cli，而是自己搭建项目架子的时候，会用到webpack构建我们的项目，在用webpack构建项目的时候，过长的打包编译时间和庞大冗余的代码会让我们感到头疼。所以优化webpack性能成为了不可或缺的一部分。下面我们一起来探讨webpack性能优化细节。影响webpack性能的因素如果我们在构建项目中使用了大量的loader和第三方库，会使我们构建项目的时间过长，打包之后的代码体积过大。于是乎，就遇到了webpack 的优化瓶颈,总结webpack影响性能主要是两个方面：1 webpack.

2020-08-05 15:57:57 396

原创 vue3.0 源码解析二：响应式原理（下)

vue3.0 源码解析二：数据绑定原理（下)回顾上文上节我们讲了数据绑定proxy原理，vue3.0用到的基本的拦截器，以及reactive入口等等。调用reactive建立响应式，首先通过判断数据类型来确定使用的hander，然后创建proxy代理对象observed。这里的疑惑点就是hander对象具体做了什么？本文我们将已baseHandlers为着手点，继续分析响应式原理。连载文章是大致是这样的，可能会根据变化随时更改：1 数据绑定原理（上)2 数据绑定原理（下)3 computed和

2020-07-06 23:20:14 702

原创 vue3.0 源码解析一：响应式原理（上)

前言介绍从本文开始，我们正式进入vue3.0 源码解析流程。个人觉得从ceateApp入手并不是最佳的学习方案，所以我们先从composition-api响应式原理入手，共同学习vue3.0带来的哪些翻天覆地的变化。连载文章是大致是这样的，可能会根据变化随时更改：1 数据绑定原理（上)2 数据绑定原理（下)3 computed和watch原理4 事件系统5 ceateApp6 初始化mounted和patch流程。7 diff算法与2.0区别8 编译compiler系列…一基于

2020-06-28 22:09:42 766

原创 webview H5 兼容性汇总(持续更新中)

webview H5 兼容性汇总(持续更新中)1 IOS问题：position:fixed固定定位抖动问题问题背景：在业务场景中,在ios终端环境下运行H5页面，需要用到fixed定位，并且fixed定位需要上下移动（y轴移动）网上解决方案：① 给顶级元素设置heightL100% ( 并没有奏效 ) 。② 增加transform: translate(0) 属性（并没有奏效）③ 改变布局由fixed 定位,改成absolute定位，滚动条基于自身。（能够从根本上解决偶尔跳屏的问题，但

2020-06-22 22:41:13 1247

原创 vue3.0 diff算法详解(超详细)

前言：随之vue3.0beta版本的发布，vue3.0正式版本相信不久就会与我们相遇。尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持，proxy响应式原理，重新虚拟dom，优化diff算法性能提升等等。小编在这里仔细研究了vue3.0beta版本diff算法的源码，并希望把其中的细节和奥妙和大家一起分享。首先我们来思考一些大中厂面试中，很容易问到的问题：1 什么时候用到diff算法，diff算法作用域在哪里？2 diff算法是怎么运作的，到底有什么作用？3 在v-for 循.

2020-06-07 00:32:07 12833 9

原创 react-keepalive-router缓存路由库

一介绍基于react 16.8+ ,react-router 4+ 开发的react缓存组件，可以用于缓存页面组件，类似vue的keepalive包裹vue-router的效果功能。采用react hooks全新api,支持缓存路由，手动解除缓存，增加了缓存的状态周期，监听函数等。后续版本会完善其他功能。demo缓存组件 + 监听二快速上手下载npm install react-keepalive-router --save# oryarn add react-keepalive-.

2020-12-09 00:26:47 2115

原创前端性能优化：图片优化

前言知识：二进制位数与色彩的关系在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色。1 JPEG/JPG关键字：有损压缩、体积小、加载快、不支持透明JPG 的优点JPG 最大的特点是有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的

2020-08-09 15:03:30 337

原创 react-redux 源码解析一: Provider做了什么，发布订阅模式实现？

Provider做了什么，发布订阅模式实现？使用过react的同学都知道,redux作为react公共状态管理容器，配合react-redux可以很好的派发更新，更新视图渲染的作用，那么对于react-redux是如何做到根据state的改变，而更新组件，促使视图渲染的呢，让我们一起来探讨一下，react-redux源码的奥妙所在。在正式分析之前我们不妨来想几个问题，1 为什么要在root跟组件上使用react-redux的provider组件包裹2 redux是使用store.subscribe(

2020-05-27 22:38:45 2716

zl_Alien的博客