自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(47)

原创 react框架总结

前端框架(react)三大框架的区别:Angular带有比较强的排它性的React主张是函数式编程的理念,侵入性没有Angular那么强,主要因为它是软性侵入。Vue 渐进式的react与vue的对比 可以从redux和vuex中对比你如何看待react /什么是react react就是一个框架他相对于mvc来说只是其中的v他适用于开发数据不断变化的大型应用程序rea...

2018-11-23 14:15:31 3185

原创 总结ssh key配置及git的使用

首先使用git之前先在电脑上配置ssh key打开终端 mac快捷键command+空格输入终端 window快捷键window+r 输入cmdgit config user.name 查看用户名git config user.email 查看邮箱地址如果你要修改用户名和邮箱git config --global user.name "username" 修改用户名git ...

2018-08-17 14:18:18 2664 1

原创 script标签中async和defer的区别

script标签中没有 defer 或 async属性时,浏览器会立即加载并执行指定的脚本,也就是同步的方式从上而下加载并执行代码script中async和defer属性都为异步加载defer:可选脚本的加载过程和文档加载是异步发生的,脚本加载完会被延迟到整个页面都解析完毕后再运行async:可选脚本的加载过程和文档加载也是异步发生的,但脚本下载完成后会停止HTML解析,执行脚本,脚本解析完继续HTML解析标记为 async 的脚本并不保证按照指定它们的先后顺序执行如图:.

2020-09-14 16:35:38 12

原创 vscode连接服务器代码进行调试

1.方便起见配置ssh文件夹下面的config文件## 输入ss快捷进入服务器120.00.100.200:27017Host ss hostname 120.00.100.200 User root Port 27017 IdentityFile ~/.ssh/id_rsa2.vscode 的扩展中安装Remote Development套件3.使用插件连接服务器在编辑器里面按command+p 打开搜索框搜索并选择第一个>Rem..

2020-09-10 17:05:29 46

原创 pm2常用命令

1.安装npm install -g pm22.启动($代表终端输入的指令)$ pm2 start ./app.js # 启动$ pm2 start ./app.js --name my-api #新建进程3.重启$ pm2 restart app_name|app_id # 重启指定的进程$ pm2 restart all # 重启所有进程,相当stop+start$ pm2 reload all # 0秒停机重载进程 (用于不间断进程)4.查看$ pm2

2020-09-07 14:26:01 20

原创 Nodejs之Buffer数据转ReadSteam

当要处理的是一个文件时stream = fs.createReadStream('./content.txt')返回一个readStream(文件读取流,输入流)对象。(可读流)当处理的是一个Buffer时,用createReadStream就会报错fs.createReadStream不是用来做Buffer到ReadStream的转换的。虽然它接受一个Buffer,但Buffer里面放的仍然应该是一个文件路径。它只不过帮你做了文本解码。正确的Buffer转ReadStream的写

2020-09-07 11:29:38 53

原创 React16中render和hydrate的区别

render()ReactDOM.render(<App />, document.getElementById('root'));render话不多说就是渲染的意思,官方解释:在提供的container里渲染一个 React 元素,并返回对该组件的引用(或者针对无状态组件返回null)。 如果 React 元素之前已经在container里渲染过,这将会对其执行更新操作,并仅会在必要时改变 DOM 以映射最新的 React 元素 如果提供了可选的回调函数,该回调将在...

2020-09-02 20:33:13 177

原创 查看本地Node占用内存

查看内存node占用内存新建文件process.jsprocess.memoryUsage()终端执行process.js

2020-09-02 09:45:23 64

原创 mac用户丢失管理员身份

起因:试图编辑mac电脑默认用户资料,比如试图改用户名、试图改HOME路径之类的,有很高比率可能导致该用户丧失管理员权限。随后悲剧就开始了,所有需要管理员权限认证的地方,比如安装了一个新软件,在弹出的认证窗口中,无论如何输入用户名和密码,都无法授权通过。此时在系统设置->用户及用户组中,会发现该用户选项卡中“允许用户管理这台电脑”前面的勾选已经不见了。当然这时候因为无法授权修改用户权限,因此也无法重新勾选上这个选项。直接打开终端,虽然用没了管理员权限,但是在终端通过sudo命令还是可以执行roo

2020-08-21 09:44:29 41

原创 巧妙的通过promise.all节省接口的响应时间

在业务中难免会出现需要等待三四个接口返回之后再处理后续的代码,这个时候一般都会使用async/await来进行处理,那么就会有一个问题:先通过promise来模拟三个接口定时模拟每个接口需要花费的时间。 componentDidMount() { this.PageInit(); } PageInit = async () => { const oldTime = moment(); const fetch = async () => {

2020-08-06 10:45:45 71

原创 React Hooks使用实例

使用hooks注意事项:不能将 hooks 放在循环、条件语句或者嵌套方法内。react 是根据 hooks 出现顺序来记录对应状态的。 只在 function 组件和自定义 hooks 中使用 hooks。 命名规范: useState 返回数组的第二项以 set 开头(仅作为约定)。 自定义 hooks 以 use 开头(可被 lint 校验)。 React 中提供的 hooks: useState:setState useReducer

2020-07-22 16:41:42 148

原创 React、umi和dva之间的关系

前言react(https://react.docschina.org/)umi--路由配置(https://umijs.org/)dva--数据流方案(https://dvajs.com/guide/)Umi和Dva都是基于React的框架,Umi主要以路由为主,Dva主要管理数据流。Antd pro(https://pro.ant.design/docs/getting-started-cn)集成了umi、dva、antd的完整前端脚手架关于UmiJS框架umi是一个可插拔的企业

2020-07-22 10:33:09 930

原创 Taro小程序单位转化和无法使用全局样式

1.界面兼容设计稿及尺寸单位在 Taro 中尺寸单位建议使用px、百分比 %,Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度100px,那么尺寸书写就是100px,当转成微信小程序的时候,尺寸将默认转换为100rpx,当转成 H5 时将默认转换为以rem为单位的值。如果你希望部分px单位不被转换成rpx...

2020-07-21 13:22:27 138

原创 Web缓存策略

关于Web 缓存 Web 缓存是指一个 Web 资源(如 html 页面,图片,js,数据等)存在于 Web 服务器和客户端(浏览器)之间的副本。 缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的 URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。 Web 缓存的好处 减少网络延迟,加快页面打开速度 减少网络带宽消耗 降低服务器压力 HTTP 的缓存机制流程如图:缓存规则..

2020-07-21 10:48:42 43

原创 webpack的loader和plugin的区别

Loader用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖。loader可以将文件从不同的语言(如TypeScript)转换为JavaScript,或者将内联图像转换为dataURL。比如说:CSS-Loader,Style-Loader等。loader的使用很简单:在webpack.config.js中指定loader。module.rules可以指定多个loader,对项目中的各个loader有个全局概览。load.

2020-06-17 19:57:59 272

原创 前端路由、后端路由、react-router区别

后端路由:后端路由又可称之为服务器端路由,因为对于服务器来说,当接收到客户端发来的HTTP请求,就会根据所请求的相应URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。对于最简单的静态资源服务器,可以认为,所有URL的映射函数就是一个文件读取操作。对于动态资源,映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理,等等。然后根据这些读取的数据,在服务器端就使用相应的模板来对页面进行渲染后,再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍,比如京东页面就是个后端路由

2020-06-17 19:35:09 115

原创 react之高阶组件(HOC)

定义高阶组件(HOC)是 React 中用于重用组件逻辑的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式。具体来说,高阶组件是一个函数,能够接受一个组件并返回一个新的组件。理解: 一类特别的函数a. 情况 1: 参数是函数b. 情况 2: 返回是函数常见的高阶函数:a. 定时器设置函数b. 数组的 map()/filter()/reduce()/find()/bind()c. react-redux 中的 connec

2020-06-08 18:01:50 83

原创 react之纯函数、函数组件

纯函数 Pure Function定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数。特点1. 函数的返回结果只依赖于它的参数。let foo=(a, b)=>a+bfoo(1,2) //=32. 函数执行过程里面没有副作用。什么是副作用除了修改外部的变量,一个函数在执行过程中还有很多方式产生外部可观察的变化,比如说调用 DOM API 修改页面,或者你发送了 Ajax 请求,还有调用 window.reload 刷新浏览器,

2020-06-08 16:59:53 471

原创 关于Object.is()方法判断是否相等浅比较

在js中 基本数据类型用全等判断是否相等有不严谨的时候+0 === -0js中打印为true,我们期望是falseNaN === NaNjs中打印为false,我们期望是true所以在object.is()方法中解决解决+0 === -0 为true,我们可以通过: 1/(+0)结果为Infinity, 1/(-0)结果为-Infinity 而Infinity === -Infinity为false。所以当a === b时,且1 / x === 1 /..

2020-06-08 16:15:11 78

原创 nvm解决node各种版本存在不兼容现象

nvm是让你在同一台机器上安装和切换不同版本的node的工具安装:两种方式curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash 此时nvm就被安装在了/.nvm下啦命令:​​​​​​​nvm ls-remot

2020-05-28 16:16:56 204

原创 Reac里面封装单标签组件和双标签组件

双标签组件双标签封装通过this.props.children来获取标签内的元素,主要目的就是能嵌套标签// 封装好的组件 cm.jsimport React, { Component } from 'react';export default class App extends Component { constructor(props){ super(pr...

2020-03-10 10:04:02 339

原创 react里面点击按钮触发复制文本功能

onCopy:复制成果的回调text:复制的内容import {CopyToClipboard} from 'react-copy-to-clipboard'let text = {app_store_name:'咖啡厅',type:'游戏',remark:'备注'}let str = `APP名称:${text.app_store_name}\n任务类型:${text.typ...

2020-01-06 16:35:37 715

原创 巧妙的用switch代替多个if-else

今天看到某人写的代码一个校验写了一连串if-elseif(){ }else if(){}else if (){} else {}实在是看不下去了来了解一下switch case的使用当a+b=3时会执行提示‘3’,打印c当a+b=4时会执行提示‘4’,不打印c当a+b=5时代码停止不往下走当a+b=6时会执行提示'6',打印c,否则执行提示‘...

2020-01-03 16:42:22 354

原创 JS封装深拷贝函数

Object.assign只能深拷贝第一层的数据,如果有多层数据就会出现浅拷贝的情况// 处理深拷贝问题 一个对象里面可能会出现多种情况,let a = { a:1, b:[1,2,3,{a:1},[1,2]], c:{c1:1,c2:2,c3:{cc1:1}}, d:function(){ console.log(1) }, ...

2019-12-02 16:17:46 91 2

原创 linux服务器配置ssh免登入及修改机器名字

1.配置ssh首先登录linuxssh 用户名@ip例: ssh root@120.00.00.001然后输入密码即可之前先准备本地的sshkey如果本地已有文件,输入命令直接复制到粘贴板 之后command+v粘贴就行了:pbcopy < ~/.ssh/id_rsa.pub详细配置本地的mac请看https://blog.csdn.net/halat...

2019-11-11 21:31:36 113

原创 react项目里使用public的文件

这种写法如果是本地启动的话 找不到文件,打包完之后才会显示<img src={process.env.PUBLIC_URL+"xxxx"}/>如果是本地想使用public的文件 <img src={"/a.jpeg"}/>使用react-create-app构建的项目,当src文件夹下文件想引用src文件夹外文件因为官方限制问题会报以下错误。M...

2019-11-01 15:01:55 1845

原创 关于antd table 表头与表格不对齐问题

出现这个问题一般是设置了scroll属性解决方法:给每个表头设置width,然后最后一个可以不设置,antd会自适应最后一个。{ title:'任务类型', dataIndex:'type', key:'type', width:90,},如果还没解决怎么办?可能出现的问题是因为render的值长度大于了外面设置的width比如{ ...

2019-09-29 17:42:07 1127 2

原创 react里面手动写一个简单防抖函数

// onChange的时候调用handleChange 实现1000毫秒监听的防抖函数handle=()=>{ conosle.log('handle)}handleChange=()=>{ if(this.timer){ clearTimeout(this.timer) } this.timer = setTimeout((...

2019-09-29 17:21:11 401

原创 关于javascript模块化

模块组织随着javascript发展,从增强显示的脚本到解决一类问题的库,然后构建应用,一个有效的模块加载方案也就成为了必须的元素。 因为当想用一个语言构建一个大型应用,模块机制不可或缺。浏览器端运用最广泛的为 AMD 规范 服务端使用 CommonJS 规范 而ES6 Module 加载规范不远的将来将要统一前后端(我们要是采用ES6 加载规范)关于javascriptIDE 目前...

2019-05-05 11:14:42 102

原创 react—echarts实例

先模拟定义后端数据conststatistics =[{"hour":"00","click_num":2208,"submit_num":921,"device_num":31},{"hour":"01","click_num":1957,"submit_num":805,"device_num":28},{"hour":"02","click_num":113,"submit_nu...

2019-04-18 17:43:04 221

原创 Object常用的方法

Object.keys/Object.getOwnPropertyNamesObject.keys()方法与Object.getOwnPropertyNames方法很相似,一般用来遍历对象的(属性名,索引),并返回一个数组,该数组成员都是对象自身的(不是继承的),区别在于Object.keys方法只返回可枚举的属性,Object.getOwnPropertyNames方法还能返回不可枚举的属性...

2019-04-10 17:00:08 69

原创 ES6-set和map数据结构

set基本用法ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成Set数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}上面代码通...

2019-01-24 11:28:44 110

原创 ES6-class的基本语法及继承

通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return ...

2019-01-22 16:08:37 267

原创 ES6-Generator总结

Generator 函数的语法Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。形式上,Generator 函数...

2019-01-22 11:42:13 80

原创 Promise总结以及新特性

1.概念所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中...

2019-01-22 11:01:32 216

原创 手动使用webpack搭建react项目

 第一次尝试,把过程记录下来,后续遇到坑再来修改博客 首先第一步初始化项目先给项目创建一个文件夹 webpack-reactmkdir webpack-reactcd webpack-react然后创建一个src文件夹mkdir -p src初始化项目yarn init -y然后安装配置webpack首先安装(也可以用npm i 代替 yarn add...

2018-12-19 10:24:53 219

原创 JavaScript常用的Math方法、event对象、window对象总结及获取时间

min()和max()方法console.log(Math.min(2,4,3,6,3,8,0,1,3)); //最小值console.log(Math.max(4,7,8,3,1,9,6,0,3,2)); //最大值四舍五入// Math.ceil()执行向上舍入,即它总是将数值向上舍入为最接近的整数;// Math.floor()执行向下舍入,即它总是将数值向下舍入为最接近...

2018-12-18 11:24:58 153

原创 datatable总结常用api

Table.fnDraw(boolean); // 重绘方法 true会回到表格的初始状态,例如回到第一页,false只是重新加载当前页。fnClearTable(); // 清除表格fnAddData(data); // 添加数据fnGetData(index); // 根据提供的参数获取整个表,单个行或单个单元格的数据。fnDeleteRow(mTarget,fnCallBack,b...

2018-12-17 15:16:58 1069

转载 关于前端性能优化

浏览器的缓存机制浏览器缓存机制有两种,一种为强缓存,一种为协商缓存。对于强缓存,浏览器在第一次请求的时候,会直接下载资源,然后缓存在本地,第二次请求的时候,直接使用缓存。对于协商缓存,第一次请求缓存且保存缓存标识与时间,重复请求向服务器发送缓存标识和最后缓存时间,服务端进行校验,如果失效则使用缓存。协商缓存方案:Exprires:服务端的响应头,第一次请求的时候,告诉客户端,...

2018-12-07 11:08:05 151

原创 css3新特性

伪类1.动态伪类选择器:link 设置a对象在未被访问前的样式表属性:visited 设置a对象在其链接地址已被访问过时的样式表属性:hover 设置对象在其鼠标悬停时的样式表属性:active 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确...

2018-11-28 10:22:33 82

空空如也

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除