前端
文章平均质量分 80
香香鸡
pro
展开
-
奶奶都能轻松入门的 Puppeteer 教程
puppeteer官方中文文档Demo项目组成结构puppeteer 可以用于开启一个无界面的 chrom 浏览器(又称无头浏览器)进程,用代码实现操控浏览器的操作yarn add puppeteeryarn add puppeteer-corepuppeteer 的 API 仿造了浏览器的结构(透明部分表示这些浏览器结构再 puppeteer 中暂未实现:Browser新建实例使用 puppeteer.launch(options?) 来创建一个浏览器实例创建实例后,在页原创 2021-12-30 20:05:28 · 9349 阅读 · 0 评论 -
轻松入门正则表达式
正则表达式创建创建方式方式一:使用构造函数创建,语法为 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 · 265 阅读 · 0 评论 -
图解原型链,构造函数与继承的关系
原型链每一个函数拥有原型(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 · 340 阅读 · 0 评论 -
类型转换与类型比较的区别
数据转换在进行不同数据类型的操作时,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 · 107 阅读 · 0 评论 -
从零开始的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 · 4730 阅读 · 11 评论 -
react更改数据渲染技巧
如果有一个UI组件,通过传入的数据进行数据渲染,现在需要对特殊的一些数据做特殊展示,一般有两种做法:直接在UI组件上更改组件解构将数据处理好再传入UI组件,UI组件只负责数据渲染第二种做法的好处是不会使UI组件和数据产生强关联,但是也要保证UI组件处理数据是灵活的,如果展示数据类型恨死就无法做到了简单例子:在 jsx 中,react组件也是一种普通的数据格式,可以使用其他数据类型进行存储const data = { reactData: ( <div>原创 2021-03-23 00:36:06 · 814 阅读 · 0 评论 -
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 · 1448 阅读 · 0 评论 -
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 · 6116 阅读 · 0 评论 -
字节跳动面试:实现一个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 · 718 阅读 · 0 评论 -
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 · 7712 阅读 · 0 评论 -
JS概念性问题整合
文章目录JS概念进程和线程Event Loop同步和异步执行上下文global和window块级作用域变量提升和函数提升闭包this指向一般函数箭头函数特殊函数高阶函数回调函数原型链基础new继承类和构造函数的区别类的继承类的单例设计数据类型数组与对象SymbolSet特殊值比较对象简写结果存储在回调参数关键字 inproxy对象Promise对象async函数Generator函数副作用强引用与弱引用MapWeakMapJS概念进程和线程进程是资源分配最小单位,线程是程序执行的最小单位进程原创 2020-10-09 11:21:26 · 267 阅读 · 0 评论 -
JS编程性问题整合
文章目录JS编程包装类Classthis指向异常处理字符串的操作正则表达式语法方法Math方法操作数组操作对象更改this指向解构模板字符arguments和rest扩展运算符...深浅拷贝区别浅拷贝实现深拷贝实现防抖和节流防抖节流JS编程包装类基本数据类型String、Number、Boolean、Null、Undefined引用数据类型ObjectJS提供了三个包装类 通过这三个包装类可以将基本数据类型的数据转换为对象String() 可以将基本数据类型字符串转换为String对象原创 2020-10-09 11:12:03 · 307 阅读 · 0 评论 -
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 · 566 阅读 · 0 评论 -
原生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 · 819 阅读 · 0 评论 -
node中操作mongoDB
文章目录MongoDB数据库操作Schema和Model常用方法联结与populateexec和thenMongoDB需要引入mongodb模块var MongoClient = require('mongodb').MongoClient;// 或import mongoose from 'mongoose'数据库操作connect( )连接数据库,对数据库的操作均需要在该方法中的回调函数里执行// 连接数据库时,有些弃用的功能需要声明,不然会弹出警告(对功能没影响),如:原创 2020-10-09 10:50:51 · 772 阅读 · 0 评论 -
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 · 21413 阅读 · 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 · 726 阅读 · 0 评论 -
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 · 635 阅读 · 0 评论 -
redux的使用技巧
ReduxRedux在任何地方都可用,不只是运用于Reactredux用于state的管理,管理的是在整个网站各个地方都通用的state,但是不去管理那些只作用于组件自身的statenpm install redux -save作用:将特定的state属性全局向需要用到该state的组件传递,该state属性全局唯一(类似static属性),只能通过action进行修改,且修改后影响全局要点项目中所有的state都以一个对象树的形式存储在一个单一的store中只有触发action原创 2020-07-13 09:41:46 · 284 阅读 · 0 评论 -
类和函数中组件更新渲染的坑
在类组件每一次重新渲染时,会执行一遍 render() 内的代码在函数式组件每一次重新渲染时,会重新执行一遍函数组件内的所有代码且组件内声明的语句有一个特色:在不同的生命周期下,声明的同名变量在不同的声明周期下,在 react 看来是不同的变量如下面的例子代码:类组件和函数式都是同一个作用:更新的时候添加一个点击事件,通过更改鼠标坐标并点击更改state从而发生更新【添加事件函数addEventListener() 对于完全相等的事件函数不会多次添加】类组件的效果:每次更新时点击事件不会发生叠加原创 2020-06-20 21:37:30 · 1517 阅读 · 0 评论 -
常用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 · 2027 阅读 · 0 评论 -
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 · 879 阅读 · 0 评论 -
对象隐式转换问题: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 · 318 阅读 · 0 评论 -
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 · 250 阅读 · 0 评论 -
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 · 865 阅读 · 0 评论 -
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 · 310 阅读 · 0 评论 -
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 · 227 阅读 · 0 评论 -
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 · 309 阅读 · 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 · 1923 阅读 · 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 · 1813 阅读 · 0 评论 -
定位absolute和relative的区别
正常情况的div排序:<body> <style> #A { background-color:mediumpurple; height: 100px; } #B_Father { background-color:#a1afc9; ...原创 2020-05-06 12:13:16 · 428 阅读 · 0 评论