qq_44318215的博客

原创 css在ios和安卓上的兼容问题（持续更新）

1、linear-gradient渐变在ios上会出现灰底原因：ios不支持transparent表示透明，改用rgba(255, 255, 255, 0)2、滚动条在安卓机上不显示// 手动写scrollbar代码&::-webkit-scrollbar { background-color: #fff;}&::-webkit-scrollbar-thumb { width: 8px; background: #E9E9E9; border-radius: 5

原创 解决setInterval和setTimeout越来越慢的问题

后端返回一个时间差，前端将其格式化为xx时xx分xx秒后展示在页面上，然后每隔1s刷新一下倒计时。但定时器不准确，会变慢，本文给出5种方案解决此问题。

原创 js和css会不会阻塞页面渲染？

link 标签是同步加载还是异步加载？ js 是同步加载还是异步加载？ 它们会阻塞页面的渲染吗？

原创 Jest测试框架入门之快照测试（附踩坑指南）

一、快照测试简介快照测试是用于确保某个组件的UI不会有意外的改变，与UI测试不同，快照测试不会对比样式文件，仅对比dom结构和节点参数。进行快照测试最简单的做法需要引入渲染器 react-test-renderer ：yarn add -D react-test-renderer接下来我们写一个时间组件，使用的框架为umi：// MyDate/index.tsximport { useState } from 'react';import styles from './index.less

原创 Jest测试框架入门之Mock

说到mock，大家第一个想到的肯定是项目里经常用来模拟接口返回值的 mockjs库 ，Jest里的mock有所不同，下面会举一些例子来分别讲一讲 jest.fn()、jest.mock()、jest.spyOn()。一、jest.fn()jest.fn() 用于创建一个函数，我们可以设置该函数的返回值、监听该函数的调用、改变函数的内部实现等等，我们通过 jest.fn() 创建的函数有一个特殊的 .mock 属性，该属性保存了每一次调用情况，例子：test('test jest.fn', () =&g

原创 Jest测试框架入门之四个钩子及分组

一、四个钩子Jest提供了四个钩子，分别是 beforeEach、afterEach、beforeAll、afterAll。这四个钩子很好理解，当你想在每一个 test 前后做同一件事情时，就用 beforeEach 和 afterEach；当你想在所有 test 前后做某一件事情时，就用 beforeAll 和 afterAll。举个例子：beforeAll(() => { console.log('beforeAll');})afterAll(() => { console

原创 Jest测试框架入门之匹配器与测试异步代码

一、匹配器1、对于一般的数字与字符串类型使用 toBetest('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3);});test('a + b to equal ab', () => { expect('a' + 'b').toBe('ab');});2、对于对象与数组类型使用 toEqual// 数组项需一一对应test('array is equal', () => { expect([1, 2

原创 前端单元测试相关概念及Jest测试框架入门

一、什么是单元测试在维基百科上搜索unit test会看到这段话：In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operat

原创 字符编码笔记：ASCII，Unicode 和 UTF-8

注：本文根据阮一峰老师的一篇文章所写，原文链接：点我 。旨在帮助大家了解编码方面的一些知识，如有错误，恳请指正。一、ASCII 码ASCII码划分为两个集合：128个字符的标准ASCII码（7位二进制编码）和附加的128个字符的扩展ASCII码（8位二进制编码）。电脑的最小数据存储单位是字节（Byte），1 Byte = 8 bit 。由于早期的电脑不太可靠，标准ASCII码的最高位（b7）就拿来用作奇偶校验位。奇校验规定：正确的代码一个字节中1的个数必须是奇数，若非奇数，则在最高位b7添1；偶校验规

原创 react中使用context实现爷孙组件通讯

情景：3个组件，A包含B，B包含C，A组件通过context向C传参代码实现如下，包含类组件写法、函数组件普通写法、函数组件hook写法import React, { Component, useContext } from 'react'import styles from './index.less'// 第一步，创建一个context容器对象const MyContext = React.createContext('')export default class A extends C

原创 umi使用mock

// 引入 Mockimport { Request, Response } from '@umijs/deps/compiled/express'import Mock from 'mockjs'// 定义数据类型export default { 'GET /api/tags': (req: Request, res: Response) => { res.send( Mock.mock({ // 3条数据 "info|3": [{

原创 taro+typescript+less踩坑指南

一、使用less module不生效的问题1、在config/index.js文件将cssModules的enable属性置为truecssModules: { enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true config: { namingPattern: 'module', // 转换模式，取值为 global/module generateScopedName:

原创 node接收不到fetch请求携带的参数的问题

注意：body-parser已经被弃用目前的解决方法：// node的app.jsapp.use(express.urlencoded({ extended: true }))app.use(express.json())// fetch请求的header一定要写明content-typeconst res = await fetch('http://xxx:3000/users/login', { method: 'POST', headers: { 'Content-Typ

原创 css中文本两端对齐，兼容安卓和ios

直接上代码：<div className={styles.root}> <div className="info-title">账户名</div> <div className="info-title">账号</div> <div className="info-title">支行地址</div> <div className="info-title">开户行号</div><

原创 TypeScript中使用for...in遍历对象属性会报错的解决办法

最近有一个用ts写的react项目，在里面使用for…in遍历对象属性时报了个错，类似下面这种：解决办法：在 tsconfig.json 文件中加入下面被注释掉的那一行代码，即把 抑制隐式索引错误 置为真"compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, // "suppressImpl

原创 使用umi快速搭建项目以及如何在umi中使用dva进行状态管理

一、创建umi应用1、新建umi应用并启动mkdir umi && cd umi yarn create @umijs/umi-appyarnyarn start2、umi应用的基本目录结构如下：✓表示创建时已经拥有此文件，✕表示该文件需要手动创建 .✓ ├── package.json ✓ ├── .umirc.ts. ✕ ├── .env✕ ├── dist✓ ├── mock✕ ├── public✓ └── src✓ ├── .umi

原创 require里无法使用变量的问题

在写react组件时遇到了一个问题：let imgUrl = '图片路径'//以下写法会报错<img src={require(imgUrl)}></img>require后只能跟字符串，或者用以下写法：let imgUrl = require('图片路径')<img src={imgUrl}></img>...

转载 JavaScript变量提升与函数提升的详细过程

文章写得很棒，转载过来分享给大家先来看两个栗子，下面的两段代码分别输出什么？// 代码段1function foo() { var a = 1; function a() {} console.log(a);}foo();// 代码段2function foo() { var a; function a() {} console.log(a);}foo();答案是：代码段1打印的是1，代码段2打印的是 a() 函数。为什么会这样呢？这就涉及到js中的变量提升

原创 使用promise异步加载图片

function loadImageAsync(url) { return new Promise((resolve, reject) => { let image = new Image(); image.src = url; image.onload = function () { resolve(image); }; image.onerror = function () {...

转载 Js不使用临时变量，交换两个整数的方法

方法一、加减减 a = a + b; b = a - b; a = a - b;方法二、异或运算（只能用于整数） a = a ^ b; b = a ^ b; a = a ^ b;原文链接

原创 圣杯布局和双飞翼布局的实现

圣杯布局： <div id="app"> <div class="center">中间</div> <div class="left">左边</div> <div class="right">右边</div> </div> #app { margin: 0 200px; } .center { float: left;

原创 CSS学习：单行或多行文本溢出显示省略号的方法

单行：white-space: nowrap;overflow: hidden;text-overflow: ellipsis;多行：overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

原创 手写bind、new、promise的all方法

Function.prototype.myBind = function(obj, ...args) { let _this = this return function() { _this.call(obj, ...args) } } function myNew(P, ...args) { let obj = new Object() P.call(obj, ...args) obj...

原创 防抖和节流是什么，在vue中如何实现

一、防抖和节流是什么相同点：都是为了减轻服务器压力的一种策略不同点：防抖是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。节流是指不论触发多少次事件，在n秒内只执行1次。二、防抖和节流的实现debounce为防抖函数throttle为节流函数 <div id="app"> <input type="text" @input="debounce"> <input type="text" @inp

原创 浅谈cookie、session和token

由于HTTP是无状态的协议，所以服务器想要识别是哪个用户发送的HTTP请求，就需要使用cookie、session或是token中的一种。1、cookiecookie是用户登录时由服务器设置的，保存在客户端的一段文本文件，用于记录用户信息，每次发送http请求时，在请求头上都会携带这个cookie，服务器再识别这个cookie，识别成功则返回数据，失败则重新邓登录。2、session如果cookie携带了一些敏感信息，被人恶意盗用的话，是非常不安全的，所以产生了session。session保存在服

原创 vue中slot的基本使用

一、slot基本使用Home.vue：<template> <div> <h2>哈哈哈</h2> <p>我是home开头</p> <slot><a href="#">我是默认值</a></slot> <p>我是home结尾</p> <br> </div></template>

原创 Flex布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; m

原创 vue-cli4项目结构整理

原创 vue操作dom的方法

首先明确一点，vue不推荐我们直接操作dom一是由于操作dom有较高的性能损耗；二是操作不属于自己的dom时，可能会出现不可预测的问题。但在某一些地方，操作dom更为方便时，我们可以使用如下方法：<h2 ref="title">哈哈哈</h2>this.$refs.title.style.color = '#f00'通过vue实例带有的ref属性来获取dom并修改其样式...

原创 vue组件绑定事件无效问题的解决方案

在开发的时候遇到了一个问题，给router-link标签添加点击事件后，却不触发该事件，经查阅资料后，解决办法如下：对于vue自定义的标签如< router-link >以及组件< my-component >都是会阻止事件触发的，若想要绑定事件，则需要使用native修饰符，如@click.native 将事件转化为原生事件。...

原创 css学习: 清除浮动的几种方式

一、为什么要清除浮动1、清除浮动的本质是清除浮动元素脱离文档流造成的影响2、如果父盒子未设置高度，则会导致父盒子塌陷；如果父盒子本身设置了高度，则不需要清除浮动3、清除浮动之后，父盒子便会根据浮动的子盒子自动检测高度，从而不再影响文档流了二、清除浮动的方法1、隔墙法在浮动元素后添加一个新标签，并设置clear: both:.clear { clear: both;}//注意：新标签必须为块级元素<div class="clear"></div>不推荐使用这

原创 axios的基本介绍及在vue中的模块化封装

一、什么是axios？1、axios是一个基于Promise的Http库，可以用在node.js环境和浏览器中，特性：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF2、可以通过向 axios 传递相关配置来创建请求 axios(config)，为方便起见，为所有支持的请求方法提供了别名：axios.request(conf

原创 Vuex的基本使用及总结(超详细)

一、什么是Vuex官网：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。通俗的来说，vuex是用于当某一状态需要在多个组件中共享，方便我们使用并追踪这些状态时使用。二、Vuex的基本结构1、安装vuex，创建store文件夹并新建

原创 vue-router的学习之路(总结)

一、vue-router的基本使用1、安装vue-router，创建router文件夹并新建index.js文件，基本结构如下：//导入import Vue from "vue"import Router from "vue-router"import Home from "../components/Home.vue"//使用该插件Vue.use(Router)//创建一个路由实例const routes = [ { //重定向设置默认路径 path: '',

原创 Vue中多个连续空白符只显示一个的解决办法

一、两个行内元素之间想显示多个空白符1、首先将pre标签的display属性设置为inline（pre标签中的特殊符号会被转换为符号实体）pre { display: inline;} 2、在任意两个行内元素中间插入pre标签输入多个空格即可二、一个字符串变量内想显示多个空白符1、设置一个class将white-space属性设置为pre.white-space { white-space: pre;}2、使用该类<p class="white-space">{

原创 JavaScript中对象数组的完全去重

题目：对一个对象数组进行去重，所有属性值相同才视为重复代码： let list = [ {id:1,name:"aa"}, {id:2,name:"bb"}, {id:3,name:"cc"}, {id:4,name:"dd"}, {id:1,name:"aa"}, {id:3,name:"cc"}, {id:5,name:"dd"}, {id:5,name:"ee"}, ]

原创 git命令看一这篇就够了

如何将本地项目添加到gitee仓库1、进入项目目录2、执行 git remote add origin + 仓库URLgit remote add origin https://gitee.com/个人空间地址/仓库路径.git3、执行 git push -u origin master4、若出现error，执行 git pull --rebase origin master ，之后再执行第3步的语句......

原创 JavaScript中创建对象的多种模式

function createPerson(name,sex,age){ let obj = new Object obj.name = name obj.sex = sex obj.age = age obj.sayName = function(){ alert(this.name) } return obj } // 字面量增强写法 // function createPerson(name...

原创 JavaScript中对象数组的去重以及深浅拷贝的理解

题目：给定一个对象数组，写一个函数对该数组去重，函数需带有两个参数，第一个参数为需要去重的数组，第二个参数是一个包含一个或多个对象属性的数组，根据指定的属性进行去重。做这道题之前我们先来回顾某些知识点：1、深拷贝和浅拷贝let arr1 = [1,2,3,4,5,6,7,8] let newArr = arr1 //浅拷贝let newArr = Object.assign(arr1)

原创 Vue中assets和static文件夹的区别

最近遇到了这样一个问题：将同一张图片分别放入assets文件夹和static文件夹中，通过src属性直接写入路径或通过动态绑定传入路径，结果是不太一样的。在动态绑定中，assets文件夹中的图片加载不出来，我们来看下面的例子： <img src="../assets/Benz.jpg" alt="加载失败No.1"> <img src="../../static/Benz.jpg" alt="加载失败No.2"><br> <img :src="cars