- 博客(20)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 react hooks使用ref对遍历的组件取值方式
父组件代码 import React, { useEffect, useRef } from 'react' import { Button, Upload } from 'antd' import AddCom from './components/add' // 需要遍历的数据 const mapList = [ { key: "1", value: {} }, { key: "2", value: {} }, { key: "3",
2021-04-30 11:29:37
5662
4
原创 处理嵌套未知层级的对象数组数据
不知道你们有没有在项目中遇到特别复杂的数据，最近的项目就遇到过，其实说实话并不是数据有多复杂，主要是太多，因为很多数据的处理无非就是过滤，去重等等这几种方式 数据 const q = [ { id: 1, name: "李四1", children: [ { id: 1, name: "李四1" }, { id: 2, name: "李四" }, { id: 2, name: "李四" }, {
2020-08-16 20:46:28
869
原创 react手写轮播
这是我在项目中用到的一个轮播图，当然项目中是比这个多了点其它东西的，这个是我刚开始接到项目说要手写完成轮播的时候，简单写出了一个模子的，所以里面还保留了很多属性我是没有删除的。 使用的技术是rax，内核就是react，而且rax跟react-native特别像，如果你们接触过的话，那阅读下面的代码应该是没有压力的。你们也可以直接当react来使用就可以了，只是有些标签的区别而已，应该很容易理解的。如果是要原生js的轮播我的之前文章也是有的。所以直接去看代码吧 /** @jsx createElement *
2020-08-16 20:18:52
923
原创 原生js完成轮播效果
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</ti.
2020-05-16 11:46:44
281
原创 fetch的二次封装
在终端中使用 npm i whatwg-fetch -S 命令安装fetch模块 创建 Http.js 文件 import 'whatwg-fetch' export default class Http{ static async request(methods,url,data={}){ if(methods === 'GET'){ let st...
2020-03-04 09:08:14
254
原创 vue项目中使用vant插件
下面使用vant插件的方法是官方推荐的一种方法，是自动按需引入的。如果您按照下面方法没能成功引入vant，您可以到官网去查看其它引入方法。vant官网 使用vue-cli脚手架创建项目， 使用 *npm install -g @vue/cli 命令全局安装 Vue Cli 脚手架 创建项目，使用 vue create myAppName 创建项目 在项目的根目录下，使用 npm i va...
2020-02-25 15:21:09
1849
原创 axios的二次封装
这次是对axios进行简单的二次封装（vue项目中） 在项目的根目录中使用 npm i axios -S 安装好axios 创建一个http.js文件 // 提供ajax请求 // 对axios进行二次封装 import axios from 'axios' import {HOST} from './api' export default class Http{ static asy...
2020-02-24 17:03:19
1295
原创 vue封装better-scroll（iscroll）组件
1. 使用vue-cli脚手架创建vue项目 2. 在项目的根目录下使用 npm i better-scroll -S 命令安装better-scroll 3. 创建 app-scroll.vue 文件 <template> <div class="app-scroll" ref="scroll"> <div class="scoll-wrap"> ...
2020-02-24 11:25:25
337
原创 vue父子间传值
搭建项目：本项目使用vue-cli脚手架工具直接搭建 项目结构： 1. 父传子 在父组件调用自组件时，给子组件绑定自定义属性，在子组件中使用props接收，子组件内部直接当成属性使用 父组件调用子组件： <Son title="hello world" value="test" :city="selectCity"/> 子组件接收： props: ['title', 'value'...
2020-02-24 10:42:56
294
原创 vue生命周期的详解
vue生命周期： 1. 创建阶段：beforeCreate（）；created（） 2. 挂载阶段：beforeMount（）；mounted（） 3. 更新阶段：beforeUpdate（）；updated（） 4. 销毁阶段：beforeDestroy（）；destroyed（） 这是vue生命周期阶段，但我们可知道当中的过程是怎样的，其实官网的生命周期图示以及解释的非常清楚了（下图），如果您...
2020-02-21 20:26:50
1352
1
原创 Link和@import的区别
1. 本质区别：link由html提供；@import由css提供 2. 加载方式：link与html页面结构同时加载；@import是等待html页面结构加载完成后再加载，会造成也面的重绘和回流 3. 兼容性：link不存在兼容性问题；@import需要IE5以上浏览器才能识别 4. 操作DOM：@import方式引入无法操作DOM；link方式可以 ...
2020-02-21 19:43:05
249
原创 gulp打包项目案例
目录结构 首先安装好 nodejs、在终端中使用 npm install gulp@3 --global 命令全局安装gulp 创建目录 myproject 在myproject目录下，在终端中执行 npm init -y 生成 package.json 文件、执行 npm install gulp@3 --save-dev 作为项目的开发依赖、并在该目录创建一个名为 gulpfile.js ...
2020-02-21 16:14:56
2178
1
原创 事件循环（Event Loop）
事件循环机制 JavaScript引擎是单线程，也就是说每次只能执行一项任务，其他任务都得按照顺序排队等待被执行，只有当前的任务执行完成之后才会执行下一个任务。 任务分为同步任务和异步任务，异步任务永远在同步任务执行完后才执行 调用栈（Call Stack） 是一种后进先出的数据结构。当一个脚本执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入调用栈中，然后从头开始执行。 事件...
2020-02-21 11:23:12
4200
原创 选择排序、冒泡排序、快速排序、桶排序
选择排序 假设一个最小值，选出最小值，互换位置… 假设一个最小值以及最小值的下标 找出最小值以及最小值的下标 假设的最小值与找出的最小值换位 function selectSort(arr){ for (var n = 0; n < arr.length-1; n++){ // 1.假设一个最小值以及最小值的下标： var min = arr[n]...
2020-02-21 10:25:07
334
原创 js解析器
JS解析器 浏览器中有一套专门解析JS代码的程序，这个程序称为js的解析器。 浏览器运行整个页面文档时，遇到JS解析器的工作步骤： 1. 预解析代码 主要找一些关键字如var、function、参数等，并存储进仓库里面(内存)； 变量的初始值为 undefined； 函数的初始值就是该函数的代码块； 当变量和函数重名时：不管顺序谁前谁后，只留下函数的值； 当函数和函数重名时：会留下后面那个函数。 ...
2020-02-21 10:12:58
2500
4
原创 Promise理解及实现Promise
Promise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是： 等待中（pending） 完成了 （resolved） 拒绝了（rejected） 这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变 new Promise((resolve, reject) => { reso...
2020-02-20 21:10:31
624
原创 封装cookie
cookie的API主要是三种： 设置（setCookie）：传入三个参数：key（关键字）、value（值）、day（保存的时间） 获取（getCookie）：传入key就可以获取相对应的value 移除（removeCookie）：传入key就可以删除 //设置cookie function setCookie(key,value,day){ if (day) { va...
2020-02-20 16:45:23
215
原创 封装原生ajax
封装原生ajax四个步骤：类似于手机打电话 创建XMLHttpRequest对象(买手机) 打开与服务器的连接(拨号) 发送到服务器(按下拨号键) 等待服务器的响应(有可能关机，不在服务区，无人接听，有人接听) function ajax(obj){ // 1.创建XMLHttpRequest对象(买手机) if (window.XMLHttpRequest) { ...
2020-02-20 16:19:14
256
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人