自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 收藏
  • 关注

原创 单元测试

这里写自定义目录标题什么是单元测试:为什么现在没写单测:为什么要写单元测试:什么时候写单元测试:哪里写单元测试:Component:HooksUtils/HelpersReduxActionReducer怎么做unit实践覆盖率语句覆盖(Statement Coverage)判定覆盖 `它度量程序中每一个判定的分支是否都被测试到了。`条件覆盖 `它度量判定中的每个子表达式结果true和false是否被测试到了。条件覆盖针对判断语句里面案例的取值都要去一次,不考虑条件的取值。`路径覆盖 `它度量了是否函数

2021-05-10 14:55:09 161

原创 Unit Testing

What is unit testingA unit is a unit that bears a single responsibility in the software. A function, a file, a class, and a module can all be called a unit.The unit test is to test the correctness of the “minimum unit” of the software design to check wh

2021-05-07 17:37:51 393

原创 算法学习准备

精通一个领域:chunk it up 切碎知识点deliberate practicing 刻意联系、过遍数(五遍刷题法)Feedback 反馈 => 主动式反馈(),被动式反馈即时反馈主动式反馈(自己去找),高手代码,直播等被动式反馈 高手指点, code review。单个题目切题四件套:clarification 确定题目Possible solutions 尽可能多种解法过一遍,比较不同的方法的时间和空间复杂度compareoptimalcoding

2021-03-24 22:24:12 104

原创 测试记录

在React 的框架中,会遇到别名设置的情况,这时候做测试,会出现找不到模块jest.config.jsconst path = require('path');module.exports = { rootDir: path.join(__dirname, 'src'), moduleNameMapper: { '@/(.*)$': '<rootDir>/$1', },};...

2021-02-02 16:05:15 149

原创 React 常见面试题

hooks 和 class 的区别// hoos 更容易复用代码,代码量更少// hooks 响应式的 useEffect,如果依赖不正确,会被意外的触发// hooks 状态不同步,由于是闭包,所以有异步操作的时候,经常会碰到异步回调的变量引用是之前的// 复杂逻辑使用class,后期更容易维护import React, { useState, useRef, useEffect } from "react";​import React, { useState } from "react";

2021-01-30 10:58:25 82

原创 手写代码

/* * @Author: Mr.pz * @Date: 2021-01-29 15:02:35 * @Last Modified by: Mr.pz * @Last Modified time: 2021-01-30 10:07:17 * 手写代码有一个很重要的步骤,是先想你要实现什么,先把参数和思路理清 */// 手写 wait(sleep)function wait(time, msg) { return new Promise((res) => { setTime

2021-01-30 10:13:16 396

原创 写一个离线页面

if('serviceWorker' in navigator){ window.addEventListener('load', ()=>{ navigator.serviceWorker.register('./service-worker.js') .then((reg) => console.log('success', reg.scope)) .catch((err)=>console.log('failure:', err)); })

2021-01-29 13:46:01 197

原创 性能优化

度量标准:首次有效绘制首屏渲染时间重要文件预算小于170kb编码优化普通代码优化React代码优化Vue代码优化打包优化构建优化:dll 预编译Tree-shaking动态模块缓存文件搜索范围nginx 优化代码风格优化HTML 文档结构层次尽量少,最好不深于6层。减少DOM查找动画不在视线范围尽量停止资源优化图片压缩响应式图片其他优化CDN优化分析工具,方法...

2021-01-29 11:44:03 339 1

原创 前端安全知识积累

XSS(Cross Site Scripting) 攻击: 参考文章存储型:黑客在提交表单的时候,将 提交。下次其他用户再访问到这个表单内容的时候,黑客就可以获取到这个cookie,发起攻击 解决:转义 <script src='xxx'></script> -> &lt;scriptscr='xxx'&gt;&lt;/script&gt;。 使用 HttpOnly 属性,避免js操作cookie反射型:反射型与存储型不同的是,它需要诱导

2021-01-21 09:43:44 106

原创 虚拟DOM 和 diff 算法的简单理解

为何必须引用ReactJSX是React.createElement(component, props, …children)方法的语法糖。自定义的React组件为何必须大写如果是小写的话就会被当做一个字符串传入<app>APP</app> => React.createElement('app',null,'APP')<APP>APP</APP> => React.createElement(APP,null,'APP')..

2021-01-18 16:07:10 165

原创 在React 中如何做到拦截用户操作

在React 中如何做到拦截用户操作用户刷新,关闭当前tab页,关闭浏览器触发以下事件需要注意的是,这个事件监听,需要用户在浏览器有操作,否则不会生效 useEffect(() => { const listener = (ev: any) => { ev.preventDefault(); ev.returnValue = '离开咯'; }; window.addEventListener('beforeunload', listener)

2021-01-13 14:39:06 503

原创 redux react-redux redux-saga redux-thunk dva

redux为什么出现:React 有 props 和 state ,React 没有数据向上回溯的能力,唯一的方法是提升state到公用组件当中,子组件触发父组件的回调修改state。为了更好的管理state状态,引入了专业的React顶层state分发给所有React 应用三大原则:单一数据源: 整个应用的state存储在一棵 object tree 中,并且这个object tree 只存在于唯一一个store中state是只读的:唯一改变state的就是action,使用纯函数来执行修改:

2021-01-05 10:04:44 128

原创 useReducer 和 useContext的简单应用

context.jsimport React, { createContext, useContext, useReducer } from 'react';// 引入默认配置import { reducer, defaultState } from './store';export const StateContext = createContext({});export const MutationContext = createContext({});export const Con

2021-01-04 13:21:11 262

原创 前端简单的日志系统

使用npm:worker-loader,dexie,ali-oss监听console,并做本地存储创建一个浏览器DBimport Dexie from 'dexie';const db = new Dexie('dbname');db.version(1).stores({ logs: 'content',});export default db;创建一个 log.workerimport db from './db';const ctx: DedicatedWorke.

2021-01-04 11:41:46 972

原创 前端面试题之CSS

居中的方法动画

2020-12-31 11:37:06 69 1

原创 前端面试题之手写代码

手写ajaxdebounce&throttlenewapply,call,bind

2020-12-31 11:34:27 199

原创 vue 常见面试题

React 手动挡,更加灵活,更偏向于心智模型Vue 自动挡,一套工具链单页面网站优缺点不利于SEO初次加载耗时相对较多Vue 是渐进式框架的理解Vue只提供两个最核心的组件系统和数据绑定,其他周边都是围绕vue.js 去开发的什么是MVVMMVVM 是一种设计思想M-Model 代表数据模型V-View 代表UI组件VM-ViewModel 通过双向数据绑定把View和Model连接起来,View和Model之间的同步工作完全自动的,无需认为干涉,开发者只需要关注业务逻辑V

2020-12-29 16:42:48 345

原创 前端人的前端CI/CD

安装宝塔宝塔Linux面板是提升运维效率的服务器管理软件。以root身份去执行以下操作sudo su - root可以快速搭建网站,WordPress等。安装docker遇到的问题docker pull 太慢https://www.runoob.com/docker/docker-mirror-acceleration.htmlhttps://www.cnblogs.com/BillyYoung/p/11113914.htmlcurl -fsSL https://get.docker.

2020-12-21 20:51:25 644

原创 前端使用websocket

创建一个这里需要注意的是协议是 http对应 ws:// https对应wss:// const ws = new WebSocket("ws://xxx.com"); ws.onopen = function(evt) { console.log('Connection open ...'); ws.send('Hello WebSockets!'); }; ws.onmessage = evt => { console.log('Received Message:

2020-11-30 20:06:44 1204

原创 ECMAScript流水账

目录作用域:最佳实践,不用var解构模板字符串参数默认值,严格等于undefined...箭头函数,没有自己的thisProxyReflect:(统一提供一套用于操作对象的方法)Promise TODOclass 类 TODO 与 new Obj() 的区别Set 数据结构:最常用来数组去重。。。。Map 数据结构Symbolfor ... of (iterable接口)迭代器的意义:对外提供统一遍历接口生成器 GeneratorEsm..

2020-11-30 19:17:57 97

原创 大大大前端

目录刻意练习,反复记忆学习状态刻意练习,反复记忆中间层(BFF) 多客户端 web. app .桌面端应用 传统技术的深入学习状态按照学习计划,夯实每个细节 整理自己的笔记,记录学习重点 将笔记内容细化、总结、消化 按照要求完成对应的实践和练习 坚持写博客,坚持分享...

2020-11-30 19:06:22 59

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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