白猫儿-CSDN博客

原创 Vue 组件通信的方式

前言首先要了解的是，组件通信的几种情况：父子组件通信，隔代组件通信（父孙组件通信），兄弟组件通信。通信方式props 和 $emit适用于父子组件通信props 是从父组件向子组件传递数据，$emit 是从子组件向父组件传递数据，这是 Vue 组件通信的基础。<template> <div> <child :value="text" @input="handleValue"></child&

2021-03-08 18:25:32 203

原创 ES6大合集

let 与 constvar 和 let 区别var 和 let 都是用来声明变量，但是两者有很大的区别let 变量不能被重复声明// 使用 letlet star;let star;报出：let star; ^SyntaxError: Identifier 'star' has already been declared // 语法错误// 使用 varvar star; var star;// 将不会报出语法错误let 拥有块级作用域，也称’暂时性死区

2021-03-08 18:20:55 3731 6

原创繁杂的数组 API

JavaScript 数组的API在开发过程中尤为重要。数组的方法分为，改变自身的数组方法，不改变自身的数组方法，以及遍历数组的方法。创建数组的方法数组的构造器 Array// 对象字面量的写法const arr1 = []// Array 构造器方法const arr2 = Array(5) // [empty*5] 创建一个数组长度为5的数组const arr3 = Array(1, 2, 3) // [1, 2, 3]ES6 新增的构造方法：Array.of 和 Array.

2021-03-08 18:18:30 118

原创 TypeScript 面向对象编程（类接口与泛型）

面向对象TypeScript 是面向对象类的编程。什么是面向对象呢？简而言之，就是程序中所有的操作，都是通过对象来完成的。计算机程序本质是对现实事物的抽象。一个人，一辆车，一只狗，这些都是对象，而这些对象发出的动作就是对象的方法，某些特征就是对象的属性。比如一个人，他的身高，长相，姓名，年龄等这些在对象中都是他的属性，而他发出的动作，走，跑，说话等这些在对象中都是他的方法。类类是什么？类其实就是对象的模型，通过类可以来创建对象。对象的属性和方法，要在类中明示的表示出来。下面定义一个简单的类：

2021-01-18 17:43:08 315 1

原创 TypeScript的类接口与泛型

面向对象TypeScript 是面向对象类的编程。什么是面向对象呢？简而言之，就是程序中所有的操作，都是通过对象来完成的。计算机程序本质是对现实事物的抽象。一个人，一辆车，一只狗，这些都是对象，而这些对象发出的动作就是对象的方法，某些特征就是对象的属性。比如一个人，他的身高，长相，姓名，年龄等这些在对象中都是他的属性，而他发出的动作，走，跑，说话等这些在对象中都是他的方法。类类是什么？类其实就是对象的模型，通过类可以来创建对象。对象的属性和方法，要在类中明示的表示出来。下面定义一个简单的类：

2021-01-14 19:50:06 2877 1

原创 React 性能优化

React 性能优化React 应用也是前端应用，前端项目普适的性能优化手段，比如资源加载过程中的优化、减少重绘与回流、服务端渲染、启用 CDN 等，这些手段对于 React 来说也是同样奏效的。但是 React 区别于传统的前端项目特点就是以组件的形式来组织代码，React 允许我们把一个大的 UI 界面，拆分出可复用的代码片段（也就是组件），可以对每一部分的代码片段进行独立构思。因此，React 组件有一些特色的性能优化思路。接下来，我们开始讲解 React 性能优化的思路！React 组件性能

2020-12-31 14:23:06 244 1

原创移动端触摸事件事件防误触以及 1物理像素问题

移动端触摸事件事件防误触以及 1物理像素问题移动端的主要三个事件touchstart touchmove touchend 分别对用 PC 端事件的 mousedowm mousemove mouseup移动端中有很多的默认事件比如长按某个文本时，能够选中复制。这样对于很多业务是不符合逻辑的，因此我们先来阻止默认事件。<script> // 阻止移动端默认事件 window.onload = function () { document.add

2020-12-25 14:37:02 485

原创移动端 viewport 适配

移动端 viewport 适配为什么要是用 viewport 做适配呢？目的就是为了，将所有设备布局视口的宽度调整为设计图的宽度先上完美 viewport 适配代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Docume

2020-12-22 18:00:48 978

原创移动端 Rem 适配

移动端 Rem 适配适配的概念：实现页面在不同设备上等比，也就是说改变了一个元素在不同设备上占据 css 像素的个数打个比方，比如说页面上有一个盒子，占移动端设备宽度的 50% ，在改变移动端设备的情况，把盒子由 iphone 6 的 375 px (css 像素)设备宽度的，放到 6 plus 414px（css 像素）设备宽度的屏幕下，两个盒子仍然占据设备宽度的 50%先要明白两个单位 em 和 rem：在 PC 端浏览器下（以谷歌浏览器为主），字体的默认大小是16px，字体最小为12px

2020-12-22 17:57:29 798 2

原创 React 16.4 生命周期（二）

React 生命周期（二）这里只说 React 16.4 之后的生命周期，查看之前的生命周期，请访问：https://blog.csdn.net/weixin_46107920/article/details/109742013static getDerivedStateFromProps(props, state) // 初始化/更新时都会调用getSnapshotBeforeUpdate(prevProps, prevState) // 组件更新时调用Mounting 阶段：组件的初

2020-11-17 15:52:03 167

原创 React 的生命周期（一）

React 的生命周期（一）React 15 中的生命周期，有一下几个：constructor() // 定义组件时，执行生命周期, 一般state会在里面初始化componentWillReceiveProps(nextProps) // 父组件修改组件的props时会调用(官方文档：父组件每次render时都会调用)shouldComponentUpdate(nextProps, nextState) // 组件更新时调用componentWillMo

2020-11-17 14:31:02 215

原创 React - Context API 维护全局状态，实现全局组件通信

Context API 维护全局状态，实现全局组件通信Context API 有 3 个关键的要素：React.createContext、Provider、Consumer。我们通过调用React.createContext，可以创建出一组 Provider。Provider 作为数据的提供方，可以将数据下发给自身组件树中任意层级的 Consumer。React.createContext：作用是创建一个 context 对象。const AppContext = React.createC

2020-11-09 17:29:12 366

原创 React 发布-订阅者模式实现组件之间的通信

React 发布-订阅者模式实现组件之间的通信React在实现组件之间通信时，对于“父-孙”，以及兄弟组件之间的信息传递，如果再使用props实现将会非常复杂，因此使用 “发布-订阅者模式” 将会简化这些操作。原生JS中，dom事件中使用 target.addEventListener(type, listener, useCapture) 完成对事件的监听，也是最早的发布订阅者模式。使用发布-订阅模式的优点在于，监听事件的位置和触发事件的位置是不受限的，这个特性，太适合用来应对“任意组件通信”这种

2020-10-28 13:29:44 600

原创 React 父子组件传值的方式

父子组件传值的方式1. 父传子由于React是单向数据流，因此造成了当前组件的state以props形式流动时，只能流向组件树中比自己层级更低的组件。比如在父-子组件这种嵌套关系中，只能由父组件传 props 给子组件，而不能反过来。子组件代码function Child(props) { return ( <div className="child"> <p>{`子组件接收父组件的文本内容是：[${props.fatherText}]`}</

2020-10-23 11:38:30 1030

weixin_46107920的博客