- 博客(31)
- 收藏
- 关注
RSS订阅翻译 使用Rollup,TypeScript,SCSS配置React组件库
想写一个React的组件库，但不知道该如何配置一个开发环境？这篇文章将告诉你答案
2023-01-04 17:45:09
779
原创 使用puppeteer获取网页信息
Puppeteer 是一个运行在Node端的浏览器，为我们提供了强大的功能，例如抓取页面数据，对页面进行截图等功能...
2022-11-21 10:58:17
2806
2
原创 在函数组件中，如何实现shouldComponentUpdate()
在函数组件中，我们该如何实现`class`组件才有的`shouldComponentUpdate()`生命周期的功能呢？
2022-08-04 17:37:48
1243
原创 更改MySQL的所有权限
GRANT ALL PRIVILEGES ON db_name.* TO 'user_name'@'%' identified by 'password' ;FLUSH PRIVILEGES; ALL: 赋予所有权限db_name: 数据库名称user_name： 用户名%: 能操作数据库的IP，（%，指所有IP都能操作）password：用户密码...
2022-02-08 17:07:10
691
原创 React之Context
前言React为我们提供了Context用于将数据进行广播，消费者只需使用特定的方法就能拿到广播的数据，不用再采用层层递传props的方式。如果组件之间需要共享数据，也可以采用Context的方式，如react-router中的Router组件：...render() { return ( <RouterContext.Provider ..
2021-09-25 16:55:54
116
原创 FormData多文件上传并同时添加其他数据
前言在做项目时，有一个接口要求上传文件的同时能携带其它数据，在这里使用的是FormData对象来进行操作。简单介绍一下这个对象。FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。(以上出自这里)单文件上传这里使用FormData的append()方法，该方法
2021-09-13 17:07:31
12082
6
原创 git 用法
前言别人上班，我摸鱼，别人加班，我摸鱼，然后就写出了这篇 Git 的简单使用教程。摸摸索索一个多月总算是完成了这篇 git 的学习笔记 ????， 还好最后还是坚持了下来，可能有些有问题，欢迎各位大佬指正。欢迎关注我的公众号, 微信搜索 「前端入坑手册」，大家一起学习呀????准备首先需要生成 ssh 秘钥，ssh-keygen -t rsa -C "你公司内部邮箱地址" ，如果成功，将会在~/.ssh文件夹下生成对应的私钥和公钥。ls复制id_rsa.pub文件的内容（如果是 Git
2021-08-21 16:03:28
294
原创 eslint 搭配 vscode 的简单使用
前言刚开始时，由于嫌麻烦，并没有安装eslint，最近在新的项目上使用了eslint再配合vscode的插件，真是爽的不要太爽。因此打算写一篇简单的食用说明来记录食用过程前期准备没啥好准备的，作为开发肯定是具备yarn和node的，编辑器使用的是微软的亲儿子vscode然后新建一个文件夹eslint-example，cd进入这个文件夹并初始化一个package.json初始化package.json命令$ yarn init -y文件结构- eslint-example - packag
2021-05-12 11:39:55
3490
1
原创 使用canal连接kafka
这篇主要是项目还原，目的是记录构建时遇到的各种奇葩坑，避免下次迷路。废话不多说，直接上手。默认已安装docker，docker-compose，nodejs，yarn，typescript首先根据 kafka-docker 这个官方的仓库下的docker-compose.yml复制一份到自己的项目中version: '2'services: zookeeper: image: wurstmeister/zookeeper ports: - "2181:2181
2021-04-20 16:49:30
1393
原创 this绑定规则
确定一个this具体引用的是谁首先查看是否使用new操作符调用，使用new操作符后，this绑定到这个新创建的对象实例上 。const bar = new fn()是否使用call， apply，bind，使用了这三个方法后，会将this显示绑定（硬绑定）到传入的第一个参数const bar = fn.call(obj)是否通过一个对象上下文来引用函数，如果是，则会将this隐式绑定到这个对象const bar = obj.fn()如果都不是，则使用默认绑定，绑定到win
2021-04-20 13:10:55
56
原创 kafka 报错 no leader
作为Producer向kafka发送消息时，报出错误There is no leader for this topic-partition as we are in the middle of a leadership election具体的原因不是很清楚，但找到了解决方式 issue ，根据这个issue下面的回答，做了一下修改：删除了原来的KAFKA_BROKER_ID: 1添加了KAFKA_AUTO_CREATE_TOPICS_ENABLE: true在启动docker-compose时
2021-04-15 15:22:54
2660
原创 创建对象和继承
通常我们都习惯性使用对象字面量的形式创建一个新对象。该对象是Object的实例。而如果想要创建其他类型的对象，可以自定义构造函数，再实例化对象。这里不讲解class方式创建的对象创建对象我们将会讲解几种不同方式来创建对象工厂模式function createObject() { const o = new Object() o.name = 'yan' o.age = 18 o.sayName = function () { return this.n
2021-04-14 23:32:27
116
原创 Map和WeakMap
Map和Set是ECMAScript6新添加的集合引用类型。MapMap可以用于存储键值对的数据。在ECMAScript6之前为了达到这种效果都是使用的Object对象。基本API可以通过new关键字和Map构造函数创建一个空的映射const stringKey = 'key1'const numberKey = 1const symbolKey = Symbol('key')//创建一个空的映射const map = new Map()//使用.size属性查看长度console.l
2021-04-10 23:08:47
115
原创 集合引用类型篇（二）
定型数组//创建一个12字节的缓冲const buf = new ArrayBuffer(12)//创建一个引用buf缓冲的Int32Arrayconst ints = new Int32Array(buf)console.log(ints) //Int32Array(3) [0, 0, 0]//length属性，打印长度console.log(ints.length) //3//与DataView一样，也有一个指向关联缓冲的引用console.log(ints.buffer) //Arr
2021-04-09 09:43:17
198
原创 集合引用类型篇（一）
Object显示创建Object的实例对象有两种方法，一种是new Object()来实例化一个对象，另一种是使用对象字面量形式在使用对象字面量表示法定义对象时，其实并没有调用Object()构造函数Array有几种方式可以创建数组，一种是数组字面量，一种是通过new关键字调用但不传递参数或者传递参数，也可以直接使用Array()创建，在ES6中新增了两个静态方法创建数组：Array.from和Array.oflet a = []let a1 = [1, 2,]let a2 = [, 1,
2021-04-06 23:26:56
316
1
原创 原始值包装类型
原始值包装类型ECMAScript提供了3种特殊的引用类型：Boolean, Number, String 。这些类型具有其他引用类型一样的特点，但也具有与各自原始值类型对应的特殊行为。Symbol虽然也是函数，但由于其不存在constructor，所以不能通过new操作符实例化对象。前言每当用到某个原始值的方法或属性时，其后台都会为这个原始值创建一个包装对象，从而暴露相应的属性和方法。let str = 'name'let s2 = str.sustring(1) 原始值不是对象，但是却能使
2021-04-01 23:54:40
126
原创 原始值和引用值
ECMAScript 变量可以包含两种不同类型的数据：原始值和引用值。原始值就是简单数据类型，引用值则是由多个值构成的对象原始值，引用值原始值包括：Undefined，Null，Boolean，Number，String，Symbol和BigInt (ES2020)引用值是保存在内存中的对象，即对象保存在堆中用来保存对象的变量其实只是保存了一个对象的引用，即地址对于原始值Boolean，Number和String都自带有一个包装对象let bool1 = truelet bool2 = n
2021-03-28 23:51:57
202
2
原创 操作符篇（二）
指数操作符ECMAScript 2017新增，使用两个**表示，相当于使用Math.pow()加性操作符即加法和减法操作符加法操作符如果有任一操作数是 NaN，则返回 NaN;如果是 Infinity 加 Infinity，则返回 Infinity;如果是-Infinity 加-Infinity，则返回-Infinity;如果是 Infinity 加-Infinity，则返回 NaN;如果是+0 加+0，则返回+0;如果是-0 加+0，则返回+0;如果是-0 加-0，则返回-0。不
2021-03-27 23:10:22
71
原创 操作符篇（一）
ECMAScript中的操作符是独特的，因为他们可用于各种值，包括字符串、数值、布尔值，甚至还有对象。一元操作符只操作一个值的操作符叫一元操作符。递增递减操作符递增递减操作符非常方便，但也有很大的误区let age = 12console.log(++age) //13 //前缀递增操作符console.log(--age) //12 //前缀递减操作符console.log(age++) //会打印什么？13？ 不对，还是12console.log(age) //13 没错，后缀++会
2021-03-26 22:56:12
66
原创 数据类型篇（三）
Symbol 类型Symbol（符号）是ES6新增的数据类型。Symbol是原始值，且实例是唯一的，不可变的Symbol的用途是确保对象属性使用唯一标识符，不会发生属性冲突的危险Symbol使用Symbol()函数进行初始化let sym = Symbol()typeof sym // symbol let sym1 = Symbol('symbol')let sym2 = Symbol('symbol')console.log(sym1 == sym2) //falseSymbol(
2021-03-24 22:16:21
129
原创 数据类型篇（二）
数据类型篇（二）ECMAScript数据类型包含简单数据类型（也称为原始类型）和复杂数据类型（对象）。其中简单数据类型包括：Undefined, Null, Boolean, Number, String, Symbol（ES6新增），复杂数据类型包括：Object。前一篇已经介绍过Undefined，Null，Boolean，Number，这一篇将会介绍String，Symbol，Object 。String 类型String类型表示零或多个16位Unicode字符序列。可以使用单引号（ ’ ），
2021-03-23 23:56:26
91
原创 数据类型篇（一）
ECMAScript数据类型包含简单数据类型（也称为原始类型）和复杂数据类型（对象）。其中简单数据类型包括：Undefined, Null, Boolean, Number, String, Symbol（ES6新增），复杂数据类型包括：Object。typeof 操作符typeof 操作符可以查看数据的类型，但有些可能不符合预期，例如null 和 functiontypeof undefined // "undefined"typeof null // "object" 注意，类型不是显示的'
2021-03-22 21:56:56
139
原创 var, let, const 声明变量详解
var 是ES6之前用来声明变量的关键字，而let和const是ES6之后的版本出现的。let和const是为了解决var带来的怪异行为。var 声明var声明的变量存在变量提升（hoist）function test() { console.log(a) var a = 10}test() //undefinedvar声明的变量会先将变量a提升到作用域的顶部（在这里是test函数作用域)，并初始化为undefined，然后等到执行var a = 10 才真正进行变量的赋值，其
2021-03-21 16:00:56
400
5
原创 docker: 构建并打包到Docker Hub
打包到仓库（Docker Hub)登录docker ：docker login --username=<your docker username> --password=<your docker password>$ sudo docker login --username=<your docker username> --password=<your docker password>WARNING! Using --password via th
2020-10-15 11:32:35
247
翻译 在原生JavaScript中创建不可变对象
在原生JavaScript中创建不可变对象译文连接JavaScript是一种灵活的语言，你可以重新定义任何内容。但是，当项目变得复杂时，我们会发现可变数据结构存在问题。当我们使用最新版本的JavaScript，这个问题就会变得不一样了。因为现在，我们能创建不可变的对象。我将会通过三种不同的方式一步一步的告诉你怎么去完成操作。等等，什么是不可变？对象的不可变性意味着一旦创建好这个对象，就不希望它发生任何改变，也就是让它变成只读类型。假设我们需要定义一个car对象，并在整个项目中使用它的属性去执行操作
2020-10-13 14:41:38
105
原创 koa2中的app.context.xxx与ctx.xxx以及Object.create
koa2 app.context当在使用koa2框架时，好奇为什么通过 app.context.xxx 添加的属性可以通过ctx.xxx 调用，于是乎看了下相关源码在application.js文件中，看到了构造函数中初始化部分代码如下：this.middleware = [];//用来存储中间件，也就是洋葱模型的核心this.context = Object.create(context);//实例化this.context对象this.request = Object.create(requ
2020-10-08 22:54:46
641
原创 JavaScript event loop
javascript 事件机制是单线程运行机制运行时将任务分为同步任务和异步任务异步任务又分为宏任务和微任务运行时又分为主线程和调用栈（执行栈）在运行时，首先将任务分为同步任务和异步任务，同步任务进入调用栈，并等待主线程依次执行。待调用栈执行完毕，清空调用栈。接着将宏任务放入入主线程。待宏任务执行完毕，清空宏任务队列，将微任务放入主线程，最后，所有的任务都执行完毕，清空微任务队列，再进行下一次循环。宏任务包括 setTimeout, setIntervals setImme..
2020-09-23 18:50:01
46
原创 ubuntu之windows访问samba服务器
sudo apt-get updatesudo apt install sambacd /etc/samba/修改配置文件之前最好先备份 sudo cp smb.conf bak_smb.conf修改配置文件 sudo vim smb.conf在vim命令行输入G跳转到文件末尾；在文件末尾添加：[show_share_filename]comment = My sharepat...
2020-03-01 17:37:43
374
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人