- 博客(55)
- 收藏
- 关注
RSS订阅原创 javaScript垃圾回收机制（垃圾数据是如何自动回收的）
若想了解javaScript的垃圾数据是如何自动回收的，首先我们应该先简单知道一下关于javascript的数据垃圾数据是如何存储的（JavaScript的内存机制）。JavaScript是一种弱类型的、动态的语言● 弱类型，意味着你不需要告诉JavaScript引擎这个或那个变量是什么数据类型，JavaScript引擎在运行代码的时候自己会计算出来。● 动态，意味着你可以使用同一个变量保存不同类型的数据。
2024-06-04 18:24:06
817
1
原创 浏览器中的HTTP请求原理
断开连接阶段。数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。到这里你应该就明白了，TCP为了保证数据传输的可靠性，牺牲了数据包的传输速度，因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。
2024-03-04 17:19:19
930
原创 自定义悬浮气泡组件
如上所说，虽然市面上大部分的气泡提示组件都已经十分完善，但是在工作中，我们有时可能会遇到一些问题，比如页面样式冲突，或者项目体量大导致浮显卡顿，鼠标事件冲突等等情况导致无法使用组件库提供的组件，这个时候我们就需要自己去封装一个。在一个项目中，常常会使用点悬浮展示，而市面上悬浮tooltip的组件非常多。该组件提供的api属性可进入官方文档查看。2.样式可根据个人所需定制。例如常用的antd提供的。3.不会出现样式冲突问题。1.代码体量小，性能好。
2024-02-23 15:09:23
724
原创 treeData 树结构数据处理(react)
=树(tree)==形结构是一种重要的非线性结构，依据分支关系定义的层次结构，在这种结构中，每个元素至多只有一个前趋，但可以有多个后继。在一个常规项目中，当我们遇到需要进行处理的tree结构数据，后端返回给前端的数据往往存在多层性和不确定性。：树(Tree)是n(n 大于等于0)个节点的有限集合T，当n=0时称为空树，否则，称为非空树。：根节点是第一层，其他的节点的层次是它的父节点的层次加1。：有子树的节点是它的子树的根节点的父节点。：A是B的父节点，则B是A的子节点。：位于树顶部的节点，它没有父节点。
2024-02-05 10:39:20
1212
原创 Redux中间件redux-thunk使用详解
redux-thunk主要用于处理reducer无法处理的异步1.什么是异步？同步：就是指前一个任务完成之后在继续执行下一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。异步：每一个任务有一个或多个回调函数（callback），前一个任务结束后，不执行下一个任务，而是执行回调函数，后一个任务不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。2.异步通常会发生在比较复杂的功能使用中axios请求接口数据接口数据返回则为异步。
2023-04-21 13:54:35
2682
2
原创 react-redux的connect详解
mergeProps如果不指定，则默认返回 Object.assign({}, ownProps, stateProps, dispatchProps)，顾名思义，mergeProps是合并的意思，将state合并后传递给组件。connect函数是核心既然是函数，那就有返回值，connect()返回值是Connect组件，通俗点理解，使用connect可以把state和dispatch绑定到react组件，使得组件可以访问到redux的数据。传入所有state，返回指定的state数据。
2023-01-30 19:43:34
2147
原创 二分算法小练
1.给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。2.给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。3.给你一个数组，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。
2022-09-09 09:48:14
284
原创 antv X6旋转属性
为了用户有更好的使用体验，antdv X6除了为我们提供各种图形，线段的绘制，也为我们提供了一些属性值用来控制画布节点，今天我们来看一下最常使用到的节点旋转属性。`值得注意的是enabled可以进行两个方式的配置，一个是直接用bool值进行控制，或传入键值对，以回调函数的方式进行条件限制,并且每一个配置都支持enabled。......
2022-08-13 13:24:15
1357
原创 AntV X6制作画板工具（图形，线段，图片上传）
使用upload上传组件时，需要在接口调用成功之后的函数中进行图片展示，action调用接口，formatter配合拿取后端接口返回的图片数据2.upload内部只可包含一个标签元素否则会失效3.保存画布元素之后，可能会出现img的url丢失的情况，请提前做好存值准备4.使用input进行图片文件上传，需要将文件进行base64格式转换之后才可以在页面上成功展示（使用upload组件可忽略此条）...
2022-07-31 23:33:22
2025
原创 AntV G6 初入门（react中的使用）
在React中使用G6，和在HTML中使用基本相同，唯一比较关键的区分就是在实例化Graph时，要保证DOM容器渲染完成，并能获取到DOM元素。经官网介绍，G6内部绝大多数都是基于React技术栈的，所以官方也仅提供一个G6在React中使用的Demo。在需要展示的页面进行相应的引入即可使用。首先，我们来了解一下G6的核心概念。d.配置数据源，渲染。...
2022-07-25 23:29:59
3884
原创 防抖节流详解及示例
在频繁触发某一个事件时，一段时间内不再触发该事件后才会去调用对应的回调函数，在设定间隔时间内如果下一次事件被触发，那么就重新开始定时器，直到事件触发结束。函数节流在事件持续触发的前提下，保证一定时间段内只调用一次事件处理函数，就是函数节流。...
2022-07-15 18:56:52
247
原创 promise详解
什么是promise？在我们想要了解promise之前需要理解什么是异步编程1.javaScript异步编程异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。同步是指步骤在一个控制流序列中按顺序执行，而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。同步按你的代码顺序执行，异步不按照代码*顺序执行，异步的执行效率更高。什么时候用异步编程？回调函数，回调函数就是一个函数，它是在我们启动一个异步任务的时候就告
2022-07-03 23:43:59
197
1
原创 React 路由 V5（完整版）
一.什么是路由？指路径url与不同的页面和内容进行相应匹配，可以友好的解决Component到url之间的同步映射关系二.路由的使用(1).下载react-router指令（指定v5版本）：npm install react-router-dom@5(2).app内引入(3).路由组件封装为了方便对路由管理，可单独封装起来创建一个router文件夹–router.js在app文件中引入：三.路由重定向在根路径下，或者不存在的路径会自动匹配到Redirect指定的路径（模糊匹配）解
2022-06-30 22:34:56
5343
原创 自定义hooks
简单来讲自定义hooks就是把逻辑抽离出来，提取到第三个函数中，当需要使用时可直接调取函数拿到返回值，可进行传参注意：必须以use开头示例如下：
2022-06-23 23:01:25
1707
原创 react新老生命周期总结
一.初始化阶段–即将挂载,render之前最后一次修改状态的机会render–渲染页面，只能访问this.props和this.state,不允许修改状态componentDidMount—挂载完成，render完成可以访问和修改页面DOM注：初始阶段生命周期只在初始化时调用一次二.运行中阶段:父组件修改属性触发，可接收到最新的propsshouldComponentUpdata(nextProps,nextState):是否允许页面更新，默认返回true，返回false会阻止render调用
2022-06-06 16:46:03
334
原创 react完整版Todolist，增删改查
应用代码如下import React from "react";class Todolist extends React.Component { constructor(props) { super(props) this.state = { list: [{ id: 11, context: 'aaa', ischecked: false,
2022-05-30 00:13:09
375
原创 getFieldDegetcorator使用Select组件
当使用form表单的getFieldDegetcorator属性获取Select值时，需要给Select下option的value属性进行赋值，form.validateFields取得的values的值是Select下option的value属性的赋值代码如下：import { Select } from 'antd//从antd中引入Select//用validateFilds取表单值form.validateFilds((err,values)=>{console.log(valu
2022-02-07 16:11:12
655
原创 redux应用加减求和功能demo
redux工作原理图1.去除Count组件自身的状态count组件为我们需要使用的求和组件2.src下建立redux文件，redux内部创建store以及reducer等等:-redux： -store.js -count_reducer.js -count_action.js -constant.js 3.store.js文件中：1).引入redux中的createStore函数，创建一个store2).createStore调用时要传入一个为其服务
2021-12-15 15:07:46
1166
1
原创 初识redux
首先，附上学习文档，有兴趣的朋友可以认真看着文档学习，此篇内容只做redux精简介绍。一.学习文档1.英文文档: https://redux.js.org/2.中文文档: http://www.redux.org.cn/二.redux是什么1.redux是一个专门用于做状态管理的JS库(不是react插件库)。2.它可以用在react, angular, vue等项目中, 但基本与react配合使用。3.作用: 集中式管理react应用中多个组件共享的状态。三.什么情况下需要使用redux
2021-12-14 21:33:09
1180
原创 如何在react中禁止浏览器后退
本人公司项目，业务提出需求要求在登录完成后禁止鼠标后退快捷键操作页面回退至登陆页面。首先，想到了监听鼠标事件，鼠标监听事件包括以下几种：click：单击事件。dblclick：双击事件。mousedown：按下鼠标键时触发。mouseup：释放按下的鼠标键时触发。mousemove：鼠标移动事件。mouseover(mouseenter)：移入事件。mouseout(mouseleave)：移出事件。contextmenu：右键事件上述所有事件均无法监听到机械键盘鼠标侧边的后退快捷键
2021-12-14 20:36:37
3701
原创 React-router
REACT-ROUTER配置：嵌套式（路由配置在组件内部）包容性：（多路由渲染）形态：动态路由理念遵循just Component 的API 设计理念万物皆组件，路由规则位于布局和UI本身之间安装react router被拆分成三个包：react-router,react-router-dom和react-router-native.react-router提高核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需要的特定组件下载指令yarn add rea
2021-05-24 16:48:13
179
5
原创 class类与继承
class类1.创建一个类class Father { //构造器方法 //接收实例传进来的参数 //构造器中的this指向具体调用的实例 constructor(name){ this.name = name } //实例的一般方法 speak(){ //speak的方法放在了类的原型上，供实例使用 //通过实例调用speak时，speak中的this就是实例 console.log('我是${this.name}') }}2.创建一个实例const P1 =
2021-04-03 16:00:35
292
原创 React制作简单的Todolist
Todolist以下代码直接粘贴到React项目环境下即可使用import {render} from "react-dom";import React,{Component,createRef,forwardRef} from 'react'// CURD//DOTOLIST//受控class ToDoList extends Component { state = { title:'留言板', nikename:'雪雪', message:'所爱隔山海，山
2021-04-01 21:35:43
275
原创 组件状态
组件状态state|数据|私有状态|本地状态定义//es6+ //实例属性: state class App{state:{}}//es6：构造器 this.state class App extends React.Component{ constructor(){ this.state={} }}//ES5：createReactClass({ getInitialState:function(){ return { 状态名:值,x
2021-04-01 15:53:10
202
原创 React--JSX
JSXjsx是一个 JavaScript的语法扩展，可以理解为js的一个新的数据类型，类XML（JSON前身）语法，出现在js当中，文件为xx.js|xx.jsxvar b= <strong>强壮</strong>语法要求标签要闭合元素必须要有一个顶层元素变量首字母大写代表组件，小写对应是js数据类型属性，小驼峰命名 <xx tabIndex="2">JSX 是一个 JavaScript 语法扩展。它类似于模板语言，但它具有 JavaScrip
2021-03-30 22:10:47
109
原创 react-脚手架项目搭建
环境搭建（官方脚手架）可以使用npm，建议使用yarn1.安装 yarn，重启（不重启，别的盘符有可能用不了）打开cmd（小黑框）执行以下命令//查询当前镜像yarn config get registry //设置为淘宝镜像yarn config set registry https://registry.npm.taobao.org///设置为官方镜像//yarn config set registry https://registry.yarnpkg.com2.安装 create
2021-03-30 21:28:54
730
2
原创 react中的几个核心的概念
一.虚拟DOM（virtual Document object Model）1.DOM的本质是什么？浏览器中的概念，用js对象表示页面上的元素，并提供了操作 DOM对象的API（浏览器提供的API)2.什么是react中的虚拟DOM？是框架中的概念，虚拟dom是以js对象的形式存在的是程序员用 js对象来模拟页面上的DOM和DOM嵌套关系3.为什么要实现虚拟DOM（虚拟DOM的目的）为了实现页面中，DOM元素的高效更新4.DOM和虚拟DOM的区别DOM:浏览器中的概念，用js对象
2021-03-30 16:51:49
316
3
原创 云函数
1.云函数创建右键cloudfunctions->新建node云函数->定义函数名->右键函数名->上传并部署2.编写// 云函数入口文件const cloud = require('wx-server-sdk')//没有wxcloud.init({ env: 'test-vpu1v',})// 云函数入口函数exports.main = async (event, context) => { const wxContext = clou
2021-03-25 20:45:56
732
原创 小程序--云开发
一.云开发初始云环境开发工具->创建云开发项目（选择云开发)必须填入appID开发工具->云开发->设置->创建环境->输入环境名称开发工具->右键点击cloudfunctions目录，切换你创建的环境右键点击cloudfunctions/login云函数->上传并部署 （为了将来的小程序可以访问你的云环境)多云环境初始云环境的动作，做多次，注意：目前免费环境支持两个，多了没有，一般做一个测试和一个正式环境多环境情况下需要指定env// ap
2021-03-25 11:31:07
96
原创 小程序自定义组件方式
自定义组件1.定义首先，我们要明确，自定义组件不是创建page，而是创建component，一个小程序组件==（wxml,wxss,js,json)==2.命名组件名.js3.创建Component({ //构造一个组件 properties:{ //组件的属性列表 title:{ //属性名 type:String,//类型 value: '默认值' } } data:{ //组件数据 msg:'..' }
2021-03-23 11:31:37
362
原创 mongoDB的常用指令
一.查看数据库的帮助文档1.在操作数据库之前，可以先查看mongodb数据库提供的帮助文档命令说明help帮助文档db.help()数据库帮助文档help帮助文档db.test.help()数据库集合帮助文档db.test.find().help()数据库集合查询帮助文档二.数据库操作1.创建并选择：注意：有这个数据库，则会选中这个数据库，没有咋会创建use dbName2.查询db //查看当前数据库show dbs //查
2021-03-19 18:37:50
130
原创 MongoDB和mysql的区别
一.什么是MongoDBMongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写，是一个开源数据库系统。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。在高负载的情况下，添加更多的节点，可以
2021-03-12 19:54:51
62231
5
原创 js实现瀑布流布局--无限加载
1.实现瀑布流布局思路准备好数据之后. 绑定滚动事件. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top）. 加载新数据，渲染新页面.重新执行瀑布流效果2.代码（更换图片路径之后可直接运行）<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style>
2021-03-12 19:30:40
889
3
原创 Vue-脚手架-项目创建方式
一、什么是脚手架？1.Vue CLIVue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 实现的交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global实现的零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。一个丰富的官方插件集合，集
2021-03-09 08:40:17
3004
13
原创 定位
定位1.属性是position分为四种：绝对定位：absolute相对行为: relative固定定位:fixed粘性定位:sticky设置定位的定位元素，可以触发5个属性4个移动的方向 left,right,top,bottom1个层级关系 z-index(可以设置负值，值必须是整数，设置负数比普通元素层级低）普通元素的层级比定位元素的层级低后设置定位属性比先设置定位属性的层级高只有定位元素可以用z-index强制提升层级
2021-03-07 22:52:00
715
2
原创 兄弟组件的传值
兄弟组件 - 传值非父子组件，就是兄弟组件，兄弟组件之间并无任何关系，如果需要传值，需要借助中间方，如：租客 > 中介 > 房东使用 中央事件总线 ，其实就是一个新的vue实例传值const bus = new Vue();接收数据的一方，通过$on 先监听自定义事件，并接收值发送数据的一方，通过$emit触发事件，并传值总结：- bus.$emit() 触发事件：发 - bus.$on() 绑定事件：收兄弟组件的数据传输：准备好要传递的数据定
2021-03-07 22:39:02
2825
1
原创 父子组件的传值
父子组件的传值(一) 父组件给子组件传值1.父组件传递父组件在调用子组件的位置，添加一个自定义属性， 属性的值就是父组件传入子组件的值如果属性值是一个变量，或布尔类型的数据，或数值类型的数据， 该自定义属性需要使用绑定属性v-bind2.子组件接收在子组件定义的位置，添加一个props选项选项的值默认是一个数组，数组的元素就是：父组件在调用子组件的位置定义的属性名这样就可以在子组件中通过自定义属性名访问父组件传入的数据了3.props选项内接收到的父组件传过来的数据，可以进行
2021-03-06 11:57:20
5142
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人