- 博客(33)
- 收藏
- 关注
原创 从0开始搭建一套工具函数库,发布npm,支持commonjs模块es模块和script引入使用
从0开始。搭建一套自己的工具函数库,工程打包后支持commonjs模块的引入,es模块的引入。还支持script的形式引入。还支持工程化项目的unplugin-auto-import插件。并将打包结果发布到npm。这套模板也可以用于封装一些个性化的js库,不单单限于工具函数库的一套工程化模板。
2025-04-20 16:34:36
1313
原创 手搓图片懒加载-图片预加载
当一个站点中某些页面的图片比较大时,会出现图片短暂的不显示,或者一部分一部分的显示出来。* 这种方式在首屏时因为没有滚动触发不了事件,首屏的图片也不会加载,解决办法就是开局手动调用一次。// 如果只触发一次的话在触发完成后就取消当前的el监听,提高性能。* 方案一 用事件监听的方式(缺点,事件高频触发导致性能不好)* 还是先上代码在讲道理 用上面图片懒加载来做案例。(来咯,客观你要的函数,请慢用)封装为函数,(小二,上代码)。// 判断元素是否在可视区域,// 方法二 观察者模式。
2023-02-22 12:13:58
135
原创 替换this(3种)
文章目录先准备数据call替换apply替换bind替换先准备数据 const newobj={ uname:'小明', age:22, jub(a,b,c){ console.log(`I an ${this.uname} age ${this.age}`) console.log(a,b,c) } } const obj={ uname:'小红', age:120 }
2022-05-23 15:25:56
560
原创 纯前端导出excel表格,axios下载文件流导出 (vue)
废话就不多说了,直接上代码,写完文章还得继续上班撸代码首先安装好要用的插件,这里我使用的是 js-export-excel和jszip两个库,一个用来处理表格导出一个用来做压缩,如果你不需要做压缩可以不用安装jszip npm i js-export-excel npm i jszip接下来先封装几个工具函数,方便调用 关键在第三步的配置项,可以先看看第三步文件流导出都是大佬,这段代码我就不多逼逼了,有些是为了方便项目中用,你要是看它不爽就盘它,嘿嘿 export function
2022-05-09 15:14:26
563
原创 基于crypto-js的加解密
上码 let CryptoJS = require('crypto-js') export const aesUtil = { //获取key,如果在不需要解密的情况可以直接使用这个获取key genKey: function (length = 16) { let random = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let str = ""; for (l
2022-04-17 21:37:51
374
原创 网页全屏显示以及退出全屏,包括单个元素全屏显示
在一些场景中我们希望网页能够全屏显示,这样可展示的区域更大,也就是隐藏浏览器的地址栏和页签栏,上代码为了方便调用直接进行了封装,同时也做了兼容性处理,(如果你觉得我代码写的垃圾让你不知道该怎么调,那你就看最后面有调用说明代码) // 判断是否处于全屏显示 export function isFullScreen() { if (document.fullscreen) { return true; } else if (document.mozFullScreen) {
2022-04-17 17:17:25
1568
原创 js对象深度克隆
js对象深度克隆为什么要深度克隆对象?嗯,我不晓得我不知道,不要问我,你居然问这种问题1. 上深度克隆之前先来研究研究其它的克隆方式,如果你急要直奔主题那就往下滑到最后去看深度克隆ES6语法糖的方式 var obj={ uname:'小明', jub:{ age:123, obj:{ uname:12 } } } var obj1={...obj} obj1.
2022-04-15 17:43:38
1518
原创 for循环中使用var和let的区别,以及加上定时器后执行出不同的效果
for循环中使用var和let的区别,以及加上定时器后执行出不同的效果?这道题面试的时候经常被问,太闹心了,社会我x哥,是人狠话不多,直接上代码 // 使用var定义循环条件变量, +定时器 输出 3个3 for (var i = 0; i < 3; i++) { setTimeout(() => { console.log(i) }, 0) } // 使用let定义循环条件变量, +定时器 输出
2022-04-15 16:58:17
1141
原创 H5高性能拖拽效果
有时候需要在网页做一个可拖拽的容器,比如消息窗口或者其它的内容,那这个时候该咋办,目前我好像没有发现有第三方的拖拽组件,于是我自己写了一个,上代码封装一下,直接调用addCommandCard() { // 这里也可以用元素获取的方式 let addCommandCard = this.$refs.mesgBox; let createtime = ""; addCommandCard.addEventListener("mousedown", (even
2022-04-15 16:36:15
423
原创 前端如何优雅的展示10万条数据?
假设现在后端给你 10 万条数据,你如何优雅的展示在页面?虽然现实中这种是不可能的,但是有些面试会问,这里个人总结了八种方法,但是我只写了五种准备工作,简单搞个架子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <
2022-04-14 16:26:37
2648
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人