前端
文章平均质量分 76
飞机大人
此人很lan,甚么都没有写
展开
-
记一次webpack打包体积优化过程
记一次webpack打包体积优化过程。原创 2022-07-22 17:28:07 · 351 阅读 · 1 评论 -
完成一个转换template的webpack-loader:JetLoader
完成一个转换template的webpack-loader:JetLoader目标传递一个对象,根据 key 注入将其转换为对应的 html,并且支持实时 log 转换的 template 的文件名、可配置的首字母大写转换import tpl from "./info.tpl";const info = tpl({ name: "jet", age: 34, career: "前端实习生", hobby: "game/篮球",}); const root = documen原创 2022-04-17 22:32:40 · 788 阅读 · 0 评论 -
async/await 实现原理探析
async/await 实现原理探析ES2017 提供的 Async/Await 是标准的异步编程语法,作为异步编程终极解决方案,可以使开发者使用书写同步代码的方式处理异步编程,本文尝试将 Async/Await 编译成为 ES5 的代码后,去理解其内部实现。代码const getData = () => new Promise(resolve => setTimeout(() => resolve("data"), 1000))async function test() {原创 2022-04-16 17:56:45 · 447 阅读 · 0 评论 -
手写Promise和all、race等方法,附上原理解析
手写一个迷你版的PromiseJavaScript 中的 Promise 诞生于 ES2015(ES6),是当下前端开发中特别流行的一种异步操作解决方案,简单实现一个迷你版本帮助深入理解 Promise 的运行原理芝士点微任务static发布-订阅模式Promise 的声明const PENDING = 'PENDING'const FULFILLED = 'FULFILLED'const REJECTED = 'REJECTED'class JetPromise { st原创 2022-04-05 19:48:45 · 1144 阅读 · 0 评论 -
Redux源码解析及复现
复现redux本项目对redux进行一个简单复现,下面介绍api、实现及其作用芝士点HOC,高阶组件发布-订阅模式React Context函数柯里化state:redux保存的总数据reducer:统一更改 state 的函数,通过 type 值对应不同的更改操作listeners:储存监听函数列表,通过发布订阅模式通知组件更改数据StoregetState:返回 statedispatch:接受一个 action,将 state 和 action 传递给 reduc原创 2022-03-31 19:18:58 · 1316 阅读 · 0 评论 -
redux-toolkit 报无法序列化Warning A non-serializable value was detected in an action
A non-serializable value was detected in an action, in the path: payload.config.adapter. Value: ƒ xhrAdapter(config) {return new Promise(function dispatchXhrRequest(resolve, reject) {var requestData = config.data;var requestHeaders = config.headers;va.原创 2021-11-21 23:17:51 · 6443 阅读 · 0 评论 -
手写一个React的markdown组件
前言最近需要一个React的markdown组件,类似于CSDN的写博客时候的,在网上也找到了很多现成的,但是很多功能需要定制化,所以选择了看教程自己造一个轮子出来。UI设计markdown的样式,也是与网上现成的差不多,主要是仿照了CSDN的markdown编辑器。markdown左边使用的是textarea,右边展示区使用的则是div。下面是本文在我的markdown中的效果。词法解析实现md格式的解析使用的是marked库,代码部分的高亮使用的是highlight库,具体的配置如下:原创 2021-08-16 23:13:20 · 810 阅读 · 2 评论 -
react hook 入门
概述Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这里有关于hooks的优缺点讨论:谈谈react hooks的优缺点useState一个简单的点击按钮,数字增加的案例代码:import React, { useState } from 'react'export default () => { const [count, setcount] = useState(0) con原创 2021-07-04 16:20:08 · 101 阅读 · 0 评论 -
react 利用第三方包 配置相对路径
config-overrides文件配置(customize-cra)1、设置相对路径const { override, addWebpackAlias} = require('customize-cra');const path = require('path') module.exports = override( addWebpackAlias({ '@': path.resolve(__dirname, 'src'), 'app': path.resolve(__dir原创 2021-07-02 16:40:07 · 771 阅读 · 0 评论 -
对于 cookie localStorage 的理解
cookie最近在做期末项目,开发登录模块时,想到是否有某些工具可以保存用户的登录信息,于是便去网上搜索,发现了一种简单的机制,利用浏览器的cookie功能,保存登录信息。cookie (储存在用户本地终端上的数据)cookie 小甜饼。它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在Cookie中存入一段辨别用户身份的数据来实现的在react中的实现也非常简单/原创 2021-06-18 10:14:10 · 214 阅读 · 0 评论 -
ES6新特性总结
let1、不能被重复定义2、let不存在变量提升,而var存在varvar在块级作用域中,会将var的声明提前至前面,源代码中,其实真实的代码应该是let报错3、let拥有块级作用域let命令声明的变量只在其块级作用域中有效,就是{}中,在块级作用域内,若存在用let命令声明的变量,则所在区块对该变量形成封闭作用域,即该变量无视外部的同名变量。打印出1还有一个网上常说的例子当我们点击第一,第二,或者第三个块时,类型错误,就是没有找到 item[i] 这个变量,这是由于使原创 2021-05-26 23:10:42 · 398 阅读 · 2 评论