随笔分类 -  Javascript

1 2 3 下一页
图片懒加载方案
摘要：一、img标签loading属性 loading：指示浏览器应当如何加载该图像。允许的值： eager：立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。 lazy：延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载 阅读全文
posted @ 2025-07-15 17:45 盼星星盼太阳 阅读(19) 评论(0) 推荐(0)
前端预览word几种方案
摘要：一、问题引入 前端需要预览word文档 二、解决方案 1.mammoth.js（不推荐） 页面代码 <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="han 阅读全文
posted @ 2025-04-27 19:51 盼星星盼太阳 阅读(933) 评论(0) 推荐(0)
请求出现“Content type ‘application/octet-stream‘not supported“错误
摘要：一、场景 记一个接口调试问题，前端传参包括文件+json字符串，请求头 'Content-Type': 'multipart/form-data', 请求参数 params = { addVo: JSON.stringify({xxx: xxx}), multipartFile: this.file 阅读全文
posted @ 2025-04-16 16:58 盼星星盼太阳 阅读(2728) 评论(0) 推荐(0)
vue项目使用XLSX插件纯前端导出excel
摘要：一、问题引入 前端el-table表格直接导出为excel文件，无需后端接口返回文件流 二、解决方案 1.插件安装 yarn add xlsx yarn add file-saver 2.转换表格数据 将 el-table 的 tableData 数据格式化成适合 Excel 的结构 // 1. 转 阅读全文
posted @ 2025-03-18 14:18 盼星星盼太阳 阅读(617) 评论(0) 推荐(0)
vue解析markdown格式为html结构
摘要：一、问题引入 AI智能问答对接模型返回的结果大部分都是markdown格式，前端界面展示需兼容 二、marked插件 1.插件安装 yarn add marked 2.插件注册 main.js全局注册： import marked from 'marked'; Object.defineProper 阅读全文
posted @ 2025-03-12 14:09 盼星星盼太阳 阅读(414) 评论(0) 推荐(0)
vue打字机效果
摘要：一、问题引入 AI流行，做一个智能问答的需求 二、解决办法 流式接口响应； 使用插件typeit； 纯代码实现； 三、代码实现 本文着重纯代码实现打字机效果，话不多说，代码如下 1.封装VueTypewriter组件 <!-- * @Description: * @Author: * @versio 阅读全文
posted @ 2025-03-12 13:58 盼星星盼太阳 阅读(510) 评论(0) 推荐(0)
JS实现浏览器全屏F11
摘要：一、问题引入 预览图片时自动全屏 二、解决方案 document原生API获取全屏状态（document.fullscreen 已被弃用，可用document.fullscreenElement 只读属性返回当前页面中以全屏模式呈现的 Element，如果当前页面未使用全屏模式，则返回 null。） 阅读全文
posted @ 2025-02-14 15:28 盼星星盼太阳 阅读(436) 评论(0) 推荐(0)
防止浏览器记住密码
摘要：一、问题引入 客户要求登录时，不能被浏览器截取记录密码 二、问题分析 问题的根源就在于浏览器会捕捉你的password的输入记录，以最后一次为节点进行存储。所以不管我们对password做什么处理，只要是password进行了输入，都会被拦截。 三、解决方案 使用css属性-webkit-text- 阅读全文
posted @ 2024-12-05 10:30 盼星星盼太阳 阅读(146) 评论(0) 推荐(0)
前端长列表优化
摘要：一、场景引入 长列表网页相信大多数开发者都遇到过，在DOM元素过多的情况下，浏览器渲染会很慢，非常影响用户体验。因此我们会经常采用虚拟滚动、分页、上拉加载更多等不同的方式来进行优化，这些方式的思想都是一样的，都是只渲染可见区域，等用户需要时再加载更多的内容。 二、解决方案 1.css属性 conte 阅读全文
posted @ 2024-01-18 11:25 盼星星盼太阳 阅读(903) 评论(0) 推荐(0)
img src获取不到图片，加载默认图片
摘要：记一个场景： img src匹配服务器图片，匹配不到显示碎图 <img src="?" id="imgId" onerror="this.onerror=null;this.src='images/xxx.png'"> 可通过onerror指定一张默认图片； 注意：若默认图片也不存在，会进入死循环， 阅读全文
posted @ 2024-01-12 14:58 盼星星盼太阳 阅读(244) 评论(0) 推荐(1)
前端开发中的Error以及异常捕获
摘要：一、JavaScript中的Error JavaScript中，Error是一个构造函数，通过它创建一个错误对象。当运行时错误产生时，Error的实例对象会被抛出。构造一个Error的语法如下： // message: 错误描述 // fileName: 可选。被创建的Error对象的fileNam 阅读全文
posted @ 2022-11-22 10:22 盼星星盼太阳 阅读(885) 评论(0) 推荐(0)
全局监控Promise错误
摘要：一、问题引入 Promise 在前端中的使用已经非常普遍了，但是许多开发者或许习惯了链式调用却忘了捕获 Promise 的错误了。 例如： function forgetCatchError () { async() .then(() => { // code.. }) .then(() => co 阅读全文
posted @ 2022-11-22 09:51 盼星星盼太阳 阅读(696) 评论(0) 推荐(0)
ES6对象的super关键字
摘要：super是es6新出的关键字，它既可以当作函数使用，也可以当作对象使用，两种使用方法不尽相同 一、super作为函数 super用作函数使用的时候，代表父类的构造函数，es6规定在子类中使用this之前必须先执行一次super函数，super相当于Father.prototype.construc 阅读全文
posted @ 2022-10-13 10:56 盼星星盼太阳 阅读(362) 评论(0) 推荐(0)
前端JS常用设计模式
摘要：话不多说，这里记录一些常见的设计模式，常看常新，也能提升JavaScript编程水平 一、设计原则 二、单例模式 单例模式的定义是,保证一个类仅有一个实例,并且要提供访问他的全局api 单例模式在前端是一种很常见的模式,一些对象我们往往就只需要一个,如VueX,React-redux等框架全局状态管 阅读全文
posted @ 2022-06-22 16:09 盼星星盼太阳 阅读(328) 评论(0) 推荐(0)
数组扁平结构与树状tree结构转化
摘要：话不多说，tree数据结构如图： 一、tree结构扁平化 function flatFuc(arr) { return arr.reduce((pre, cur) => { if (cur.children) { let curArr = JSON.parse(JSON.stringify(cur. 阅读全文
posted @ 2022-06-20 16:48 盼星星盼太阳 阅读(273) 评论(0) 推荐(0)
深拷贝常用方法与循环引用问题
摘要：一、JSON.parse()与JSON.stringfy()方法 json序列化直接转化 const person = { name: 'seven', info: { age: 20 } } const person1 = JSON.parse(JSON.stringify(person)) pe 阅读全文
posted @ 2022-05-13 17:38 盼星星盼太阳 阅读(277) 评论(0) 推荐(0)
Promise原理浅析以及简易实现
摘要：一、什么是Promise Promise 是一种用于异步编程的设计模式，它解决了传统回调函数（callback）所带来的回调地狱（Callback Hell）问题。在 JavaScript 中，Promise 是 ECMAScript 6（ES6）引入的一种特性，用于处理异步操作，使得异步代码更易于 阅读全文
posted @ 2022-05-12 14:19 盼星星盼太阳 阅读(156) 评论(0) 推荐(0)
由Credentials引起的cors跨域问题
摘要：一、问题引入 express搭建服务，使用fetch接口调用显示跨域，具体如下 The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the re 阅读全文
posted @ 2022-04-28 17:36 盼星星盼太阳 阅读(2203) 评论(0) 推荐(0)
多维数组任意元素生成路径，并根据路径插入元素
摘要：一、多维数组生成路径 递归多维数组，给每一个元素生成一个路径 多维数组数据如下： 递归函数如下： const addPath = (arr,path=[])=>{ for(let i=0;i<arr.length;i++){ let newpath = JSON.parse(JSON.stringi 阅读全文
posted @ 2022-04-11 18:34 盼星星盼太阳 阅读(79) 评论(0) 推荐(0)
ES6优化ES5语法写法及案例（持续更新）
摘要：1.空值合并运算符 ?? 空值合并运算符（??）是一个逻辑运算符，当左侧操作数为 null 或 undefined 时，返回右侧的操作数，否则返回左侧操作数 注意：?? 运算符的优先级非常低，只略高于？和 = 如果没有明确添加括号，不能将其与 || 或 && 一起使用 eg：关于输入框非空的判断 i 阅读全文
posted @ 2021-11-29 15:50 盼星星盼太阳 阅读(249) 评论(0) 推荐(0)

1 2 3 下一页