- 博客(142)
- 资源 (7)
- 收藏
- 关注
RSS订阅转载 redux-saga原理浅析
前言笔者最近在做一些后台项目，使用的是Ant Design Pro，其使用了redux-saga处理异步数据流，本文将对redux-saga的原理做一个简单的解读，并将实现一个简易版的redux-saga。Generator函数的自动流程控制在redux-saga中，saga是指一些长时操作，用generator函数表示。generator函数的强大之处在于其可以手动的暂停、恢复执行，且可以与函数体外进行数据交互，看如下例子：function *gen() { const a = yi
2021-08-07 17:21:04
677
原创 css模块化
CSS 发展我们在书写 css 的时候其实经历了以下几个阶段：手写源生 CSS 使用预处理器 Sass/Less 使用后处理器 PostCSS 使用 css modules 使用 css in js手写源生 CSS在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况：行内样式，即直接在 html 中的 style 属性里编写 css 代码。 内嵌样式，即在 html h 中的 style 标签内编写 class，提供给当前页面使用。 导入样式，即在内联样式
2021-08-05 23:05:50
683
原创 webpack知识点总结
webpack是什么？webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。webpack与gulp的区别是什么？webpack与gulp最大的区别就是在于打包过程上有所不同Grunt、Gulp 这类构建工具的打包过程是通过遍历源文件–>匹配规则–>打包，整个过程是基于文件流的打包方式且做不到按需加载。webpack 是从入口文件开始，把相关模块引入通过加载模块–&
2021-08-05 22:33:29
713
转载 想写好前端，先练好内功
前言封不平听在耳里，暗叫：“到这地步，我再能隐藏甚么？”仰天一声清啸，斜行而前，长剑横削直击，迅捷无比，未到五六招，剑势中已发出隐隐风声。他出剑越来越快，风声也是渐响，剑锋上所发出的一股劲气渐渐扩展，旁观众人只觉寒气逼人，脸上、手上被疾风刮得隐隐生疼，不由自主的后退，围在相斗两人身周的圈子渐渐扩大，竟有四五丈方圆。泰山派的一个道士在旁说道：“气宗的徒儿剑法高，剑宗的师叔内力强，这到底怎么搞的？华山派的气宗、剑宗，这可不是颠倒来玩了么？《笑傲江湖》中的“剑宗余孽”封不平本想仗着有嵩山派撑腰，一举夺
2021-08-05 11:15:36
144
转载 TypeScript 高级类型及用法
一、高级类型交叉类型(&)交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。 语法：T & U 其返回类型既要符合T类型也要符合U类型 用法：假设有两个接口：一个是Ant蚂蚁接口，一个是Fly飞翔接口，现在有一只会飞的蚂蚁： interfaceAnt{name:string;weight:number;}interfaceFl...
2021-08-02 16:57:21
453
转载 精读《React 18》
React 18 带来了几个非常实用的新特性，同时也没有额外的升级成本，值得仔细看一看。下面是几个关键信息： React 18 工作小组。利用社区讨论 React 18 发布节奏与新特性。 发布计划。目前还没有正式发布，不过@alpha版已经可用了，安装 alpha 版。 React 18 新特性介绍。虽然还未正式发布，但特性介绍可以先行，本周精读主要就是解读这篇文档。 精读总的来说，React 18 带来了 3 大新特性： Automatic batch...
2021-07-30 15:12:55
280
原创 vue——动态吸顶组件
因需要实现一个动态的吸顶组件，吸顶之后的目标对象根据滚动条的滚动位置动态增加，效果如下：组件代码如下：export default { created () { if (!this.handleScroll_mixin) { throw new Error("【scrollWebviewMixin】handleScroll_mixin 方法未定义") } window.addEventListener("scroll", this.handleScroll_mi
2021-07-09 09:19:04
793
原创 eslint用于忽略部分代码的校验的4种注释语句
01.关闭段落校验/* eslint-disable */some codesome code/* eslint-enable */02.关闭当前行校验some code // eslint-disable-line03.关闭下一行校验// eslint-disable-next-linesome code04.关闭整个文件校验/* eslint-disable */作者：mudssky链接：https://www.jianshu.com/p/4c49dbb91f34来源：
2021-06-22 16:02:36
3204
原创 鼠标悬停显示禁用图标
cursor:not-allowed;//是禁用的样式 一个圆圈中间一个斜杠//其中还有一个属性也是这个样式 cursor:no-drop;
2021-06-16 10:59:46
1895
原创 react——利用jszip实现文件批量下载并打包成zip文件
本文章主要记录利用jszip实现文件批量下载图片，文档。mp3，视频（MP4)等文件，一般而言前端实现下载功能一般都是通过a链，这在下载单个文件的场景很实用，但如果是批量下载很多个文件，同样也可以用a链接实现但是...
2021-06-15 17:13:35
3748
7
原创 vue-pdf安装之后，运行报错can not resolve ‘pdfjs-dist/es5/web/pdf_viewer‘
<template><div class="pdf" v-show="visible"> <div class="arrow"> <span class="xiaoicon icon" @click="visible=false;currentPage=0;pageCount=0"></span> <button @click.stop="scaleX">缩小</butt.
2021-06-13 15:28:35
6653
4
原创 vue——移动端在线预览pdf并能缩放（pdfh5）
最近接了一个需求需要在移动端预览pdf，并切要能缩放，百度发现大多推荐vue-pdf，但是vue-pdf这个包，安装之后运行报错，解决之后的实现效果不符合需求需要，而且，实现缩放功能的时候
2021-06-13 14:39:10
5312
4
原创 react —— 复制定制化带有标题的二维码
1. 生成二维码直接借助qrcode这个npm库即可生成二维码，但接到的需求要求是在鼠标点击的附近展示出二维码，点击弹窗里面的复制按钮即可赋值带标题的二维码图片到剪切板，实现效果如下图：...
2021-06-10 23:58:37
437
3
转载 js复制文本到剪切板中 支持换行
/** * 复制文本到剪切板中 * * @export * @param {*} value 需要复制的文本 * @param {*} cb 复制成功后的回调 */export function copy(value, cb) { // 动态创建 textarea 标签 const textarea = document.createElement('textarea') // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea.
2021-06-04 14:54:37
2176
原创 《Web全栈工程师的自我修养》——余果. 书摘
Web全栈工程师的自我修养——余果◆ 围绕商业目标要先看看有哪些问题需要解决，然后再补充您的工具箱。◆ 获得面试机会在著名开源项目中贡献代码，说明您有能力阅读和编写好的代码◆ 那个什么都懂的家伙技术是您的武器，成长就是好好打磨武器，而声望是您一生的积累。◆ 什么是缓存因为计算机系统中的缓存有这样几种功效。•存储频繁访问的数据（这里的数据是图书）。•内存缓存减少磁盘I/O（不用到6楼去找书）。•保存耗时的操作，以便下次使用（找书和整理书是耗时的操作）。◆ 知识体系不要迷信
2021-05-23 17:17:26
168
原创 《清醒思考的艺术》——罗尔夫·多贝里
清醒思考的艺术——罗尔夫·多贝里◆ 3 过度自信效应请对所有预测持怀疑态度，尤其是当这些预测是由所谓的专家们作出的。请你在筹划任何事情时都从悲观的角度出发，作最坏的打算。这样你才会真正有机会，更现实一些地判断形势。◆ 5 纠缠于沉没成本理性的决定意味着忽视已经投入的成本。你已经投资了什么并不重要，唯一重要的是现在的形势及你对未来的评估。◆ 7 确认偏误之一事实不因为被忽视而消失。”但我们恰恰是这么做的。人类最擅长这样过滤新信息，使现有解释仍然成立”。◆ 8 确认偏误之二请
2021-05-23 17:13:23
262
原创 《点亮自性之光》——克里希那穆提
点亮自性之光——克里希那穆提◆ 心的寂静在日常生活里，你能不能不跟人较量？试着去做做看，你才能发现个中的旨趣。你会觉得如释重负；除去不必要的负担之后，你就会拥有能量了。◆ 全心全意地倾听你有没有全心全意地注意过某种东西？你现在对眼前这位演讲者的话语，有没有真的在注意听？还是你正抱着比较之心在听，看看他说的话和你以前所吸收的知识是否相应？你是不是在根据自己的认知、倾向和偏好，在诠释这位演讲者的话语？如果是的话，那就不叫全心全意的听了，不是吗？如果你真的以你的全身、你的神经系统、眼、耳、心以及整个
2021-05-23 17:09:36
412
原创 《可复制的领导力》——樊登书摘
可复制的领导力：樊登的9堂商业课◆ 自序 我看出来了，你的短板就在领导力！持续不断地用同样的方法做同一件事情，却期望得到不同的结果，这就叫荒谬”管理就是最大限度地激发他人的善意学习可以改变自己。不会就学，学了就用，错了就改，就看谁快。就是怎么和人说话，怎么表扬人，怎么批评人，怎么布置工作，怎么开会，怎么创新…如果你做什么都希望随心所欲，不愿意刻意练习，你就永远生活在一个低水平重复的世界里。勤奋的懒惰”。对，不学习领导力的工具，就是勤奋的懒惰。◆ 第1章 80%的管理者
2021-05-23 17:05:00
1714
1
原创 《皮囊》——蔡崇达，读后感
《皮囊》——蔡崇达1.书摘◆ 序：生命中多添一盏明灯人生际遇的好与坏，关键往往在于生命里碰到甚么人，只要能对你有所启发，都是明灯。◆ 残疾该来的会来，不以这个形式，就会以那样的形式。但把事情简单归咎于我们无能为力的某个点，会让我们的内心可以稍微自我安慰一下，◆ 重症病房里的圣诞节原来在疾病帝国，也是用武力统治的，谁最残忍最血腥，谁就站在最高的位置。死亡不是疾病的目的，疾病是尽可能占有身体，用自己的秩序统治那身体。所以简单的死和简单的创伤都是最低级的疾病。◆ 天才文展很多
2021-05-23 16:47:30
412
1
原创 理财就是理生活读后感
理财就是理生活：6个受益一生的财富思维1. 书摘◆ 发现创造财富的秘密富人思维和穷人思维的根本区别在于：前者把钱当作工具，后者把钱当成目的。把钱当工具，你就是钱的主人；把钱当目的，你会一直被钱绑架。◆ 规划终生财富路径“时间最不偏私，给任何人都是二十四小时；时间也最偏私，给任何人都不是二十四小时。”◆ 重新认识时间少即是多。想什么都做好，往往都做不好。时间是稀缺资源，极其有限。◆ 跳出“穷人思维”我们需要的不是找一份可以依靠一辈子的工作，而是发掘自己可以依靠一辈子的学习力。
2021-05-23 16:33:23
392
转载 vue之better-scroll上拉加载，下拉刷新
上拉加载pullUpLoad选项，用来配置上拉加载功能。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机this.scroll = new this.$BScroll(this.$refs.middleWrapper, { click: true, scrollY: true, pullUpLoad: { threshold: -30 // 当
2021-05-20 16:38:00
336
转载 chrome浏览器多进程架构
背景这篇文章取材于Mariko Kosaka在 2018 年 9 月发表在 Chrome 开发者文档中的Inside look at modern web browser系列文章，同时结合我自己的理解。如果你对浏览器如何将代码转化成页面感兴趣，这正适合于你。CPU 与 GPUCPU 和 GPU 作为计算机中最重要的两个计算单元直接决定了计算性能。CPUCPU.pngCPU 是计算机的大脑，负责处理各种不同的任务。在过去，大多数 CPU 是单芯片的，核心被安置在同...
2021-04-18 23:10:42
807
原创 利用location或a标签解析URL字符串
1.如果url是直接获取地址栏上的，则可以直接使用location对象解析function geturlresult (){ var res ={ hostname: window.location.host, parameter: {}, pathname: window.location.pathname, port: window.location.port, protocol: window.location.protocol } if(
2021-04-02 20:59:47
408
原创 模拟babal-loader简单实现webpack打包获取所有模块依赖的核心原理
1.核心打包原理：1） 打包的主要流程如下：需要读到入口文件里面的内容。分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。根据AST语法树，生成浏览器能够运行的代码2. 常见的模块解析包@babel/parser：将获取到的模块内容 解析成AST（es6的）语法树@babel/traverse: 遍历AST语法树@babel/core @babel/preset-env：ES6的AST转化成ES5的AST核心代码如下：完整代码地址// 获取主入口文件con
2021-03-07 15:16:54
2673
1
原创 webpack——多页面打包通用方案
我们都知道在webpack的打包配置中，如果要配置webpack的打包入口，直接在配置文件exports的对象中的entry字段配置打包入口。这个entry字段可以接收对象也可以是数组但如果配置文件中的plugins插件数组中的htmlWebpackPlugins对象只有一个的话即打包出来的应用是单页面打包，如果是多个就是多页面打包假如你像实现一个多页面打包的通用配置，应该如何配置呢？目标：src目录下为动态的打包入口，即在src目录每新增一个文件夹，打包入口就多一个；每一个打包入口最后输
2021-02-27 23:09:15
533
转载 Webpack 核心模块 tapable 解析（转）
原文出自：https://www.pandashen.com前言Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是对前端项目实现自动化和优化必不可少的工具，Webpack 的 loader（加载器）和 plugin（插件）是由 Webpack 开发者和社区开发者共同贡献的，而目前又没有比较系统的开发文档，想写加载器和插件必须要懂 Webpack 的原理，即看懂 Webpack 的源码，tapable 则是 Webpack 依赖的核心库，可以说不懂 tapable 就...
2021-02-26 23:39:12
135
原创 如何通过webpack配置并部署属于自己的npm包
验证是否成功部署自己的npm包到npm网站上，只需要在部署后，在npm官网搜索自己的npm包名（即，package.json配置中的name字段内容）即可，效果如下，1.npm的功能支持以及达到的效果要求如下，1）实现大整数加法功能；2）实现压缩大打包和非压缩打包；3）支持amd,cjs,ems模块引入；2.创建项目并实现大整数加法功能，mkdir large-numbernpm init -ynpm i webpack webpack-cli -D1) 通..
2021-02-21 12:34:12
787
原创 当前端查询回来的数据过多时，通过事件循环机制分成多批任务，缓解页面卡顿问题
由于js单线程的特性，同一时刻只会执行一个任务，假如当前实质性任务时间过程，那么其他等待执行的任务就会一直等待，直到当前任务执行完毕，才接着执行下一个任务，在日常的开发中如果代码处理的数据量适中，一般不会有什么性能问题，但有一种场景：比如查询数据回来，进行处理然后渲染页面，这是如果接口查询回来的数据是1000条，那么没啥影响，如果是1000万条数据，那么就可能需要运行相当一段时间了。这样的代码运行时，页面上的其他代码都不能运行，这样使得我们的应用在前端交互上体验极其不友好。解决方法：..
2021-01-24 23:05:53
955
2
原创 防抖和节流的含义以及函数封装
防抖（debounce）所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。日常实例：比如搭电梯，电梯开门，过了一定时间会关门（这可以理解为一定时间内要执行函数），如果进来一个人，电梯会延迟关门的动作，在没到关门 的时间之前一直有人进来，就会一直延迟关门实现方式：1.利用闭包实现2.利用函数对象实现var delayFunc = (func,time) =>{ if(func.isSecond..
2021-01-20 23:08:47
266
原创 正则表达式核心要点
1.利用正则表达式(高亮匹配显示)，输入的内容跟已有的字符串中相同的部分高亮显示；2.正则里面的.代表除了换行之外的所有字符，而普通的.号就是代表.,如果需要匹配.的时候需要加转义；正则对象里面的特殊字符转义需要加\\，而在字面量中则值需要一个\3.字符含义/d 表示数值 /D 非数值/s 代表空白，/n 和空格都是空白 ； /S 代表非空白/w 代表字母，数字，下划线 /W 非字母，数字，下划线[]中括号里面包含的字符，表示只要匹配上中括号中的任意一个规则就是满足的..
2021-01-17 22:12:18
140
转载 TCP的三次握手与四次挥手理解及面试题
本文经过借鉴书籍资料、他人博客总结出的知识点，欢迎提问 序列号seq：占4个字节，用来标记数据段的顺序，TCP把连接中发送的所有数据字节都编上一个序号，第一个字节的编号由本地随机产生；给字节编上序号后，就给每一个报文段指派一个序号；序列号seq就是这个报文段中的第一个字节的数据编号。确认号ack：占4个字节，期待收到对方下一个报文段的第一个数据字节的序号；序列号表示报文段携带数据的第一个字节的编号；而确认号指的是期望接收到下一个字节的编号；因此当前报文段最后一个字节的编号+1即为...
2021-01-14 23:43:13
102
转载 理解useMemo与useCallback的使用场景
回顾在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于：调用setState，就会触发组件的重新渲染，无论前后的state是否不同 父组件更新，子组件也会自动的更新基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在不相等的时候调用setState；在shouldComponentUpdate中判断前后的props
2020-12-19 23:40:28
11815
6
原创 react——同步获取useState的最新状态值
新的react hook写法，官方默认setState方法移除了回调函数，但我们有时候的业务场景需要我们同步拿到变量的最新变化值，以便做下一步操作，这时我们可以封装一个hook通过结合useref通过回调函数来拿到最新状态值。代码如下：import {useEffect, useState, useRef} from "react"; function useCallbackState1 (state) { const cbRef = useRef(); const [da
2020-12-19 22:44:57
15993
9
原创 react 单词拼写校验小游戏
import React, { FC, useState, useEffect } from 'react';import { Form, Input, Button, Checkbox } from 'antd';import styles from './index.less';export const strs=[ "finssd dffio", "ggjhg jihuii", "hgh hjj uhkk", "kbkjbjk ioyu"];interface arr.
2020-12-06 23:58:46
165
原创 简单实现promise核心源码
class HD { static PENDING ="pending"; static FUFILLED = "fulfilled"; static RESJECT = "rejected"; constructor(executor){ this.status = HD.PENDING; this.value = null; this.callbacks =[]; //如果在executor的执行过程中出现错误，那么可以通过try-..
2020-12-06 23:53:47
125
原创 JS数组reduce()方法高级技巧
1.语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。callback （执行数组中每个值的函数，包含四个参数）1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））2、currentValue （数组中当前被处理的元素）3、i
2020-11-26 00:18:03
368
原创 echart——饼图
exportconstechartoption1=(yAxisdata:string[],seriesData:string[])=>{return{grid:{top:"0%",left:"3%",right:"4%",bottom:"2%",containLabel:true},xAxis:[{type:...
2020-11-21 17:49:34
297
原创 echart ——正负条形图
最近需要实现大致如图的图表效果，找了很多文章和官网配置说明最终版的配置如下：可以通过定义一个函数，传入要展示在图表的数据，返回最终的图标配置如下，exportconstechartoption1=(yAxisdata:string[],seriesData:string[])=>{return{grid:{top:"0%",left:"3%",right:"4%",bottom...
2020-11-21 17:37:48
2636
1
转载 图解 Promise 实现原理（一）—— 基础实现
摘要很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。图解 Promise 实现原理（一）—— 基础实现 图解 Promise 实现原理（二）—— Promise 链式调用 图解 Promise 实现原理（三）—— Promise 原型方法实现 图解 Promise 实现原理（四）—— Promise 静态方法实现前言本文适合对 Prom
2020-11-07 23:54:20
280
1
校园图书馆系统的设计与实现
2019-01-03
基于SSH的校园图书馆系统的设计与实现
2019-01-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人