- 博客(48)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 JS前端树形Tree数据结构使用
前端开发中会经常用到树形结构数据，如多级菜单、商品的多级分类等。数据库的设计和存储都是扁平结构，就会用到各种Tree树结构的转换操作，本文就尝试全面总结一下。如下示例数据，关键字段id为唯一标识，pid为父级id，用来标识父级节点，实现任意多级树形结构。"pid": 0“0”标识为根节点，orderNum属性用于控制排序。在前端使用的时候，如树形菜单、树形列表、树形表格、下拉树形选择器等，需要把数据转换为树形结构数据，转换后的数据结效果图：预期的树形数据结构：多了children数组存放子节点数据。
2023-09-26 16:11:19
796
1
原创 js 时间分片解决万级数据渲染问题
可以改用 requestAnimationFrame 去分批渲染，因为这个关于电脑自身刷新效率的，不管你代码的事，可以解决丢帧问题。是DOM节点，但并不是DOM树的一部分，可以认为是存在内存中的，所以将子元素插入到文档片段时不会引起页面回流。不是真实DOM树的一部分，它的变化不会触发DOM树的（重新渲染) ，且不会导致性能等问题。，文档片段接口，表示一个没有父级文件的最小文档对象。使用，用于存储已排好版的或尚未打理好格式的XML片段。这时候可以感觉出来渲染很快，但是如果渲染复杂点的dom会闪屏，
2023-08-22 16:12:21
465
原创 nodejs连接mongodb数据库
MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。
2023-02-01 14:12:28
508
1
原创 obj.a.b.c获取值的异常处理
等数据类型时就会出现报错。而且，我们往往通过后端从数据库获取到的数据，这个链路中，说不准哪一天就会在传递的过程中出现类似的情况。的方式去获取对象深层包含的值，但是，如果遇到。在平时开发过程中，总是会遇到类似于通过。方法，杜绝这种情况的发生。
2023-01-30 10:32:44
184
原创 jquery实现倒计时功能
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。本文实例为大家分享了jquery倒计时功能的实现代码，供大家参考，具体内容如下。
2022-11-22 10:00:29
1336
原创 js深拷贝的常用实现
深拷贝和浅拷贝的区别：浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；深拷贝是另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化。
2022-11-14 10:59:22
242
原创 jquery插件开发标准流程
这样做倒也是种选择。为什么要有面向对象的思维，因为如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，同时不会和别的代码冲突。如果将需要的重要变量定义到对象的属性上，函数变成对象的方法，当我们需要的时候通过对象来获取，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
2022-11-10 16:52:38
149
原创 moment() 去年/今年/上月/上周等 开始时间和结束时间数组
【代码】moment() 去年/今年/上月/上周等 开始时间和结束时间数组。
2022-10-31 10:56:41
1021
原创 前端实现excel数据下载功能
工作中经常遇到下载excel表格数据的需求，后端一般都返回文件流的格式，前端需要解析成excel的形式下载到本地，废话不多说上代码。
2022-10-11 11:53:04
1388
原创 纯css+html实现伸缩式动态搜索框
本文将要介绍如何用纯css加上html实现一个伸缩式的搜索框，相信平时应该会经常在各种网站上看到这种动态按钮，通过移入之后才会展示可以输入，或者点击的内容，今天就来用html+css实现一个。
2022-09-23 16:05:49
572
原创 数组扁平化(flat)常用实现方法
通过some来判断数组中是否有数组,通过while不断循环执行判断, 如果是数组的话可以使用 展开。... 每次只能展开最外层的数组,加上。
2022-09-20 11:57:23
476
原创 Taro request 请求封装
再创建interceptors.js文件写入异常逻辑处理（请求拦截）创建utils.js文件写入处理异常状态方法。再创建baseUrl文件写入请求地址。创建config.js文件写入常用状态码。最后创建api.js文件进行api注册。在根目录下创建service文件夹。创建http.js文件写入逻辑。...
2022-07-26 15:17:15
2681
3
原创 AES前后端加密的方法（适用于vue,react,小程序）
AES前后端加密的方法，后端java, 前端微信小程序，项目中需要针对重要数据进行加密传输。
2022-07-20 18:40:28
1145
原创 Taro UI vue 事件绑定传入自定义参数
Taro UI vue 事件绑定传入自定义参数,由于该UI组件的事件都是用v-bind(:)绑定的，所以传入自定义参数需要用到函数返回函数的形式
2022-07-18 15:14:15
533
原创 vue2.0 wacth深度监听新值与旧值相同问题的解决办法
在上述代码中我们可以看到这是我们正常写的深度监听，但是你会发现当你监听简单数据类型的时候可以获取到旧值与新值，但是当我们监听对象的时候就出问题了 问题如下(新值与旧值相同)深度监听会有问题，下面我们解决一下 如上我们可以看到我们加了一个计算属性，在计算属性中加了一个深拷贝，让后我们监听计算属性的名称就可以了 结果如下...
2022-06-13 09:42:14
551
原创 js 实现一个快速排序方法
"快速排序"思路的三个步骤：1. 在数据集中，选择一个元素作为基准2. 所有小于"基准"的元素，都移到"基准"的左边；所有大于"基准"的元素，都移到"基准"的右边。3. 对"基准"左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。function quickSort(arr){ if(arr.length<=1){ return arr} var baseIndex = Math.floor(arr.length / 2) ; //基准的下标
2022-04-28 11:55:37
275
转载 axios 封装
import axios from 'axios';import { ElLoading, ElMessage } from 'element-plus';import {getTokenAUTH} from '@/utils/auth';const pendingMap = new Map();const LoadingInstance = { _target: null, _count: 0};function myAxios(axiosConfig, customOptio.
2022-04-19 11:33:41
190
原创 mysql查询数据时自动生成序号
在某些特定条件下，从数据库中查寻List数据的时候，需要给每组数据带上一个key序号。具体实现代码如下：SELECT (@i:= @i+1) as 'key', c.country_name as countryName, c.country_code as countryCodeFROM country c, (SELECT @i:=0) as i...
2022-04-19 11:29:50
2295
原创 js实现数组的分片（将一维数组分成若干个二维数组）
废话不多说，直接上代码：let list = [1,2,3,4,5,6,7,8,9];/** * 数组的分片方法 * @param list 传入的数组 * @param size 每片的等分长度*/function arrSlice(list, size){ let temp = []; list.forEach((item, index) => { let key = Math.floor(index/size) if(!temp[key]){
2022-03-17 18:47:31
751
原创 前端使用水印的代码实现
第一点很好实现。我们create一个dom元素，插入到body中就可以了。 const divObj = document.createElement('div'); const styleStr = ` position:fixed; top:0; left:0; bottom:0; right:0;
2022-03-17 10:36:38
1566
原创 class 类封装jq的标准写法
jQuery插件开发模式说到jQuery插件的编写，起初我把它当做封装一个方法那样简单，这显然是错的，因为这让我一开始完全不知道如何下手去编写一个插件。所以要先了解一下jQuery插件的三种开发方式： 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第三种方法是用来开发更高级的jQuery部件的。第一种方法过于简单，仅仅是在jQuery命名空间或者可以理解为在jQue
2022-02-18 15:17:26
508
原创 js观察者模式和发布订阅者模式
一、观察者模式的理解观察者模式：一个对象（称为subject）维持一系列依赖于它的对象（称为observer），将有关状态的任何变更自动通知给它们（观察者）。二、发布/订阅模式的理解发布/订阅模式：基于一个主题/事件通道，希望接收通知的对象（称为subscriber）通过自定义事件订阅主题，被激活事件的对象（称为publisher）通过发布主题事件的方式被通知。上代码1、观察者模式的应用class Observer { constructor(name){ this.n
2022-01-26 16:31:21
1552
原创 svg实现loading效果
<svg class="circular" viewbox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" /></svg>html,body { width: 100%; height: 100%; display: flex;}.circular { width: 100px; height: 100px; animation: .
2022-01-25 17:15:07
850
原创 Koa发送http请求
const Koa = require('koa');const app = new Koa();// loggerapp.use(async (ctx, next) => { console.log('第一层洋葱 - 开始') await next(); const rt = ctx.response.get('X-Response-Time'); console.log(`${ctx.method} ${ctx.url} - ${rt}`); console.log(.
2022-01-04 14:37:41
1656
原创 nodejs连接redis,存储用户信息
const redis = require("redis")// 创建客户端const redisClient = redis.createClient('127.0.0.1')redisClient.on('error', err => { console.error(err)})// 测试redisClient.set('myname', 'lilei', redis.print)redisClient.get('myname', (err, val) => { .
2021-12-30 18:39:35
698
原创 使用express连接http
const express = require("express");// 创建http实例const app = express();app.use((req,res,next) => { console.log('请求开始...', req.method,req.url); next(); })app.use((req,res,next) => { req.cookie = { userId: 'aaa111' } next()}).
2021-12-30 18:19:23
714
原创 node js 连接mysql
const mysql = require('mysql');const con = mysql.createConnection({ host: 'xxx', user: 'root', password: 'xxx', port: '3306', database: 'xxx'});con.connection();const sql = 'select * from users';con.query(sql, (err, data)=> { if(err.
2021-11-12 15:30:57
1310
原创 node js 发送http请求
const http = require('http');const server = http.createServer((req, res)=> { if(req.method === 'GET'){ res.end('hello world') } if(req.method === 'POST'){ let postData = ''; req.on('data', chunk => { .
2021-11-11 10:38:39
1317
原创 使用 Proxy 实现观察者模式
const queuedObservers = new Set();const observe = fn => queuedObservers.add(fn);const observable = obj => new Proxy(obj, {set});function set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver); queuedObser.
2021-11-05 15:14:21
80
原创 JavaScript中的代理和反射
JavaScript中ReflectJavaScript在ES6提供了反射内置对象Reflect，但JavaScript里面的反射和Java反射有所不同。先看下Reflect提供的13个静态方法。 Reflect.apply(target, thisArg, args) Reflect.construct(target, args) Reflect.get(target, name, receiver) Reflect.set(target...
2021-11-04 18:41:46
513
原创 写一个简单的希尔排序（选择排序的高级版）
希尔排序是插入排序的改进版本，弥补了插入排序在某些情况下的缺点。例如，当长度为100的数组，前面有序区域的数组长度为80，此时我们用第81个数去跟前面有序区域的所有元素比较大小，但恰巧第81个数又是这100个数里最小的，它本应该在索引为1的位置，如图所示本例中第81个数据的值为1，那么前面有序区域里的80个元素都要往后移动一个位置，这种情况就非常影响排序性能。因此，我们就要想办法尽可能早点让小的值靠前，让大的值靠后，这样就能避免上述情况了，这就是希尔排序要解决的问题。希尔排序也叫做缩小增
2021-10-27 16:26:02
97
原创 写一个简单的插入排序
插入排序是一种将指定元素与某个有序区域元素比较并交换位置的排序算法。我们先简单举个例子，假设现在有这样一个无序数组首先，我们把索引为0的元素看作区域，该区域是有序的，因为就只有一个元素，怎样排序都是它一个元素，所以就认为它是有序的。然后我们取出有序区域右边的第一个元素，即索引为1的元素 67，存到变量 temp 中。然后从有序区域的最右边开始，将元素依次与变量 temp 中的元素 67 比较，若大于67，则将位置向右移动一格；若小于67，则不需要继续遍历了，因为该区域是有序的。上代码：
2021-10-27 14:52:09
153
空空如也
p.sort is not a function
2018-05-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人