- 博客(29)
- 收藏
- 关注
RSS订阅
原创 React 项目性能优化的一些方式
UI 更新需要昂贵的 DOM 操作，而 React 内部使用几种巧妙的技术以便最小化 DOM 操作次数。对于大部分应用而言，使用 React 时无需专门优化就已拥有高性能的用户界面。尽管如此，我们仍然有办法来加速React 应用。以下是一些常见的优化react 性能的方式。1：使用生产版本目前市场上比较流行的便是使用create-react-app 脚手架工具或者使用webpack打包来构建生产版本。具体使用需搜索create-react-app 脚手架打包，和webpack 打包。...
2021-01-06 13:40:02
888
1
原创 推送方案之 WebSocket
1. 推送技术常见的几种方案1.1 短连接轮询前端使用定时器，每间隔一段时间发送请求来获取数据是否更新，前端可以通过比较数据是否更新来判断是否需要更新页面，通常采取setInterval实现。这种方式最简单也是兼容性最高的。缺点：页面会出现‘假死’setInterval在等到每次EventLoop时，都要判断是否到指定时间，直到时间到再执行函数，一旦遇到页面有大量任务或者任务处理时间特别耗时的情况下，页面就会出现‘假死’现象，无法及时更新到最新的数据。多余的网络传输当客户端按固定频率向
2021-08-10 16:05:45
894
原创 JavaScript 异常类型
从根本上来说，异常就是一个数据结构，它存了异常发生时相关信息，譬如错误码、错误信息等。其中 message 属性是唯一一个能够保证所有浏览器都支持的属性，除此之外，IE、Firefox、Safari、Chrome 以及 Opera 都为事件对象添加了其它相关信息。譬如 IE 添加了与 message 属性完全相同的 description 属性，还添加了保存这内部错误数量的 number 属性。Firefox 添加了 fileName、lineNumber 和 stack（包含堆栈属性）。所以，在考
2021-03-09 11:58:44
170
原创 Proxy 和 Object.defineProperty 区别以及常见使用场景
在日常开发中，我们需要经常对对象进行对象层面和属性层面的很多操作，既然是操作，那么我们就希望能够具备对这些操作进行切面处理的能力，也即实现代理操作，那么应该怎么做呢？Object.defineProperty 简单介绍Object.defineProperty 是 ES5 中一个很重要的数据劫持的方法，它提供了存取器属性get、set，这让我们具备了代理一个对象的属性读写操作以进行切面处理的能力。但是这时候对于其它对对象操作行为的代理方案仍然没有官方的实现方案。Proxy 简单介绍Proxy
2021-03-09 11:31:20
694
原创 Yeomen 脚手架工具的使用-创建工程化项目
在全局安装yo $ npm install yo --global or$ yarn global add yo 安装对应的generator $ npm install generator-node --globalor $ yarn global add generator-node 通过yo 运行generator $ cd path/to/project-dir$ mkdir my-module$ yo node最后根据提示输入配置项目参数，就可以..
2021-02-25 23:56:16
120
原创 webpack+typeScript如何使用绝对路径
当我们在开发项目是，如果使用相对路径，那么就会出现类似如下的代码：import Button from '../../../../components/upload/Upload'很显然，这样的路径很长，如果组件层次很深，那么相对路径就会很长，因此这种情况下很有必要使用绝对路径。在wepack中，使用alias功能，可以使得我们使用绝对路径。webpack.config.js的相关配置如下：//webpack.config.jsmodule.exports = { //....
2021-01-20 10:44:16
1297
转载 SyntaxError: Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled
react项目中自己写了一个装饰器，运行的时候发现报错Support for the experimental syntax 'decorators-legacy' isn't currently enabled这是因为我们么有装支持装饰器的组件Support for the experimental syntax 'decorators-legacy' isn't currently enabled然后 npm run eject在package.json文件下找到bebel属...
2021-01-13 20:50:48
570
1
原创 xss基本介绍与防护
XSS基本介绍XSS是一种经常出现在web应用中的计算机安全漏洞，也是web中最主流的攻击方式。XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。XSS通过将精心构造的代码（JS）代码注入到网页中，并由浏览器解释运行这段JS 代码，以达到恶意攻击的效果。当用户访问被XSS 脚本注入的网页，XSS脚本就会被提取出来。浏览器就会解析这段XSS 代码，在客户端运行恶意的代码。XSS危害简单
2021-01-13 13:34:50
1221
原创 一个强大的管理异步数据请求的 Hook - useRequest
useRequest核心特性自动请求/手动请求 SWR(stale-while-revalidate) 缓存/预加载 屏幕聚焦重新请求 轮询 防抖 节流 并行请求 依赖请求 loading delay 分页 加载更多，数据恢复 + 滚动位置恢复 ......详细内容以及用法请查看aHooks 官方文档：https://ahooks.js.org/zh-CN/hooks/async...
2021-01-11 20:32:59
1063
原创 chrome 安装react-devtools
地址：https://github.com/facebook/react-devtools/tree/v3，直接download ZIP格式知道下载位置，解压到自己可以找见的目录下，进入到react-devtools-3目录，cnpm i一下安装一下依赖再进入到react-devtools-3\shells\chrome切换到chrome目录下，运行node build.js，当前目录下会生成build目录 这个build目录下的unpacked目录就是chrome中所需react...
2021-01-06 13:47:29
229
原创 axios请求GBK页面中文乱码解决方法
axios请求GBK页面中文乱码解决方法在react 的 axios 请求后台文件类型的时候出现如下错误这时候需要设置GBK转码。请求参数如下。1 responseType: 'blob',2 transformResponse: [function (data) {3 let reader = new FileReader();4 reader.readAs...
2020-07-04 15:07:53
1967
转载 2020年7个令人兴奋的JavaScript常用新特性总结(超实用)
一个ECMAScript标准的制作过程，包含了Stage 0到Stage 4 五个阶段，每个阶段提交至下一阶段都需要TC39审批通过。本文介绍这些新特性处于Stage 3 或者Stage 4 阶段，这意味着应该很快在浏览器和其他引擎中支持这些特性。一、类的私有变量最新提案之一是在类中添加私有变量的方法。我们将使用 # 符号表示类的私有变量。这样就不需要使用闭包来隐藏不想暴露给外界的私有变量。class Counter { #x = 0; #increment() { this.
2020-06-30 18:12:01
271
原创 React生命周期函数以及其常用应用场景
React生命周期先说一下react 生命周期的变动（目前react 最新版本是v16.4.2）:以V6.3为中间点，v16.3之后的版本最大的变动莫过于生命周期去掉了以下三个componentWillMount (render之前执行，只执行一次)componentWillReceivePropscomponentWillUpdate (每次更新，render之前执行)同时加了两个新的生命周期函数getDerivedStateFromPropsgetSnapshotB.
2020-05-13 19:23:57
290
原创 VsCode 使用less
1、安装node.js2、安装less npm install less -g正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消3、安装VS插件Easy LESS4、编辑保存.less文件，会在对应的目录下生成对应的.css文件5.在文件 首选项 设置 中搜索 settings.json 加入 配置相关代码如图这样配置可以...
2020-05-13 19:09:23
282
原创 react 创建组件的几种方式以及特点
1.无状态函数式组件它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到要state状态的操作。特点：1.1.组件不会被实例化，整体渲染性能得到提升因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。1.2.组件不能访问this对象无状态组件由于没有实例化过程，所以无法访问组件this中的对象，例如：this.ref、this.state等均..
2020-05-13 19:04:26
389
原创 React 基础环境搭建
react基础环境搭建大概分成以下四步：1：安装node.js --去官网(https://nodejs.org/zh-cn/)下载相应版本并选择默认安装，安装完成输入命令 node -v 检查是否成功2：安装create-react-app 脚手架 -- 在命令提示窗口下输入命令npm install -g create-react-app3：创建脚手架项目 --在合...
2020-04-19 23:56:00
104
原创 逻辑题 --检测8瓶试剂中的有毒试剂
题目：现在由8瓶试剂，其中有一瓶有毒，现在用小白鼠来检测出有毒的试剂，小白鼠注射之后一小时之内必死亡，现在需要在一小时之内找出这瓶有毒试剂，问最少需要多少只小白鼠。分析：这是一个计算机二进制的经典问题，首先从简单一点的入手1：假设只有2瓶试剂，其中一瓶有毒，那么是不是只需要一只小鼠就能检测出来了，将其中一瓶试剂注射给小鼠，如果小鼠死亡，那么此试剂有毒，反之，则另外一瓶有毒，用表格的形式表示...
2020-04-18 22:05:42
1229
原创 BOM 有哪些对象，分别都有哪些方法？
BOM简介BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。BOM具有的对象1、window对象 ，是JS的最顶层对象，其他的BOM对象都是win...
2020-04-17 22:10:40
5722
原创 中型企业前端面试 -- 那些年踩过的坑
最近面试了一家中型大概400多人的企业，在这里给大家分享一下我的历程和心得。一轮笔试：选择加填空题都是前端基础性的笔试题，包含一些计算机基础知识，html5，css3，ES6，正则表达式等；然后是两道编程题：第一题考的简单的一个算法，生成一个随机不重复数组，然后进行排序，这道题我用的set 去重 + 冒泡排序，基本没啥问题；第二题是一个对css 类添加事件代理的问题，使用d...
2020-04-17 00:13:50
317
原创 js 数组方法汇总
1.push() 入栈push()方法可以向数组后添加一个新的元素，并返回新数组的长度。末尾添加，返回长度，改变原数组var a = [1,2,3]var b = a.push(4)console.log(a) // [1,2,3,4]console.log(b) // 42.pop() 出栈pop() 用于删除并返回最后一个元素。尾部删除，返回被删除的元素，...
2020-04-15 22:04:08
91
原创 使用原生js请求ajax
原生js 请求ajax 内容一般分五步：1.创建一个XMLHttpRequest异步对象2.设置请求方式和请求地址3.接着，用send发送请求4.监听状态变化5.最后，接收返回的数据下面是案例：<!DOCTYPE html><html><head><meta charset="utf-8"><script&...
2020-04-14 21:16:33
113
原创 Git 常见面试题--来自灵魂的拷问
一：在git中，你如何还原已经push并公开的提交？方式一：删除或修复新提交的错误文件，并将其推送至远程存储库，这是修复错误的最自然方式。方式二：创建一个新的提交，撤销提交中所做的所有更改git revert <name of bad commit>二：git pull 和git fetch 有什么区别？git pull 命令从中央存储库提取特定分支的新更改或提交，...
2020-04-02 09:41:23
380
原创 GitFlow 开发流程
GitFlow 开发流程Gitflow 比前文讲的基于功能分支的开发流程要复杂的多，它更适合做大型的复杂项目它围绕项目发布流程定义了一个严格的分支模型，所有的开发分支都是围绕这个严格的分支模型进行。而这个模型约定了每个分支的角色，以及他们如何沟通。我们来看看Gitflow开发流程中几个约定的分支，以及他们各自承担的角色是怎样的。Master分支：用于存放线上版本代码，可以方便...
2020-03-31 17:24:18
108
原创 Git 常见应用场景及常出现的问题
git 常见应用场景一：git最基本的操作流程1.初始化创建远程仓库 git init --bare url2.初始化本地仓库，切换到需要初始化的本地仓库目录执行命令 git init3.将本地目录和远程目录关联起来，即增加Remote的仓库的url(需要为远程git repository起个名字，默认使用origin作为名字) git r...
2020-03-31 17:20:18
213
原创 js -- 立即执行函数
立即执行函数的多种写法： 1：(function(){}()) //w3c建议第一种 2： (function(){})() //其他写法小知识：只有表达式才能被执行符号执行 function test(){}()//报错 var test2 = function (){}() //正确 !functio...
2020-03-05 22:21:43
101
原创 js -- 闭包
当内部函数被保存到外部的时候会生成闭包，闭包会导致作用域链不释放，造成内存泄漏。应用：公有变量；缓存；封装，属性私有化；模块化开发，防止污染全局变量。...
2020-03-05 22:09:26
81
转载 CSS3新特性初步汇总
CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3新增了很多的属性，下面一起来分析一下新增的一些属性： 1.CSS3边框：border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border...
2020-02-26 16:26:16
78
原创 jquery ajax 跨域访问.net core Api
前端ajax前端想要跨域访问后台，首先想到的可能是jsonp 的传输格式，但是这样造成的问题是很多时候无法做到异步的效果。所以只需要在基础ajax json数据格式传输上设置允许跨域策略即可。添加内容如下：xhrFields: { withcredentials: true //允许跨域策略 }即可。直...
2019-11-05 20:39:10
886
原创 初步总结 .net 学习心得
引言经历了一两年的摸爬滚打，今天终于有幸成为了一名刚入行的程序员小白，今天在这里给大家分享一下我的.net 学习心得。现在我在以下几个方面分享一下我的学习心得。1.学习心态作为小白的我们，在java浪潮的冲击下，如何让我们这些想学习.net开发的童鞋们屹立不倒。首先，在我看来，调整自己的学习心态是首当其冲的，并且也是最重要的。学习心态可以从以下几个方面进行调整；1，明确...
2019-11-02 16:21:50
1316
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人