哆姆-CSDN博客

原创 esLint 常用配置及配置说明

在做多人协同开发的大型项目时，为保证项目的开发规范，都会使用一些代码格式的管理工具，eslint就是常用的一种管理工具，下面罗列一下常用的esLint配置，便于以后使用"no-alert": 0,//禁止使用alert confirm prompt"no-array-constructor": 2,//禁止使用数组构造器"no-bitwise": 0,//禁止使用按位运算符"no-caller": 1,//禁止使用arguments.caller或arguments.callee"no-catch

2021-09-23 11:23:44 1388

原创从add(1)(2)(3)到函数柯里化

add函数add(1)首先，让我们从最简单的函数add(1)开始function add(a){ console.log(++a)}add(1) // 2add(1)(2)这里我们使用柯里化的方法，两次传入参数（这里虽然闭包了，但是没有用到闭包的技术）// 使用柯里化的方法进行计算function add(a){ return function(b){ console.log(a+b) }}add(1)(2) // 3add(1)(2)(3)通过重新定义toStr

2021-07-29 10:49:11 367

原创原型链和继承

原型链每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型，如果指向的这个原型是另一个类型的实例，则这个原型本身有一个内部指针指向另一个原型，这样就串联起了一个原型链。默认原型默认情况下，所有引用类型都指向Object，因此，自定义类型可以继承toString()等原型方法原型与继承关系通常情况下，我们可以使用instanceof和ISPrototypeOf()方法来判断原型与实例的关系，只要原型链中包含这个原型，就会返回true原型链的问题1、原型中包含引用

2021-07-20 22:02:14 135

原创 Vue3 响应式原理

compositionApi和optionApi由来在Vue2中，使用optionApi的写法，相对于生命周期进行单独定义，这样的写法，虽然生命周期会明确，但是会造成代码结构混乱的问题。Vue3之后增加了compositionApi，取消了生命周期的单独定义，将方法统一定义在createApp的setup函数中，将功能相同的模块写在一起，方便后期进行代码优化。但是Vue3也支持optionApi的写法，让习惯Vue2的用户更为平滑的进行版本迁移。composition的优势复用性，可读性，数据来源

2021-07-19 15:17:09 330

原创 Vue3 程序初始化流程

初始化在vue3中，程序的初始化不再沿用vue2的new Vue()方法，而是使用了createApp。在createApp中发生了什么呢？改写的原因createApp是一个Vue中的工厂函数，以函数的方式进行导入和调用。而函数式的好处是1、消灭了原来挂载在Vue上的静态方法，变成实例方法，可以减少内存占用，便于tree-shaking，减小了打包体积；2、因为函数式和class装饰器对ts的支持好，使用函数的方式调用，可以更好的支持ts，提高类型支持3、根组件的api，如data要和子组件的a

2021-07-18 17:10:54 1459

原创迭代器和生成器

迭代器理解迭代循环是迭代机制的基础，1、可以指定循环次数及每次循环中需要执行的操作，2、每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的迭代器模式在数据结构中实现iterable接口，并可通过迭代器iterable进行消费，使其成为可迭代对象。可迭代协议iterable接口也称为可迭代协议，要求实现以下两种功能：1、支持迭代的自我识别能力；2、创建可迭代协议的对象的能力；这意味着需要暴露一个属性作为默认迭代器，且这个属性必须引用一个迭代器工厂函数，调用这个工厂函数

2021-07-17 12:09:00 54

原创 CSS 常用但容易忘的样式

1、文字超出展示省略号p{ /*单行*/ width:200px; /*设置宽度*/ overflow:hidder;/*超过隐藏*/ text-overflow:ellipsis;/*超过的文字将以...的形式展现，其他还有直接截断等*/ white-space:nowrap;/*强制不换行展示*/}p {/*多行*/ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;

2021-07-16 11:45:36 90

原创 Git常用指令

基础这部分使用idea的时候，idea会自动集成，可以进行可视化操作1、git version 查看版本号2、git configglobal -user.name “”global -user.email “”配置身份和地址3、git init 创建空白的新存储库4、git clone 在本地创建一个空白的存储库，并把远程存储库复制一份到本地存储库5、git add 将本地新的文件和文件夹添加到存储库中6、git commit 将更改添加到本地存储库7、git status 查看有多

2021-05-21 10:36:20 96

原创手写vue-router

vueRouter（引用Vue Router 的官方介绍）Vue Router 是 Vue 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为实现router插件注册组件实现install方法

2021-05-19 20:22:45 189

原创 React Router 如何实现 React 项目的路由守卫

React Router 如何实现 React 项目的路由守卫什么是路由守卫?怎样实现路由守卫什么是路由守卫?路由守卫就是在路由跳转时，进行相关的一些验证怎样实现路由守卫router 中实现路由守卫function guards(Cmp){ return () => { const { pathname } = useLoction(); const dispatch = useDispatch(); //判断用户是否登录 const { user } = useSelec

2021-05-13 20:21:24 661

原创 React类组件和函数组件的性能优化

React类组件和函数组件的性能优化为什么要做性能优化React 中，如果组件更新了，会携带它的子孙级组件一起进行更新虽然组件更新时，会有diff约束DOM更新，但组件更新时的 diff，也会消耗很多性能方法1、如果是类组件我们可以使用 shouldComponentUpdate 或者PureComponenthttps://reactjs.org/docs/react-api.html#reactpurecomponent.2、函数组件则可以使用 memohttps://reactjs

2021-05-13 20:06:40 415

原创 React逻辑复用的方案？

React逻辑复用的方案？HOChooksrender props三者之间的差异HOCHOC（高阶组件）类似于高阶函数，在使用高阶组件时，传入一个组件，会返回一个组件withRouter:这个高阶组件的作用是复用传递给视图组件路由信息这个逻辑使用方法function Acmp(props){ const { history,location,match } = props return <div>视图</div>} const Bcmp = withRouter(

2021-05-13 19:59:41 388

原创手动实现compose

手动实现compose什么是composecompose实现简单实现两个函数的compose实现多个compose（面向过程）什么是composecompose是函数式编程中的一种写法, 它把逻辑解耦在各个函数中,通过compose的方式组合函数, 将外部数据依次通过各个函数的加工,生成结果。有几点需要注意的：1、第一个函数是多元的（接受多个参数），后面的函数都是单元的（接受一个参数）2、执行顺序的自右向左的3、所有函数的执行都是同步的compose实现简单实现两个函数的composef(

2021-04-22 17:43:42 192

原创 JS实现add(1)(2)(3)(4)

方法一 var add = function (a) { var temp = function (b) { return add(a + b); } temp.toString = function () { return a; } return temp; }; add(3)(4)(5); // 12 add(3)(6)(9)(25); // 43方法二 function add(a) { var t

2021-04-22 17:07:12 2486

原创什么是纯函数？使用纯函数有什么好处？

什么是纯函数？纯函数有什么好处？什么是纯函数？返回结果只依赖其参数函数执行过程中没有副作用使用纯函数有什么好处？可缓存可测试并行处理什么是纯函数？返回结果只依赖其参数返回值只和函数参数有关，与外部无关。无论外部发生什么样的变化，函数的返回值都不会改变。代码如下：// 非纯函数返回值与a相关，无法预料const a = 1const foo = (b) => a + bfoo(2) // => 3// 纯函数返回结果只依赖于它的参数

2021-04-22 16:42:48 426

原创浏览器渲染机制

浏览器渲染机制浏览器的多线程GUI线程JS线程事件触发线程浏览器渲染主要步骤构建DOM树构建CSSOM规则树阻塞渲染构建渲染树渲染树布局渲染树绘制重绘和回流重绘回流浏览器的多线程GUI线程负责渲染浏览器界面，解析HTML,CSS,构建DOM树和RenderObject树，布局和绘制等。与JS线程互斥。JS线程例如V8引擎，负责解析JavaScript脚本，运行代码事件触发线程如onclick，ajax等，由事件触发，将需要执行的事件放到事件任务队列的队尾，等待JS引擎的处理。浏览器渲染主

2021-02-18 20:34:41 71

原创浏览器缓存机制

浏览器缓存机制缓存位置Service WorkerMemory CacheDisk CachePush Cache强缓存ExpiresCache-ControlExpires和Cache-Control对比协商缓存Last-Modified和If-Modified-SinceETag和If-None-Match两者之间对比思维导图使用浏览器的缓存是性能优化中简单高效的一种优化方式，合理的浏览器缓存策略可以减少浏览器的相应和减少向后端发送请求。缓存位置Service WorkerMemory Cach

2021-02-09 20:48:50 112

原创 ES6 Promise原理

ES6 Promise原理一、Promise是什么二、为什么会有Promise1、回调地狱 + 异步同步事件调用顺序带来的双重伤害2、回调事件的分离三、Promise的三种状态1、resolve2、reject3、pending四、then catch all race1、then2、catch3、all4、race五、基本用法六、实现Promise一、Promise是什么A promise is an object that may produce a singe value some time in

2021-02-07 20:46:37 3127

原创常见的网络攻击

常见的网络攻击一、前端（客户端）攻击1、XSS攻击1、攻击类型反射型XSS攻击持久型XSS攻击DOM XSS2、预防方法2、CSRF攻击防御方法cookie设置为HttpOnlytoken通过Referer识别二、后端（服务端）攻击1、SQL注入防御方法2、DNS Query Flood攻击3、CC攻击4、DDos漏洞一、前端（客户端）攻击前端攻击主要以跨站攻击为主，如1、XSS攻击XSS攻击即跨站点脚本攻击（Cross Site Script），它允许恶意web用户将代码植入到提供给其它用户使用的

2021-02-06 19:27:57 900 1

weixin_38099964的博客