前言之前写了 Redux 相关的实战，很多人说：啊！Up主这个你涉及的知识点太多了呀，我学不会呀，有没有简单一点的呀？ 我想了想，确实一个知识点就不要穿插其他难懂的知识点了，这样对小白不友好，那我就给大伙写用最原始的 html、css、js 和 redux 的来写一个简易版的todolist吧，保证你立马上手redux 效果图这个效果的功能点有： input 框输入点击+将添加到下方 点击下方某 item 可以将其删除准备 在你的开发环境添加 react 、 redux 这个你不会的话就去安装一个npm或者yarn，用npm或yarn命令来安装。 index.js 主文件，入口 TodoList.js ` 组件文件，实现 store/index.js 返回 store ，你可以把它想象为银行存款会影响视图更新（我也忘记从哪里看的这个比喻的，我觉得还挺好理解的） store/reducer.js 银行的计算器，处理数据。根据 action.type 你要做啥操作，()=> newState计算出的钱💰 会改变原来的存款 💰 源码index.js通过 Prov ...

前言hello朋友们，我又来分享技术调研了，芜湖～ 这次是Readux Toolkit，它配合我上次调研的 proxy-memoize 一起来优化一下我们项目现在的状态管理。 相信大部分小伙伴还是对 redux 更了解，那这个Readux Toolkit又是个啥东西的，能带来啥，怎么用。那这篇文章可能能帮你解决这几个疑问。当然如果你想更详细的了解的话肯定是要看官网的啦。 那么话不多说，进入正题吧 基于Redux优化首先毫无疑问，Readux Toolkit是基于Redux的一系列优化，那优化了redux的什么呢，这里我就简要的讲一讲redux可能存在的缺点（从一些角度说它的缺点也是了优点，因场景而异啦）： 我们很多状态都要抽象到 store，一个变化就要对应编写 action，reducer 需要几个软件包来使Redux与React一起工作，例如redux-thunk、reselect Redux的一些理念导致我们需要写很多样板代码 配置 Redux store太复杂 当然我们也不全是因为redux他的这些所谓的缺点，而非要卷来优化哈，其实也是因为调研Readux Toolkit我 ...

引言在像 React 这样的前端框架中，对象不变性非常重要。但其实它本身并不支持强制不变性。那这个库利用了 Proxy 和 WeakMap，并提供了记忆功能。仅当参数(对象)的使用部分发生变化时，记忆函数才会重新计算原始函数。 通过引言我们已经知道了它的优点，那么你可能会好奇他是如何实现的，那么你可以看看下面这个介绍，如果你只关心它是如何使用你也可以跳过这一小节： 如何工作当它(重新)计算一个函数时，它将用代理(递归地，根据需要)包装一个输入对象并调用该函数。当它完成时，它将检查什么是受影响的。这个受影响其实是在函数调用期间访问的输入对象的路径列表。 当它下一次接收到一个新的输入对象时，它将检查受影响路径中的值是否被更改。如果是被更改，那么它将重新计算函数。否则，它将返回一个缓存结果。默认缓存大小为1，可配置。 一个个说吧，首先要包装成对象：显然这里需要注意：一个要被记忆的函数必须是一个只接受一个对象作为参数的函数。 //要为对象const fn = (x) => ({ foo: x.foo });const memoizedFn = memoize(fn); ...

🌼 表示层这里我是使用的是antd的Upload上传组件 引用antd部分代码 import { Button,Table,Upload } from 'antd';<Upload {...props} fileList={state.fileList}> <Button type="primary" >Excel导入</Button></Upload><Button type="primary" onClick={handleExport}>Excel导出</Button> 🌴 业务层首先分析一下工作： 导入Excel工作：用户上传Excel表格，将表格内容转换为json对象方便后端处理，后端将数据存储数据库； 导出Excel工作：获取后端json格式数据，前端将数据转换为sheet工作薄对象，生成的对象转换为Excel表格下载导出； 下面就是技术层面的细节 ...

前言这篇文章零基础也可以看，我尽量写得简单易懂了，如果觉得理解起来有点费力，也可以先去官网入门。 这篇文章也附上了许多实战代码，但是由于篇幅原因，一些实战例子我没有直接摆出来，而是放在了sandBox链接里，除了慢优点还是很多的。 一、Redux因何产生？首先说它为什么出现 1.趋势所致： JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 2.管理不断变化的 state 非常困难：如果一个 model 的变化会引起另一个 model 变化，那么当 view 变化时，就可能引起对应 model 以及另一个 model 的变化，依次地，可能会引起另一个 view 的变化。state 在什么时候，由于什么原因，如何变化已然不受控制。 二、Redux是干什么的？说到底它也只是个工具，了解一个工具最开始当然是要了解它是做啥的咯。 官网对它的定义：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 详细一些： Redux会将整个应用状态(其实也就是数据)存储到Store Store里面保存一棵状态树(st ...

之前一直没有总结Vue相关的知识，看了挺多别人总结的，其实也能快速知道一些，但是遇到真正的面试，发现自己的知识都还只是碎片化的，觉得不行，得总结一下了。 不知道大伙是不是已经在准备春招面试了呢，准备得咋样了呢，面试的Vue复习得怎么样了呢？ 如果你感觉在vue这方面还比较薄弱的话，不如来做一做这套模拟面试吧，看看大伙能不能打个满分，祝你顺利，🌸答案仅供参考🌸 欢迎访问GitHub仓库，目前已经有552 道大厂真题了，涵盖各类前端的真题 —— 进入正题化身为面试官 —— 📞📞电话拨通中，咳咳喂，听得到吗，听得到是吧😊，那面试开始了，你先做个自我介绍吧。。。在你自我介绍的时候呢，我就看看你做过的项目，技术栈什么的。 第一个问题，先摸个底： 了解过（用过）react或者angular吗，他们有什么区别？答案 Vue 借鉴了angular 的模板和数据绑定技术，又借鉴了react 的组件化和虚拟DOM 技术。 😶对Vue 比较熟一些是吧~（这里只说Vue 假设你就只熟练Vue ） 那首先谈谈你对Vue的理解吧？答案 官网介绍： https://cn.vuejs. ...

引言首先出这篇文章，一方面是为了记录巩固我所学的知识，明白面试的高频考点。不鼓励大家背题的，初衷是希望总结的一些面试题能帮助你查漏补缺，温故知新。这些题并不是全部，如果你还想看得更多，可以访问GitHub仓库，目前已经有552道大厂真题了，涵盖各类前端的真题，欢迎加入我们一起来讨论~ 函数call 语法：fn.call(obj,…args) 功能：执行fn，使this为obj，并将后面的n个参数传给fn Function.prototype.myCall = function (obj, ...args) { if (obj == undefined || obj == null) { obj = globalThis } obj.fn = this let res = obj.fn(...args) delete obj.fn return res}value = 2let foo = { value: 1,}let bar = function (name, age) { console. ...

前言我与服务外包，真的是一场缘分，大一的时候因为在部门学会了做视频，在班级群看到辅导员问有没有人会做视频，我回复了，没想到我与服务外包的缘分就此展开了。。。 总结我与服务外包：大一帮忙做视频接触服务外包这个比赛，大二正式参加的服务外包拿到一等奖，大三又参加拿到二等奖。 我写这篇文章已经过了记录心路历程的最佳时间，所以这篇文章更多的是建议和打气，因为我觉得你们肯定比当时的我要厉害，我行你也行的，要相信自己！ —— 正文开始—— 若果你是要听故事，那么你可以从头到尾看这篇文章，若果只是想听我分享经验，可以直接跳到最后。 缘起一切得从一个群消息开始，是辅导员金杰学长在群里问我们有没有会做视频的，大一的我很菜，自己也就是会一些皮毛，我一时间看到了也没有回复。学长又说了是一位学姐请人帮忙，十分急迫。我想着等等我们班那些做视频做得好的回复，然而过了一会都没有人，我看着总不能没人帮这个忙吧，又不是什么坏事，于是我回了：我会做视频吖~ 很快学姐就加到我了，确实十分迫切，交给我的任务就是做一个他们课程系统的介绍视频，也就是从这个时候开始，我了解到了很多技术，记得当时很多名词都还不会读呢。。。 当时改视频 ...

引言首先出这篇文章，一方面是为了记录巩固我所学的知识，明白面试的高频考点。不过我是不鼓励大家背题的，初衷是希望总结的一些面试题能帮助你查漏补缺，温故知新。这些题并不是全部，如果你还想看得更多，可以访问小狮子前端，目前已经有552道大厂真题了，涵盖各类前端的真题，欢迎加入我们一起来讨论~ —— 以下是正文 —— 介绍一下css盒模型CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。 有两种盒模型，标准 盒模型和 怪异 盒模型，区别在于，元素的宽高大小表现为content的大小，而怪异盒模型则表现为content + padding + border的大小 样式框架的原理，布局方法有哪些，flex，grid，还有吗？正常流布局 浏览器默认的HTML布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行 浮动布局 使用 float 属性，使元素脱离文档流，浮动起来。 定位布局 通过 position 属性来进行定位。（这里常考绝对定位于相对定位基准问题，下面再讲） 使用dis ...

计算机网络之应用层-HTTP、HTPS、DNS-下篇⭐️⭐️这篇文章是一个我计算机网络复习的大汇总，由于内容太多了我把它分成了上下两篇来写，上一篇将传输层协议TCP、UDP，这一篇讲的是应用层协议HTTP、HTPS、DNS~~ HTTP协议 HTTP 是一个在客户端和服务器之间传输文字、图片、音频、视频等超文本数据的约定和规范。默认使用 80 端口，它使用 TCP 作为传 输层协议，保证了数据传输的可靠性。 HTTP的特点？它有什么缺点？ 特点： 端对端， 灵活可拓展，可靠， 无状态， 持久连接 HTTP协议是一种端对端的协议，也是一种请求/响应模式的协议。 灵活可扩展：一个是语义上的自由，只规定了基本格式，其它的各部分没有严格的限制；第二个它允许传输任意类型的数据对象，例如文本、图片、音频等，传输的类型由Content-Type加以标记。 可靠传输，HTTP 基于 TCP/IP，因此把这一特性继承了下来。 无状态，也就是说HTTP请求不具备保存之前发送过的请求或响应的功能，每一次请求都是独立无关的。 持久连接，HTTP1.1 以后默认采用的是持续的连接，持续连接下，T ...