wstomc-CSDN博客

原创 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 5083 4

原创处理嵌套未知层级的对象数组数据

不知道你们有没有在项目中遇到特别复杂的数据，最近的项目就遇到过，其实说实话并不是数据有多复杂，主要是太多，因为很多数据的处理无非就是过滤，去重等等这几种方式数据const q = [ { id: 1, name: "李四1", children: [ { id: 1, name: "李四1" }, { id: 2, name: "李四" }, { id: 2, name: "李四" }, {

2020-08-16 20:46:28 719

原创 react手写轮播

这是我在项目中用到的一个轮播图，当然项目中是比这个多了点其它东西的，这个是我刚开始接到项目说要手写完成轮播的时候，简单写出了一个模子的，所以里面还保留了很多属性我是没有删除的。使用的技术是rax，内核就是react，而且rax跟react-native特别像，如果你们接触过的话，那阅读下面的代码应该是没有压力的。你们也可以直接当react来使用就可以了，只是有些标签的区别而已，应该很容易理解的。如果是要原生js的轮播我的之前文章也是有的。所以直接去看代码吧/** @jsx createElement *

2020-08-16 20:18:52 801

原创原生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 213

原创 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 161

原创 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 1694

原创 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 1231

原创 vue封装better-scroll（iscroll）组件

1. 使用vue-cli脚手架创建vue项目2. 在项目的根目录下使用 npm i better-scroll -S 命令安装better-scroll3. 创建 app-scroll.vue 文件<template><div class="app-scroll" ref="scroll"> <div class="scoll-wrap"> ...

2020-02-24 11:25:25 276

原创 vue父子间传值

搭建项目：本项目使用vue-cli脚手架工具直接搭建项目结构：1. 父传子在父组件调用自组件时，给子组件绑定自定义属性，在子组件中使用props接收，子组件内部直接当成属性使用父组件调用子组件：<Son title="hello world" value="test" :city="selectCity"/>子组件接收：props: ['title', 'value'...

2020-02-24 10:42:56 201

原创 vue生命周期的详解

vue生命周期：1. 创建阶段：beforeCreate（）；created（）2. 挂载阶段：beforeMount（）；mounted（）3. 更新阶段：beforeUpdate（）；updated（）4. 销毁阶段：beforeDestroy（）；destroyed（）这是vue生命周期阶段，但我们可知道当中的过程是怎样的，其实官网的生命周期图示以及解释的非常清楚了（下图），如果您...

2020-02-21 20:26:50 1143 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 172

原创 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 2081 1

原创事件循环（Event Loop）

事件循环机制JavaScript引擎是单线程，也就是说每次只能执行一项任务，其他任务都得按照顺序排队等待被执行，只有当前的任务执行完成之后才会执行下一个任务。任务分为同步任务和异步任务，异步任务永远在同步任务执行完后才执行调用栈（Call Stack）是一种后进先出的数据结构。当一个脚本执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入调用栈中，然后从头开始执行。事件...

2020-02-21 11:23:12 4072

原创选择排序、冒泡排序、快速排序、桶排序

选择排序假设一个最小值，选出最小值，互换位置…假设一个最小值以及最小值的下标找出最小值以及最小值的下标假设的最小值与找出的最小值换位function selectSort(arr){ for (var n = 0; n < arr.length-1; n++){ // 1.假设一个最小值以及最小值的下标： var min = arr[n]...

2020-02-21 10:25:07 277

原创 js解析器

JS解析器浏览器中有一套专门解析JS代码的程序，这个程序称为js的解析器。浏览器运行整个页面文档时，遇到JS解析器的工作步骤：1. 预解析代码主要找一些关键字如var、function、参数等，并存储进仓库里面(内存)；变量的初始值为 undefined；函数的初始值就是该函数的代码块；当变量和函数重名时：不管顺序谁前谁后，只留下函数的值；当函数和函数重名时：会留下后面那个函数。...

2020-02-21 10:12:58 2373 4

原创 Promise理解及实现Promise

Promise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是：等待中（pending）完成了（resolved）拒绝了（rejected）这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变new Promise((resolve, reject) => { reso...

2020-02-20 21:10:31 488

原创封装cookie

cookie的API主要是三种：设置（setCookie）：传入三个参数：key（关键字）、value（值）、day（保存的时间）获取（getCookie）：传入key就可以获取相对应的value移除（removeCookie）：传入key就可以删除//设置cookiefunction setCookie(key,value,day){ if (day) { va...

2020-02-20 16:45:23 165

原创封装原生ajax

封装原生ajax四个步骤：类似于手机打电话创建XMLHttpRequest对象(买手机)打开与服务器的连接(拨号)发送到服务器(按下拨号键)等待服务器的响应(有可能关机，不在服务区，无人接听，有人接听)function ajax(obj){ // 1.创建XMLHttpRequest对象(买手机) if (window.XMLHttpRequest) { ...

2020-02-20 16:19:14 201

wstomc的博客