- 博客(45)
- 收藏
- 关注
RSS订阅原创 奶奶都能轻松入门的 Puppeteer 教程
puppeteer官方中文文档Demo项目组成结构puppeteer 可以用于开启一个无界面的 chrom 浏览器（又称无头浏览器）进程，用代码实现操控浏览器的操作yarn add puppeteeryarn add puppeteer-corepuppeteer 的 API 仿造了浏览器的结构（透明部分表示这些浏览器结构再 puppeteer 中暂未实现：Browser新建实例使用 puppeteer.launch(options?) 来创建一个浏览器实例创建实例后，在页
2021-12-30 20:05:28
10011
原创 零基础搭建海子姐直播通知QQ机器人
前言需求介绍最近有一个朋友天天蹲点看七海娜娜米的直播，身为友達的我实在是看不下去了，本着闲着没事干不如找点乐子玩的人生态度突然想整一个 QQ 机器人来通知海子姐的直播动态，一开播就把消息推送到群里，方便朋友及时上线充钱送礼本文特点本文主要用于简单介绍 QQ 机器人的搭建，所以一切从简，主要讲基本原理及实现功能，如果想深入了解请阅览官方文档文章面向群体：零基础群体、不想看官方文档患者、图个乐读者、脆脆鲨如果你也是受众群体之一的话，那就开始吧！！！环境准备敲代码敲代码主要需要两个东西：
2021-10-17 22:50:13
5612
3
原创 轻松入门正则表达式
正则表达式创建创建方式方式一：使用构造函数创建，语法为 new RegExp(正则表达式，匹配模式) ，该方法的特定是灵活，可以传递变量，但是使用累赘const str = '1234 abcd'let reg reg = new RegExp(/\d/, 'g')console.log(str.match(reg)) // [ '1', '2', '3', '4' ]const arg = '123'reg = new RegExp(arg, 'g')console.log
2021-07-09 18:56:41
328
原创 图解原型链，构造函数与继承的关系
原型链每一个函数拥有原型（prototype）属性，如果该函数充当构造函数去 new 实例，则会构成一条原型链，每个实例成员都可以使用原型上的属性和方法function Person() {}Person.prototype.say = function() { console.log('hello')}const jack = new Person()const marry = new Person()jack.say() // hellomarry.say() //
2021-06-11 15:20:47
438
原创 类型转换与类型比较的区别
数据转换在进行不同数据类型的操作时，js 会自动进行隐式转换// object与stringconst obj = {}const str = '[object Object]'console.log(obj == str) // true// string与booleanconsole.log(!!'abc') // trueconsole.log(!!'') // false// string与numberconsole.lo
2021-06-07 19:06:22
144
原创 webpack 配置 react-router BrowserRouter
如果使用 react-router-dom 来配置路由跳转，默认情况下只能使用 HashRouter，使用 BrowserRouter 时匹配 / 以外的路由会找不到服务而报 404 错误这是因为 react 服务是一个单页面应用，使用 BrowserRouter 模式会向浏览器请求指定的路由资源，如访问 xxx 路由相当于请求服务端的 ~/xxx 资源，但是服务端并没有配置该路由，因此会返回 404，webpack 中的解决思路是：如果匹配不到对应路由，都返回 index.html，然后通过 js 代
2021-05-21 19:06:50
1634
原创 从零开始的webpack5+react+typescript
Webpack配置简述说明：从0开始配置一套 react + typescript 的 webpack 配置（本次使用webpack5版本）参考：配置webpack（上）、配置webpack（下）补充：为了消除版本不同可能的产生的bug，在下文中下载第三包时补充了此项目所用的版本信息，不意味着一定要使用该版本特色：主要以实现核心功能为主初始化项目项目基本架构生成项目依赖文件 package.jsonyarn init -y添加 .gitignore可以使用 vscode 插件 gi
2021-04-26 23:23:10
5770
11
原创 react更改数据渲染技巧
如果有一个UI组件，通过传入的数据进行数据渲染，现在需要对特殊的一些数据做特殊展示，一般有两种做法：直接在UI组件上更改组件解构将数据处理好再传入UI组件，UI组件只负责数据渲染第二种做法的好处是不会使UI组件和数据产生强关联，但是也要保证UI组件处理数据是灵活的，如果展示数据类型恨死就无法做到了简单例子：在 jsx 中，react组件也是一种普通的数据格式，可以使用其他数据类型进行存储const data = { reactData: ( <div>
2021-03-23 00:36:06
908
原创 redux-form入门指南
redux-from参考博客初始配置首先要在 redux 中进行配置import { createStore, combineReducers } from 'redux'import { reducer } from 'redux-form'const rootReducer = combineReducers({ // ...其他的reducer form: reducer // redux-form中的key必须声明为form})const store
2021-01-24 22:33:33
1572
原创 Content-Type与表单提交数据类型
表单格式类型区别：https://juejin.cn/post/6844904149809627149MIME类型：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_typesMIME类型媒体类型（MIME类型），是一种标准，用来表示文档、文件或字节流的性质和格式，是互联网的一种定义的标准化浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理URL，因此Web服务器在响应头中添加正确的MIME类型非
2020-12-03 16:54:47
7676
原创 字节跳动面试：实现一个LazyMan函数
实现一个类，最终效果：可以链式调用sleep() 函数会阻塞后面的链式调用const lazyMan = new LazyMan('jack')lazyMan.eat('apple').sleep(5000).eat('hamburger').sleep(3000).eat('pear')/*最终结果： My named jack I am eatting apple I am sleeping... after 5000 ms I am eattin
2020-12-01 11:08:32
854
原创 【项目】react+node实现前后端小应用
简介参考仿写项目作者博客：https://juejin.im/post/5c6cda0ae51d457139114898在线项目地址：http://www.gegeda.online:3000/技术栈前端TypeScript（使 JS 成为强类型语言）React（当下最流行的前端框架）Axios（处理 HTTP 请求）Ant-Design（UI 框架）React-Router（处理页面路由）Redux（数据状态管理）Redux-Saga（处理异步 Action）后端Ko
2020-10-27 15:01:05
5044
原创 thunk及saga中间件使用指南大全
文章目录Redux中间件加载中间件redux-thunk原理使用action处理redux-saga基础配置异步调用创建Effectsputtakecall 和 fork辅助函数组合器代码设计思路超时自动取消高阶函数封装thunk和saga查看中间件状态redux-loggerredux-devtoolsRedux中间件一般使用中间件的原因都是为了处理异步操作（通常是指在action中执行ajax请求）异步action（因为要保证reducer的纯净，因此不能外调api，所以在action里处理）
2020-10-21 17:29:04
1115
原创 Redux技巧指南
Redux基础文章目录Redux基础要点storeactionreducers目录管理recat-redux运用思想组件交流Redux在任何地方都可用，不只是运用于Reactredux用于state的管理，管理的是在整个网站各个地方都通用的state，但是不去管理那些只作用于组件自身的statenpm install redux -save作用：将想要全局共享的公共数据（类似static数据）通过state进行保存，只能通过action进行修改，修改后影响全局要点项目中所有的state
2020-10-21 17:26:00
404
原创 TS使用技巧整合
TypeScript优势：程序更容易理解（如在函数传入参数的时候限制传入类型）效率更高更少的错误更好的包容性安装npm install -g typescript现在不需要额外下载：npm install -g typings 现在ts安装依赖包使用(@types/xxx)来安装而不用特地使用typings來安裝如：npm install --save @types/core-decorators就能把core-decorator声明d.ts文件下载，就不用安装typings
2020-10-09 16:25:49
8306
原创 JS概念性问题整合
文章目录JS概念进程和线程Event Loop同步和异步执行上下文global和window块级作用域变量提升和函数提升闭包this指向一般函数箭头函数特殊函数高阶函数回调函数原型链基础new继承类和构造函数的区别类的继承类的单例设计数据类型数组与对象SymbolSet特殊值比较对象简写结果存储在回调参数关键字 inproxy对象Promise对象async函数Generator函数副作用强引用与弱引用MapWeakMapJS概念进程和线程进程是资源分配最小单位，线程是程序执行的最小单位进程
2020-10-09 11:21:26
953
原创 JS编程性问题整合
文章目录JS编程包装类Classthis指向异常处理字符串的操作正则表达式语法方法Math方法操作数组操作对象更改this指向解构模板字符arguments和rest扩展运算符...深浅拷贝区别浅拷贝实现深拷贝实现防抖和节流防抖节流JS编程包装类基本数据类型String、Number、Boolean、Null、Undefined引用数据类型ObjectJS提供了三个包装类 通过这三个包装类可以将基本数据类型的数据转换为对象String() 可以将基本数据类型字符串转换为String对象
2020-10-09 11:12:03
905
原创 koa框架的使用技巧
文章目录Koa请求ContextAPI路由获取请求内容getpost动态路由中间件ejs模板获取请求数据静态资源认证机制CookieSession跨域处理JSONPCROSkoa处理跨域Koanpm install koa请求写的好的博客：https://www.jianshu.com/p/e6aec8bcdcf4ContextKoa Context 将节点的请求和响应对象封装到单个对象中，该对象为编写Web应用程序和API提供了许多有用的方法每个请求都会创建一个Context，并在中间件
2020-10-09 11:01:49
670
原创 原生nodeJS使用
NodeJS通用npm和yarnnpm一款JavaScript 包管理工具创建项目依赖package.json 存在package.json时执该命令可更新项目依赖 npm init --yse（不用yes时会需要手动配置）下载包 npm nuinstall +Module_name 本地安装(将安装包放在 ./node_modules 下) -S 在下载包时自动写入dependencies依赖 npm install module_name -S
2020-10-09 10:57:11
1110
原创 node中操作mongoDB
文章目录MongoDB数据库操作Schema和Model常用方法联结与populateexec和thenMongoDB需要引入mongodb模块var MongoClient = require('mongodb').MongoClient;// 或import mongoose from 'mongoose'数据库操作connect( )连接数据库，对数据库的操作均需要在该方法中的回调函数里执行// 连接数据库时，有些弃用的功能需要声明，不然会弹出警告(对功能没影响)，如：
2020-10-09 10:50:51
938
原创 【项目】基于koa实现的简易博客
初始化npm init -ytsc --init依赖包TSnpm install typescript -snpm install ts-node -snpm install @types/node -sKoa基础包koa本体包 npm install koa @types/koa -s koa路由包 npm install koa-router @types/koa-router -skoa中间件:用于获取提交数据 npm install koa-bodyparser
2020-10-09 10:32:14
1617
原创 TS中的!和?用法
!和?!用法用在赋值的内容后时，使null和undefined类型可以赋值给其他类型并通过编译let y:numbery = null // 无法通过编译y = undefined // 无法通过编译y = null!y = undefined!// 由于x是可选的，因此parma.x的类型为number | undefined，无法传递给number类型的y，因此需要用x!interface IDemo { x?: number}let y:numbercons
2020-09-22 16:10:10
22671
6
原创 setState中的坑
setState机制在构造函数里定义state，修改state时需要用到setState ( )，不可直接通过this.state去修改状态，这样子不会更新组件（在constructor函数中可用this.state去初始化）setState()可有两个参数，第一个参数可为对象或者方法，第二个参数可选，为一个回调函数// 对象形式this.setState({ state: xxx })// 函数形式：需要return一个对象//默认传进prevState和props形参 表示了
2020-09-17 17:29:46
806
原创 React组件更新优化
优化更新机制在React默认更新机制中，默认的是只要一个组件的state发生变化，则该组件的所有子组件都会触发更新机制，如下面代码：Root的state只与A与A_1有关，与A_2和B无关import React, { Component, Fragment } from 'react'class A extends Component { render() { console.log('A组件更新了') return ( <Fr
2020-09-16 16:57:44
716
原创 redux的使用技巧
ReduxRedux在任何地方都可用，不只是运用于Reactredux用于state的管理，管理的是在整个网站各个地方都通用的state，但是不去管理那些只作用于组件自身的statenpm install redux -save作用：将特定的state属性全局向需要用到该state的组件传递，该state属性全局唯一（类似static属性），只能通过action进行修改，且修改后影响全局要点项目中所有的state都以一个对象树的形式存储在一个单一的store中只有触发action
2020-07-13 09:41:46
382
原创 类和函数中组件更新渲染的坑
在类组件每一次重新渲染时，会执行一遍 render() 内的代码在函数式组件每一次重新渲染时，会重新执行一遍函数组件内的所有代码且组件内声明的语句有一个特色：在不同的生命周期下，声明的同名变量在不同的声明周期下，在 react 看来是不同的变量如下面的例子代码：类组件和函数式都是同一个作用：更新的时候添加一个点击事件，通过更改鼠标坐标并点击更改state从而发生更新【添加事件函数addEventListener() 对于完全相等的事件函数不会多次添加】类组件的效果：每次更新时点击事件不会发生叠加
2020-06-20 21:37:30
1631
原创 常用Hook的使用
HookHooks 是react 16.8版本新增的一项特性，可以在不编写class的情况下使用state以及其他的react特性useState用于引入类组件的state特性import React, {useState, useEffect} from 'react'export default function Counter() { // 使用解构接收useState()的值 const [count, setCount] = useState(0) //
2020-06-11 16:22:32
2236
原创 TypeScript简易使用
TypeScript优势：程序更容易理解（如在函数传入参数的时候限制传入类型）效率更高更少的错误更好的包容性安装使用npm install -g typescript可在cmd输入tsc 来查看是否安装成功，安装成功则有反应可通过tsc +ts文件名将ts文件编译成js文件要在vscode的run code中直接运行ts文件，需要全局安装ts-nodenpm install -g ts-node数据类型原始类型：BooleanNullUndefinedNumbe
2020-06-09 15:46:01
1497
原创 对象隐式转换问题：a==1&&a==2&&a==3
对象隐式转换问题当一个引用类型要去和一个值类型去做比较时，引用类型会尝试将自己转换为值类型，其中涉及到两个方法：Object.valueOf( )Object.toString( )首先会进行调用value.of方法，如果返回值仍不为值类型，则会调用toString方法const arr = [1,2,3]const fun = function() { console.log('this is a function') }const obj = { value: 1 }// 引用类型
2020-05-16 12:11:58
350
原创 ES6类的理解
构造函数和类ES5中函数定义类（构造函数）：function Foo(x,y) { this.x = x; this.y = y;}Foo.prototype.toString = function(){ console.log(this.x, this.y) }var foo = new Foo(1,2)foo.toString() // 1 2ES6中定义类：调用类的方法也就是调用原型（prototype）上的方法class Foo {
2020-05-15 09:39:49
1013
1
原创 this指向问题与技巧
this指向this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个最后调用它的对象一般的函数调用对象this指向Windowfunction a(){ var user = "lucy"; console.log(this.user); console.log(this); }a();//undefined//Windowwindow.a(); // 和直接执行a()完全一样//undef
2020-05-14 23:39:24
944
1
原创 JS中原型链继承的理解
先了解一下使用new关键字的过程中做了什么使用new操作符创建对象实例时发生的事情：创建一个新对象将构造函数的作用域赋给新对象（this指向该对象）执行构造函数的代码（因此构造函数中使用this声明的属性和方法会复制给新对象）返回新对象function Person() { this.name = 'lucy' const age = 12}const person = new Person()// 等同于const person = new Object()pe
2020-05-14 23:30:19
289
原创 ES6中类的this问题
类里面的共有属性和方法一定要加this使用const x = 1class Test { constructor() { this.x = 2 } foo(){ console.log(a) } foo_() { console.log(this.a) }}const test = new Test() test.foo_() // 2test.x = 3test.foo() // 1
2020-05-11 10:55:58
957
原创 Webpack基础使用
主要内容参考公开课Webpack基础webpack 是一个现代 JavaScript 应用程序的静态模块打包器，打包是为了大幅度降低项目文件的大小，方便请求传输，每当代码更新时，需要再次打包webpack打包过程：module→chunk→bundlemodule项目里写的代码文件都可以称为modulechunkmodule 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk文件假如有4个文件index.js、index.css、tool.j
2020-05-10 19:50:43
860
原创 React基础项目搭建
React基础项目搭建基本内容构建有Demo命名的件仅用于举例，可随意删改搭建好的模板git clone https://github.com/magezee/reactDemo.git然后进入项目 npm install 下载依赖所需配置npm包使用脚手架构建项目npx create-react-app project_name删除src目录下的所有文件，如有必要pu...
2020-05-07 14:07:29
447
原创 react-router技巧指南
React-routeryarn add react-router-dom基本使用配置只需在项目文件index.js下使用一次Router包住渲染根组件Router组件只用于最外层，提供两种路由方式BrowserRouterhttp://localhost:3000HashRouter访问url时会在后面默认带上一个#：http://localhost:3000/#/...
2020-05-07 12:04:03
674
1
原创 wangeditor（配合antd）的使用
简单介绍：wangeditor：轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器antd：UI框架使用（react）：npm install wangeditorimport React, { Component, createRef } from 'react'import E from 'wangeditor'class Edit extend...
2020-05-07 10:09:09
2124
1
原创 原型链理解
配图是网上找的原型链构造函数创建对象：function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin// Person 就是一个构造函数，我们使用 new 创建了一个实例对象 personprototype每个函数都有一个 pro...
2020-05-06 15:10:54
1884
原创 定位absolute和relative的区别
正常情况的div排序：<body> <style> #A { background-color:mediumpurple; height: 100px; } #B_Father { background-color:#a1afc9; ...
2020-05-06 12:13:16
487
原创 初步研究gatling脚本（6）
gatling的异步操作在gatling脚本中，之前提到的setUp方法是异步操作，这意味着同步操作的代码会在脚本执行前全部执行完毕import io.gatling.core.Predef._import io.gatling.http.Predef._class test extends Simulation{ val httpProtocol = http.baseUrl(...
2020-01-03 15:45:11
303
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人