- 解决Antd select框渲染大量数据卡顿问题
喜欢走弯路的人
一、场景:一个下拉框中加载上百条、上千条数据,导致下拉框数据卡顿二、解决方案:1、初次加载30条左右(这个数量自己决定),当用户滚动下拉列表时,去加载更多数据。2、合理运用Select组件的popupScroll函数。为了节流控制,我们需要引入lodash库里面的debounce,达到防抖动的目的。3、使用局部混入,在需要的地方引入即可4、关键点:任意一个下拉框,主要要使用search、popup
- 生产级JavaScript深拷贝实现方案
止观止
前端javascript开发语言前端深拷贝
引言在JavaScript开发中,对象拷贝是常见但易错的操作。本文基于原生JavaScript实现支持循环引用、保留属性描述符、处理所有内置对象的生产级深拷贝函数,解决了Lodash等库的局限性。通过详细技术分析和150行完整代码实现,掌握可靠的深拷贝解决方案。一、为什么需要深拷贝?当JavaScript对象包含嵌套引用时,浅拷贝仅复制第一层引用,深层次对象仍与原对象共享内存地址。这会导致数据污染
- pnpm命令
文章目录1.卸载指定包2.安装指定版本包3.清除pnpm的缓存4.其他相关操作5.版本选择语法6.工作空间示例(monorepo)7.注意事项在pnpm中管理包的特定版本安装和卸载操作如下:1.卸载指定包#卸载单个包pnpmremove#示例:卸载lodashpnpmremovelodash#卸载多个包pnpmremove#全局卸载pnpmremove--global2.安装指定版本包#精确安装特
- Vue 比较两个数组对象,页面展示差异数据值
Aotman_
前端es6javascriptvue.js前端框架
需求:页面要展示出被删除和添加的数据,知道哪些被删除和新添加的数据!如下图:实现:Vue中使用Lodash的differenceBy函数可以方便地比较两个数组并找出它们的差异。安装和引入Lodash首先,你需要在项目中安装Lodash库。可以通过npm进行安装:npmi--savelodash然后,在需要使用differenceBy函数的组件中引入Lodash:import_from'lodash
- vue3使用scale属性来实现大屏自适应铺满整个屏幕
月伤59
javascript前端vue.js
importdebouncefrom"lodash/debounce";import{computed,reactive}from"vue";letthat=reactive({width:1920,height:1080,scaleX:null,scaleY:null,});letstyleObject=computed(()=>{letobj={transform:`scale(${that.
- webpack优化:提高二次构建速度
痛点:开发过程中改一行代码却要等webpack构建半天实在太捉急。项目背景我们的项目是@vue/cli4生成的,基于webpack和vue2开发,未使用ts。用到了很多jquery、lodash、echarts等第三方依赖。参考:@vue/cli4已经默认配置过一些优化方法了,比如为babel-loader增加cache-loder。请教了deepseek和google之后,根据项目的实际情况和当
- react18 + vite5 + typeScript + commitLint + prettier + eslint + husky + lintStaged 实现后台管理系统基本框架
小白小白从不日白
Vue3typescriptgitjavascript
项目大致效果图项目基本说明技术栈react18react-router6antd5zustand4vite45axiosfakerjs模拟数据dayjslodashtypescriptechartscommitlint、prettier、eslinthusky、lint-staged自定义commitlint、cz-cli自定义eslint、prettier本项目大致目录结构├─public#静态
- 前端工具库lodash与lodash-es区别详解
lodash和lodash-es是同一工具库的两个不同版本,核心功能完全一致,主要区别在于模块化格式和优化方式,适合不同的开发环境。以下是详细对比:1.模块化格式lodash使用CommonJS模块格式(require/module.exports)。适用于Node.js环境或通过Webpack/Browserify等工具打包的传统前端项目。示例:javascript复制下载const_=requ
- 快来看看这个提效脚本-一键自动优化项目中 Lodash 导入方式
前端javascript
在现代JavaScript项目中,Lodash是一个非常流行的工具库,它提供了很多高效的工具函数,帮助开发者简化代码和提高开发效率。然而,由于Lodash函数库庞大,一次性导入整个库可能会导致较大的文件体积,影响前端应用的加载速度,正因为如此,lodash也提供了lodash-es的版本,旨在优化lodash工具函数的使用,真正做到按需导入lodash的工具函数,也为了优化性能,减少不必要的代码引
- vue axios 阻塞未完成请求
前端猎码人
vue.jsajax
import_from'lodash'importaxiosfrom'axios'const{CancelToken,Cancel}=axiosconsttokens={}/***请求前处理config(尽可能在最先注册的拦截器中调用)*@param{import('axios').AxiosRequestConfig}config*/exportconstsetConfig=function(c
- Lodash 初学指南(适用于 Vue 3)
来自星星的猫教授
vue.js前端javascript
Lodash初学指南(适用于Vue3)Lodash是一个流行的JavaScript实用工具库,提供了大量高效、模块化的函数,适用于数组、对象、字符串等数据类型的操作。在Vue3中,Lodash可以显著简化复杂逻辑的编写。1.安装与引入安装npminstalllodash#完整版npminstalllodash-es#ESModules版本(推荐Vue3使用)按需引入(推荐)import{throt
- npm 编程小技巧指南
npm人工智能
以下是一篇实用的npm编程小技巧指南,涵盖依赖管理、效率优化和工程化实践,帮助开发者提升工作效率:1.镜像加速:解决安装慢的问题场景:国内网络访问官方源速度慢或受限。方案:切换国内镜像源(如淘宝源):#临时单次使用npminstalllodash--registry=https://registry.npmmirror.com#全局配置镜像源npmconfigsetregistry
- 新搭建一个 Vue 项目后,我有了这 15 点思考
前端瓶子君
javahtmlvuecssweb
作者:codexuhttps://juejin.cn/post/69014669944789401681.分解需求技术栈考虑到后续招人和现有人员的技术栈,选择Vue作为框架。公司主要业务是GIS和BIM,通常开发一些中大型的系统,所以vue-router和vuex都是必不可少的。放弃了ElementUI选择了AntDesignVue(最近Element好像复活了,麻蛋)。工具库选择lodash。建
- Nuxt框架项目实战
闫炳岳
VUE2.0
前言今天抽空过了遍nuxt文档,写了个实践demo,关于nuxt我已经断断续续看了好几遍了,自我感觉也算是入门了吧,从开发到上线心里都有底。后期打算在项目用起来的是nuxt框架,一些函数工具库,比如ramda,lodash等等,后台服务估计会使用###fastify这个库,目测非常方便,尝试尝试。基础只是还是以官方文档为主,尝试过程中如果有什么问题可以留言,看到会回复,文章如有错误,欢迎指正。修改
- vue项目页面不同分辨率适配
_初见.
css3vue.jshtml
首先下载lodash插件npmilodash-S然后在App.vue中导入import_from'lodash'给app容器挂上ref=“app”在mounted使用如下方法(其中的1080以及1920为定义的画布尺寸)exportdefault{name:"App",mounted(){this.$nextTick(()=>{const$app=this.$refs.app;//设置屏幕百分比尺
- vue3实现防抖和节流
李長庚
前端开发语言vue.js
安装Lodashyarnaddlodashnpminstalllodash--save导入Lodash节流防抖import_from"lodash";exportdefault{name:"",setup(){//节流constbtnClick=_.debounce(function(){//....console.log('节流');},2000);//防抖constbtnClick2=_.th
- vue中的防抖和节流
qq_2524963996
vue.jsjavascript前端
防抖(debounce)是指在事件被触发n秒后才执行回调函数,如果在这段时间内再次触发了事件,则重新计时。防抖的主要作用是防止重复提交或重复操作。引入npmi--savelodash网址Lodash简介|Lodash中文文档|Lodash中文网import{debounce}from'lodash'exportdefault{data(){return{searchQuery:''}},metho
- lodash 和 lodash-es 的区别
foolishflyfox
javascriptlodashes
lodash是前端常用的工具库,其有一个es版本lodash-es,两者的api一致,那lodash-es相比于lodash有什么优势呢?下面通过实验说明两者的区别。实验创建实验项目通过创建一个Vite+Vue的项目进行此次实验。$pnpmcreatevite✔Projectname:…lodash-es-test✔Selectaframework:›Vue✔Selectavariant:›Jav
- React之实现前端分页
Welkin_qing
reactreact
文章目录本文提供两种分页思路-纯js分页-使用lodash-es实现分页一、纯js分页(1)html(2)js代码1.list请求函数2.分页组件函数3.分页函数二、lodash实现分页(1)html代码(2)js代码1.请求函数2.分页组件函数3.通过useMemo监听分页本文提供两种分页思路-纯js分页-使用lodash-es实现分页一、纯js分页(1)html{list.map((item)
- Node.js Best Practices 是 GitHub 上一个超级热门的项目
postman
我最推荐的几条最佳实践在所有的实践中,以下五条是我认为对前端开发转Node.js的开发者最有价值的:不要在客户端保存敏感信息-看似常识,但很多人会犯的错误使用环境变量存储机密数据-不要把数据库密码直接写在代码里优先使用内置方法-很多人喜欢引入lodash,其实原生方法已经足够好一次只处理一个错误-嵌套的错误处理是噩梦的开始我最推荐的几条最佳实践在所有的实践中,以下五条是我认为对前端开发转Node.
- JSON.parse(JSON.stringify()) 与 lodash 的 cloneDeep:深度拷贝的比较与基础知识
漠月瑾
前端探秘:问题与原理jsonJSON.parseJSON.Stringify
JSON.parse(JSON.stringify())与lodash的cloneDeep:深度拷贝的比较与基础知识在JavaScript开发中,**深拷贝(DeepCopy)**是一个常见需求,尤其是在处理复杂对象和嵌套数据结构时。JSON.parse(JSON.stringify(obj))和lodash的cloneDeep函数都是实现深拷贝的常用方法。本文将详细探讨这两种方法的区别、各自的优
- vue3封装el-table及实现表头自定义筛选
i_am_a_div_日积月累_
vue3vue.jsjavascript前端
效果图:注意:同时封装了el-table列表和表头使用了jsxjsx的引入使用使用了lodash使用了moment文章目录一、封装内容1.封装el-table组件2.封装表头筛选、排序和下拉数据接口获取3.某列举例4.needGetListt:true需要远程搜索5.needJavaList:true需要后端返回下拉数据6.单列排序和多列排序二、代码1.封装整个表格和表头组件table.vue2.
- echarts绘制3D旋转地球
漠月瑾
javascriptreactjs
效果图代码展示importReact,{Component,Fragment}from'react';importReactEchartsfrom"echarts-for-react";importechartsfrom'echarts';import'echarts-gl';import_from'lodash';importworldfrom'./world.json';echarts.reg
- 【Lodash】lodash的pick用法和omit用法
IMSI
lodash前端lodashjavascript
pick创建一个从object中选中的属性的对象。从object对象内选择你想要的值。_.pick(object,[props])参数:1、object(Object):来源对象。2、[props](…(string|string[])):要被忽略的属性。(注:单独指定或指定在数组中。)返回:(Object):返回新对象。例子:varobject={'a':1,'b':'2','c':3};_.p
- 【lodash的omit函数详解 - 从入门到精通】
Gazer_S
状态模式javascript
lodash的omit函数详解-从入门到精通小白视角:什么是omit?omit在英文中意为"忽略"或"省略"。在编程中,它就是从一个对象中删除不需要的属性,返回一个新对象。//原始对象constperson={name:"张三",age:30,password:"123456"};//使用omit删除passwordconstsafeInfo=omit(person,['password']);/
- lodash常用函数
吃杠碰小鸡
前端前端javascript
文章目录一、数组1、chunk分组2、difference、differenceBy、differenceWith3、findIndex4、intersection、intersectionBy、intersectionWith5、union、unionBy、unionWith二、对象1、pick、omit2、get、set三、数学1、sum、sumBy2、range四、工具函数1、isEqual
- Webpack 模块联邦 vs npm 私服
sma2mmm
webpacknpm前端
1.Webpack模块联邦优点运行时动态加载:模块联邦允许在运行时动态加载远程模块,无需重新构建或发布应用。适合需要频繁更新或动态加载的场景。独立部署:每个应用可以独立开发和部署,模块联邦在运行时将它们组合在一起。适合微前端架构或跨团队协作。共享依赖:可以通过shared配置共享依赖(如React、Lodash),避免重复加载。减少包体积,提升性能。代码复用:可以直接复用远程应用的模块,避免重复开
- vue3使用使用 lodash 插件 实现防抖节流
前端小趴菜05
vue.jsjavascript前端
安装插件npminstalllodash--save使用在页面引入import_from"lodash";防抖前面的所有触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续触发,只会执行一次_.debounce()//lodash封装的防抖函数//使用//vue3里面定义方法的时候,直接在setup里面使用防抖函数包裹一下constvalueChnage=_.debounce(()
- 如何从0设计开发一款JS-SDK
C+ 安口木
前端开发javascript开发语言ecmascript
一、前言前端SDK是什么?前端SDK是为了帮助前端实现特定需求,而向开发者暴露的一些JS-API的集合,规范的SDK包括若干API实现、说明文档等前端SDK其实很常见了,比如:UI组件库:通过封装一系列组件,通过配置帮助开发者调用AntdElementUIJS类库:通过实现一类常用的方法,便于开发处理数据,也不用再考虑兼容性lodashmoment监控统计工具:通过API,来监听前端系统的报错、统
- 【JavaScript】11-JS高阶技巧
beibeibeiooo
JavaScript【已完结】javascript前端ecmascriptes6
本文介绍JS中的一些高阶技巧。目录1.深浅拷贝1.1浅拷贝1.2深拷贝1.2.1通过递归实现1.2.2lodash/cloneDeep1.2.3JSON.stringify()2.异常处理2.1throw抛异常2.2try/catch捕获异常2.3debugger3.处理this3.1this指向3.1.1普通函数this3.1.2箭头函数的this3.2改变this3.2.1call方法改变3.
- java杨辉三角
3213213333332132
java基础
package com.algorithm;
/**
* @Description 杨辉三角
* @author FuJianyong
* 2015-1-22上午10:10:59
*/
public class YangHui {
public static void main(String[] args) {
//初始化二维数组长度
int[][] y
- 《大话重构》之大布局的辛酸历史
白糖_
重构
《大话重构》中提到“大布局你伤不起”,如果企图重构一个陈旧的大型系统是有非常大的风险,重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”,下面我就分享这个“大布局”项目经验给大家。
背景
公司专注于企业级管理产品软件,企业有大中小之分,在2000年初公司用JSP/Servlet开发了一套针对中
- 电驴链接在线视频播放源码
dubinwei
源码电驴播放器视频ed2k
本项目是个搜索电驴(ed2k)链接的应用,借助于磁力视频播放器(官网:
http://loveandroid.duapp.com/ 开放平台),可以实现在线播放视频,也可以用迅雷或者其他下载工具下载。
项目源码:
http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。
项目源码依赖于两个库项目,库项目一链接:
http://git.oschina.
- Javascript中函数的toString()方法
周凡杨
JavaScriptjstoStringfunctionobject
简述
The toString() method returns a string representing the source code of the function.
简译之,Javascript的toString()方法返回一个代表函数源代码的字符串。
句法
function.
- struts处理自定义异常
g21121
struts
很多时候我们会用到自定义异常来表示特定的错误情况,自定义异常比较简单,只要分清是运行时异常还是非运行时异常即可,运行时异常不需要捕获,继承自RuntimeException,是由容器自己抛出,例如空指针异常。
非运行时异常继承自Exception,在抛出后需要捕获,例如文件未找到异常。
此处我们用的是非运行时异常,首先定义一个异常LoginException:
/**
* 类描述:登录相
- Linux中find常见用法示例
510888780
linux
Linux中find常见用法示例
·find path -option [ -print ] [ -exec -ok command ] {} \;
find命令的参数;
- SpringMVC的各种参数绑定方式
Harry642
springMVC绑定表单
1. 基本数据类型(以int为例,其他类似):
Controller代码:
@RequestMapping("saysth.do")
public void test(int count) {
}
表单代码:
<form action="saysth.do" method="post&q
- Java 获取Oracle ROWID
aijuans
javaoracle
A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row.
The oracle.sql.ROWID class i
- java获取方法的参数名
antlove
javajdkparametermethodreflect
reflect.ClassInformationUtil.java
package reflect;
import javassist.ClassPool;
import javassist.CtClass;
import javassist.CtMethod;
import javassist.Modifier;
import javassist.bytecode.CodeAtt
- JAVA正则表达式匹配 查找 替换 提取操作
百合不是茶
java正则表达式替换提取查找
正则表达式的查找;主要是用到String类中的split();
String str;
str.split();方法中传入按照什么规则截取,返回一个String数组
常见的截取规则:
str.split("\\.")按照.来截取
str.
- Java中equals()与hashCode()方法详解
bijian1013
javasetequals()hashCode()
一.equals()方法详解
equals()方法在object类中定义如下:
public boolean equals(Object obj) {
return (this == obj);
}
很明显是对两个对象的地址值进行的比较(即比较引用是否相同)。但是我们知道,String 、Math、I
- 精通Oracle10编程SQL(4)使用SQL语句
bijian1013
oracle数据库plsql
--工资级别表
create table SALGRADE
(
GRADE NUMBER(10),
LOSAL NUMBER(10,2),
HISAL NUMBER(10,2)
)
insert into SALGRADE values(1,0,100);
insert into SALGRADE values(2,100,200);
inser
- 【Nginx二】Nginx作为静态文件HTTP服务器
bit1129
HTTP服务器
Nginx作为静态文件HTTP服务器
在本地系统中创建/data/www目录,存放html文件(包括index.html)
创建/data/images目录,存放imags图片
在主配置文件中添加http指令
http {
server {
listen 80;
server_name
- kafka获得最新partition offset
blackproof
kafkapartitionoffset最新
kafka获得partition下标,需要用到kafka的simpleconsumer
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.
- centos 7安装docker两种方式
ronin47
第一种是采用yum 方式
yum install -y docker
 
- java-60-在O(1)时间删除链表结点
bylijinnan
java
public class DeleteNode_O1_Time {
/**
* Q 60 在O(1)时间删除链表结点
* 给定链表的头指针和一个结点指针(!!),在O(1)时间删除该结点
*
* Assume the list is:
* head->...->nodeToDelete->mNode->nNode->..
- nginx利用proxy_cache来缓存文件
cfyme
cache
user zhangy users;
worker_processes 10;
error_log /var/vlogs/nginx_error.log crit;
pid /var/vlogs/nginx.pid;
#Specifies the value for ma
- [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题
comsci
嵌入式
假如我们需要用JWFD的语法分析模块定义一个带负号的方程式,直接在方程式之前添加负号是不正确的,而必须这样做:
string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"
定义一个0整数c,然后用这个整数c去
- 如何集成支付宝官方文档
dai_lm
android
官方文档下载地址
https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash
集成的必要条件
1. 需要有自己的Server接收支付宝的消息
2. 需要先制作app,然后提交支付宝审核,通过后才能集成
调试的时候估计会真的扣款,请注意
- 应该在什么时候使用Hadoop
datamachine
hadoop
原帖地址:http://blog.chinaunix.net/uid-301743-id-3925358.html
存档,某些观点与我不谋而合,过度技术化不可取,且hadoop并非万能。
--------------------------------------------万能的分割线--------------------------------
有人问我,“你在大数据和Hado
- 在GridView中对于有外键的字段使用关联模型进行搜索和排序
dcj3sjt126com
yii
在GridView中使用关联模型进行搜索和排序
首先我们有两个模型它们直接有关联:
class Author extends CActiveRecord {
...
}
class Post extends CActiveRecord {
...
function relations() {
return array(
'
- 使用NSString 的格式化大全
dcj3sjt126com
Objective-C
格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
- 使用activeX插件对象object滚动有重影
蕃薯耀
activeX插件滚动有重影
使用activeX插件对象object滚动有重影 <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
- SpringMVC4零配置
hanqunfeng
springmvc4
基于Servlet3.0规范和SpringMVC4注解式配置方式,实现零xml配置,弄了个小demo,供交流讨论。
项目说明如下:
1.db.sql是项目中用到的表,数据库使用的是oracle11g
2.该项目使用mvn进行管理,私服为自搭建nexus,项目只用到一个第三方 jar,就是oracle的驱动;
3.默认项目为零配置启动,如果需要更改启动方式,请
- 《开源框架那点事儿16》:缓存相关代码的演变
j2eetop
开源框架
问题引入
上次我参与某个大型项目的优化工作,由于系统要求有比较高的TPS,因此就免不了要使用缓冲。
该项目中用的缓冲比较多,有MemCache,有Redis,有的还需要提供二级缓冲,也就是说应用服务器这层也可以设置一些缓冲。
当然去看相关实现代代码的时候,大致是下面的样子。
[java]
view plain
copy
print
?
public vo
- AngularJS浅析
kvhur
JavaScript
概念
AngularJS is a structural framework for dynamic web apps.
了解更多详情请见原文链接:http://www.gbtags.com/gb/share/5726.htm
Directive
扩展html,给html添加声明语句,以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称,ng是angular的命名空间
- 架构师之jdk的bug排查(一)---------------split的点号陷阱
nannan408
split
1.前言.
jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug.
2.代码
String[] paths = "object.object2.prop11".split("'");
System.ou
- 如何对10亿数据量级的mongoDB作高效的全表扫描
quentinXXZ
mongodb
本文链接:
http://quentinXXZ.iteye.com/blog/2149440
一、正常情况下,不应该有这种需求
首先,大家应该有个概念,标题中的这个问题,在大多情况下是一个伪命题,不应该被提出来。要知道,对于一般较大数据量的数据库,全表查询,这种操作一般情况下是不应该出现的,在做正常查询的时候,如果是范围查询,你至少应该要加上limit。
说一下,
- C语言算法之水仙花数
qiufeihu
c算法
/**
* 水仙花数
*/
#include <stdio.h>
#define N 10
int main()
{
int x,y,z;
for(x=1;x<=N;x++)
for(y=0;y<=N;y++)
for(z=0;z<=N;z++)
if(x*100+y*10+z == x*x*x
- JSP指令
wyzuomumu
jsp
jsp指令的一般语法格式: <%@ 指令名 属性 =”值 ” %>
常用的三种指令: page,include,taglib
page指令语法形式: <%@ page 属性 1=”值 1” 属性 2=”值 2”%>
include指令语法形式: <%@include file=”relative url”%> (jsp可以通过 include