- 博客(60)
- 收藏
- 关注
RSS订阅原创 同源策略：为什么XMLHttpRequest不能跨域请求资源？
如果两个URL的协议、域名和端口都相同，我们就称这两个URL同源。category=1category=0浏览器默认两个相同的源之间是可以相互访问资源和操作DOM的。两个不同的源之间若想要相互访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。具体来讲，同源策略主要表现在DOM、Web数据和网络这三个层面。第一个，DOM层面。同源策略限制了来自不同源的JavaScript脚本对当前DOM对象读和写的操作。第二个，数据层面。
2024-12-20 18:13:32
1141
原创 虚拟DOM和实际的DOM有何不同？
1.DOM解决了哪些问题？● 将页面改变的内容应用到虚拟DOM上，而不是直接应用到DOM上。● 变化被应用到虚拟DOM上时，虚拟DOM并不急着去渲染页面，而仅仅是调整虚拟DOM的内部状态，这样操作虚拟DOM的代价就变得非常轻了。● 在虚拟DOM收集到足够的改变时，再把这些变化一次性应用到真实的DOM上。基于以上三点，我们再来看看什么是虚拟DOM。为了直观理解，你可以参考下图：虚拟DOM执行流程。
2024-12-16 11:40:33
899
原创 JavaScript是如何影响DOM树构建的？
从网络传给渲染引擎的HTML文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是DOM。DOM提供了对HTML文档结构化的表述。在渲染引擎中，DOM有三个层面的作用。● 从页面的视角来看，DOM是生成页面的基础数据结构。● 从JavaScript脚本视角来看，DOM提供给JavaScript脚本操作的接口，通过这套接口，JavaScript可以对DOM结构进行访问，从而改变文档的结构、样式和内容。● 从安全视角来看，DOM。
2024-12-11 10:29:15
854
原创 详解async/await原理（用同步的方式去写异步代码）
你可以把协程看成是跑在线程上的任务，一个线程上可以存在多个协程，但是在线程上同时只能执行一个协程，比如当前执行的是A协程，要启动B协程，那么A协程就需要将主线程的控制权交给B协程，这就体现在A协程暂停执行，B协程恢复执行；同样，也可以从B协程中启动A协程。通常，
2024-12-06 17:01:46
1069
原创 快速获取url路径参数方法
函数是JavaScript中的一个全局函数，用于将被转义的字符串还原成原始字符串。是 JavaScript 中创建正则表达式对象的一种方式。中match的使用意思是找到字符串中符合正则条件的内容返回。为JavaScript 中获取当前url链接中的?是 JavaScript 中的一个内置函数，用于将通过。编码的 URI 组件解码，还原为原始的字符串形式。则是上已经定义好的正则规则。
2024-11-22 16:52:01
314
原创 javaScript垃圾回收机制（垃圾数据是如何自动回收的）
若想了解javaScript的垃圾数据是如何自动回收的，首先我们应该先简单知道一下关于javascript的数据垃圾数据是如何存储的（JavaScript的内存机制）。JavaScript是一种弱类型的、动态的语言● 弱类型，意味着你不需要告诉JavaScript引擎这个或那个变量是什么数据类型，JavaScript引擎在运行代码的时候自己会计算出来。● 动态，意味着你可以使用同一个变量保存不同类型的数据。
2024-06-04 18:24:06
843
1
原创 浏览器中的HTTP请求原理
断开连接阶段。数据传输完毕之后，就要终止连接了，涉及到最后一个阶段“四次挥手”来保证双方都能断开连接。到这里你应该就明白了，TCP为了保证数据传输的可靠性，牺牲了数据包的传输速度，因为“三次握手”和“数据包校验机制”等把传输过程中的数据包的数量提高了一倍。
2024-03-04 17:19:19
975
原创 自定义悬浮气泡组件
如上所说，虽然市面上大部分的气泡提示组件都已经十分完善，但是在工作中，我们有时可能会遇到一些问题，比如页面样式冲突，或者项目体量大导致浮显卡顿，鼠标事件冲突等等情况导致无法使用组件库提供的组件，这个时候我们就需要自己去封装一个。在一个项目中，常常会使用点悬浮展示，而市面上悬浮tooltip的组件非常多。该组件提供的api属性可进入官方文档查看。2.样式可根据个人所需定制。例如常用的antd提供的。3.不会出现样式冲突问题。1.代码体量小，性能好。
2024-02-23 15:09:23
867
原创 treeData 树结构数据处理(react)
=树(tree)==形结构是一种重要的非线性结构，依据分支关系定义的层次结构，在这种结构中，每个元素至多只有一个前趋，但可以有多个后继。在一个常规项目中，当我们遇到需要进行处理的tree结构数据，后端返回给前端的数据往往存在多层性和不确定性。：树(Tree)是n(n 大于等于0)个节点的有限集合T，当n=0时称为空树，否则，称为非空树。：根节点是第一层，其他的节点的层次是它的父节点的层次加1。：有子树的节点是它的子树的根节点的父节点。：A是B的父节点，则B是A的子节点。：位于树顶部的节点，它没有父节点。
2024-02-05 10:39:20
1288
原创 Redux中间件redux-thunk使用详解
redux-thunk主要用于处理reducer无法处理的异步1.什么是异步？同步：就是指前一个任务完成之后在继续执行下一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。异步：每一个任务有一个或多个回调函数（callback），前一个任务结束后，不执行下一个任务，而是执行回调函数，后一个任务不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。2.异步通常会发生在比较复杂的功能使用中axios请求接口数据接口数据返回则为异步。
2023-04-21 13:54:35
2920
3
原创 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
2183
原创 二分算法小练
1.给定一个 n 个元素有序的（升序）整型数组 nums 和一个目标值 target ，写一个函数搜索 nums 中的 target，如果目标值存在返回下标，否则返回 -1。2.给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。3.给你一个数组，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。
2022-09-09 09:48:14
301
原创 antv X6旋转属性
为了用户有更好的使用体验，antdv X6除了为我们提供各种图形，线段的绘制，也为我们提供了一些属性值用来控制画布节点，今天我们来看一下最常使用到的节点旋转属性。`值得注意的是enabled可以进行两个方式的配置，一个是直接用bool值进行控制，或传入键值对，以回调函数的方式进行条件限制,并且每一个配置都支持enabled。......
2022-08-13 13:24:15
1469
原创 AntV X6制作画板工具（图形，线段，图片上传）
使用upload上传组件时，需要在接口调用成功之后的函数中进行图片展示，action调用接口，formatter配合拿取后端接口返回的图片数据2.upload内部只可包含一个标签元素否则会失效3.保存画布元素之后，可能会出现img的url丢失的情况，请提前做好存值准备4.使用input进行图片文件上传，需要将文件进行base64格式转换之后才可以在页面上成功展示（使用upload组件可忽略此条）...
2022-07-31 23:33:22
2136
原创 AntV G6 初入门（react中的使用）
在React中使用G6，和在HTML中使用基本相同，唯一比较关键的区分就是在实例化Graph时，要保证DOM容器渲染完成，并能获取到DOM元素。经官网介绍，G6内部绝大多数都是基于React技术栈的，所以官方也仅提供一个G6在React中使用的Demo。在需要展示的页面进行相应的引入即可使用。首先，我们来了解一下G6的核心概念。d.配置数据源，渲染。...
2022-07-25 23:29:59
4044
原创 防抖节流详解及示例
在频繁触发某一个事件时，一段时间内不再触发该事件后才会去调用对应的回调函数，在设定间隔时间内如果下一次事件被触发，那么就重新开始定时器，直到事件触发结束。函数节流在事件持续触发的前提下，保证一定时间段内只调用一次事件处理函数，就是函数节流。...
2022-07-15 18:56:52
261
原创 promise详解
什么是promise？在我们想要了解promise之前需要理解什么是异步编程1.javaScript异步编程异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。同步是指步骤在一个控制流序列中按顺序执行，而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。同步按你的代码顺序执行，异步不按照代码*顺序执行，异步的执行效率更高。什么时候用异步编程？回调函数，回调函数就是一个函数，它是在我们启动一个异步任务的时候就告
2022-07-03 23:43:59
212
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
5558
原创 自定义hooks
简单来讲自定义hooks就是把逻辑抽离出来，提取到第三个函数中，当需要使用时可直接调取函数拿到返回值，可进行传参注意：必须以use开头示例如下：
2022-06-23 23:01:25
1726
原创 react新老生命周期总结
一.初始化阶段–即将挂载,render之前最后一次修改状态的机会render–渲染页面，只能访问this.props和this.state,不允许修改状态componentDidMount—挂载完成，render完成可以访问和修改页面DOM注：初始阶段生命周期只在初始化时调用一次二.运行中阶段:父组件修改属性触发，可接收到最新的propsshouldComponentUpdata(nextProps,nextState):是否允许页面更新，默认返回true，返回false会阻止render调用
2022-06-06 16:46:03
362
原创 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
391
原创 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
674
原创 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
1176
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
1192
原创 如何在react中禁止浏览器后退
本人公司项目，业务提出需求要求在登录完成后禁止鼠标后退快捷键操作页面回退至登陆页面。首先，想到了监听鼠标事件，鼠标监听事件包括以下几种：click：单击事件。dblclick：双击事件。mousedown：按下鼠标键时触发。mouseup：释放按下的鼠标键时触发。mousemove：鼠标移动事件。mouseover(mouseenter)：移入事件。mouseout(mouseleave)：移出事件。contextmenu：右键事件上述所有事件均无法监听到机械键盘鼠标侧边的后退快捷键
2021-12-14 20:36:37
3790
原创 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
191
4
原创 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
300
原创 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
280
原创 组件状态
组件状态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
208
原创 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
122
原创 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
747
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
327
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
753
原创 小程序--云开发
一.云开发初始云环境开发工具->创建云开发项目（选择云开发)必须填入appID开发工具->云开发->设置->创建环境->输入环境名称开发工具->右键点击cloudfunctions目录，切换你创建的环境右键点击cloudfunctions/login云函数->上传并部署 （为了将来的小程序可以访问你的云环境)多云环境初始云环境的动作，做多次，注意：目前免费环境支持两个，多了没有，一般做一个测试和一个正式环境多环境情况下需要指定env// ap
2021-03-25 11:31:07
105
原创 小程序自定义组件方式
自定义组件1.定义首先，我们要明确，自定义组件不是创建page，而是创建component，一个小程序组件==（wxml,wxss,js,json)==2.命名组件名.js3.创建Component({ //构造一个组件 properties:{ //组件的属性列表 title:{ //属性名 type:String,//类型 value: '默认值' } } data:{ //组件数据 msg:'..' }
2021-03-23 11:31:37
386
原创 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
139
原创 MongoDB和mysql的区别
一.什么是MongoDBMongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写，是一个开源数据库系统。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。在高负载的情况下，添加更多的节点，可以
2021-03-12 19:54:51
62398
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人